In the WordPress Block theme, How to modify search query to seach from meta value?

Question

In the WordPress block theme, we are not able to customize the search query with WordPress PHP filters. Instead, we need to update the default core/query block which returns the core query part of the WordPress block core functions.

The pre_get_posts filter does not work in the block theme, because there is a different functionality for the block theme to render your query output. I tried creating a variation block of the query. Added extra attributes, and custom meta query in pre_render_block hook to get search results.

block-variations.js file

const VARIATION_NAME = 'custom-search';

wp.blocks.registerBlockVariation( 'core/query', {
  name: VARIATION_NAME,
  title: 'Custom Search',
  description: 'Search values with meta value',
  icon: 'search',
  attributes: {
    namespace: VARIATION_NAME,
    query: {
      postType: 'post',
      offset: 0,
      filterByDate: true
    },
  },
  isActive: [ 'namespace' ],
  scope: [ 'inserter' ],
  allowedControls: [ ],
  innerBlocks: [
    [
      'core/post-template',
      {},
      [
        [ 'core/post-title' ]
      ],
    ]
  ]
});

functions.php file

add_filter('pre_render_block', function ( $pre_render, $parsed_block )
{  
    // Verify it's the block that should be modified using the namespace
    if (!empty($parsed_block['attrs']['namespace']) && 'custom-search' === $parsed_block['attrs']['namespace']) {

        add_filter(
            'query_loop_block_query_vars',
            function ($query, $block) {

                $meta_value = isset($_GET) && isset($_GET['s']) ? $_GET['s'] : '';
                $query['meta_key'] = 'meta_key_name' //Meta key here;

                $query['meta_value'] = $meta_value;
                $query['meta_compare'] = 'LIKE';

                return $query;
            },
            10,
            2
        );
    }
    return $pre_render;
}, 10, 2);

Is there any other way to customize search queries and results generated with core/query blocks?

Answer 1

Your approach to modifying the search query in a WordPress block theme using a custom block variation and the pre_render_block hook is on the right track. However, there are a few adjustments and considerations to ensure it works correctly.

1. Correct Placement of Meta Query: Make sure that your meta query is correctly formatted and placed. In your current setup, you are directly modifying the $query array. However, to search by meta values, you should use a meta query array.
2. Ensuring the Correct Hook: The pre_render_block hook is used to filter the content of the block before it is rendered. This might not be the most effective place to alter the query, especially if the query is being processed elsewhere. Instead, consider using the render_block_data filter, which is more directly involved with the block's rendering process and its data.

Here's an updated snippet for your functions.php file:

    add_filter('render_block_data', function ($block, $source_block) {
    if (!empty($block['attrs']['namespace']) && 'custom-search' === $block['attrs']['namespace']) {
        $meta_value = isset($_GET['s']) ? sanitize_text_field($_GET['s']) : '';

        // Ensure you have a meta query array
        $block['attrs']['query']['metaQuery'] = array(
            array(
                'key' => 'meta_key_name', // Replace with your meta key
                'value' => $meta_value,
                'compare' => 'LIKE'
            )
        );
    }
    return $block;
}, 10, 2);

We use the render_block_data filter to modify the block data before it gets rendered.