How to Make a Custom Results Page for a Custom Post Type with Block Editor

Question

Here is one approach to point the form’s action of your Search block to any custom FSE page on your site, including the current path.

It should be possible to use the query attribute in the Search block’s markup in your archive template:

"query" : { "post_type" : "fs_ski_resort" }

to add the public WP_Query query variable post_type as a hidden HTML input field.

See here:

https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/blocks/search.php#L38

This should restrict search results to the fs_ski_resort post type when using Inherit query from template query-loop option.

The whole markup could look like:

<!-- wp:search {
    "label":"Search",
    "buttonText":"Search", 
    "query" : {"post_type" : "fs_ski_resort"}, 
    "actionPath" : "/change/this/to/your/search/results/path" 
} /-->

To support the custom actionPath attribute above, to be able to change the action part of the form, we use e.g. the following PHP code as a plugin:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/search' !== $block['blockName'] ) {
        return $block_content;
    }
    if ( empty( $block['attrs']['actionPath'] ) ) {
        return $block_content;      
    }
    $processor = new WP_HTML_Tag_Processor( $block_content );
    if ( $processor->next_tag() ) {
        $processor->set_attribute( 
            'action', 
            esc_url( home_url( "https://wordpress.stackexchange.com/" ) . ltrim( $block['attrs']['actionPath'], "https://wordpress.stackexchange.com/" ) )
        );
        return $processor->get_updated_html();
    }
    return $block_content;
}, 10, 2 );

using the new WP_HTML_Tag_Processor to replace the action part of the form to our needs. Note that we append the actionPath input to the home url.

The generated output for the above block markup would be:

<form role="search" method="get" action="https://example.com/change/this/to/your/search/results/path" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
    <label class="wp-block-search__label" for="wp-block-search__input">Search</label>
    <div class="wp-block-search__inside-wrapper">
        <input class="wp-block-search__input" id="wp-block-search__input" placeholder="" value="" type="search" name="s" required /><input type="hidden" name="post_type" value="fs_ski_resort" />
        <button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit">Search</button>
    </div>
</form>

Hope you can adjust this further to your needs.

Related Posts: