Search post by category with native Gutenberg block: experience sharing

Hello, this post’s main purpose is to share my experience with Search block functionality customization and of course suggestions to make it better are very welcome.

What: building an English section on my Italian-speaking blog with a budget not allowing me to afford a professional multi-language plugin.

How: using FullSiteEditing to create templates, template parts and patterns translated in English – including navigation menus. It’s been a four hands job, me together with the WordPress trainer and web designer I hired to teach me Site Editor’s tricks.

Issue: the search block! Everything worked correctly, except for search block which extracted results from the WHOLE site without specifically selecting what I wanted.

First solution: WordPress trainer proposed me to use custom post types, in order to have posts for Italian and i18npost (means “internationalization”), for English.

CPTUI plugin installed, it was all set; the complication came, as then plugins didn’t help me.

There are several of them promising to customize search criteria and filters, but unfortunately one of my main needs wasn’t covered: accessibility. I’m totally blind and I’m really upset when it deals with working on mixed backends!

WordPress core devs do their best to fit accessibility standards, not the same for third-party plugins, even paid ones, which most of the times have an accessibility gap both in back and front end.

Second solution: try a customized code snippet. I honestly have not so many PHP and code skills, but I trusted other devs working better than me.

Both with Google search and Fediverse users’ help, I found two paths for the same effect:

• 1. a block variation, found in an article where Kinsta blog explained what’s new in WordPress 6.1
• 2. a developer called Mark Wilkinson built another code snippets where search block for only a post type was based on PHP, without JavaScript and using a custom CSS class on the Search block I wanted to set with a specific post type. Class named such as “post-type–i18npost”

Unfortunately, both solutions didn’t work! Tried both modifying the function php file in the theme as the guide recommended, and building a small plugin, with the block-variations JavaScript saved in the /assets/ folder of my current theme.

After having everything set, I realized nothing worked properly. A first search took me to “no posts found”, the second returned undesired results from the wrong post type, namely “posts” when the instruction was to just give me i18npost contents.

Here came a sighted person’s help who told me “watch out, the address bar is different when you perform searches from the navbar and from the results page.” I honestly never paid attention to the browser’s address bar!

My sighted co-worker was right, then:

• performed search through the customized search block: address bar returned site-url/?s=keyword&post_type=i18npost
• second search, performed by the search box appearing just immediately in the results page: site-url/?s=keyword – without other specific parameters.

That made me perform further tests by manually reaching the pages using given parameters: what about categories, without bothering myself with post types what should I do for filtering contents by categories!

Tried s=english&category=international – nothing. category=i18n (the slug), nothing. I have done something wrong, without any doubt. Performing some in-deep research on Google I discovered the trick: the URL parameter for category isn’t category but “cat”, and it returns results if associated to the category’s ID.

Then, not being able to identify a category’s ID by keyboard only (as far as I know you can hover it with mouse to get it), I have used the “Show ID” plugin installed from the repository, which adds an extra-column to the administration panel concerning post types and taxonomies.

Now comes the adventurous part.

They often say:

If the mountain won’t come to Muhammad, Muhammad must go to the mountain.

And that’s what I did!

I took the Block Variation code as Kinsta’s website shared about search function and queryvar, then with my very poor PHP/JS knowledge I created the plugin as follows:

<?php 
/* 
Plugin Name: category international search
Plugin URI: [site URL]
Description: This plugin should create a search block filtered for International category only
Version: 1.0 
Author: Bongo, the coding monkey
Author URI: [my site URL]
*/  
function international_editor_assets() {
	wp_enqueue_script(
		'international-block-variations',
		get_template_directory_uri() . '/assets/block-variations.js',
		array( 'wp-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'international_editor_assets' );
?>
/* JavaScript block-variations.js file follows */
wp.blocks.registerBlockVariation( 
	'core/search', 
	{
		name: 'international-search',
		title: 'international',
		attributes: {
			query: {
				cat: '118'
			}
		}
	} 
);

I have simply changed the parameter and its related value – instead of “post_type” using “cat”, and the post-type’s slug replaced with category’s ID! Easy Peasy – AFTERWARDS, “easy peasy”; but I have bumped my head against it for at least 3 weeks.

Now I should duplicate it on the italian part, so that the Italian search engine will select just Italian results.

Let’s finish with the painful part: SEARCH RESULTS.

How could I get two search result pages?

I mean: when the parameter is “s=[keyword]&cat=4”, point to results-it.php while if the “cat” parameter’s value is “118”, it returns to results-en.php

is there a way with a php code or whatever, to add to the block’s function or variation? Or, at least, instructing the block to use a specific search form, such as searchform-it and searchform-en?

I love the way native search block behaves in front-end, but I would like to customize the backend.

Thanks.

• This topic was modified 1 month, 2 weeks ago by Steven Stern (sterndata).