Add "Block Theme" filter under "Add themes"

[luminuu]

The Theme Directory on wordpress.org recently got updated to show a shortcut for filtering block themes: ​https://meta.trac.wordpress.org/ticket/6330

Let's add that shortcut to the filter bar when adding a new theme from the WordPress backend. See attachment screenshot for a suggestion.

[luminuu]

Screenshot of the "Add Themes" page in the WordPress backend. In the Filter Bar, a new link "Block Themes" is added between "Favourites" and "Feature Filter".

Trac ticket: https://core.trac.wordpress.org/ticket/56283

[audrasjb]

After applying PR#3019

[audrasjb]

The above PR is a first workaround for this feature.
I'm not a specialist of the Appearance screen, so this changeset needs to be fully tested. I'm also adding the accessibility focus since I'm not sure my JS change is enough to trigger all the small accessibility features triggered by a "normal" tag search on this screen.

[luminuu]

The changes in the PR don't work for me, I think the JS part is correct but put in the wrong function. I've made it working by moving it to the browse function, starting on line 1693:

	// Handles all the rendering of the public theme directory.
	browse: function( section ) {
		// Create a new collection with the proper theme data
		// for each section.

		if ( 'block-themes' === section ) {
			var request = { tag: 'full-site-editing' };

			// Get the themes by sending Ajax POST request to api.wordpress.org/themes
			// or searching the local cache.
			this.collection.query( request );
			
		} else {
			this.collection.query( { browse: section } );
		}
	},

With this change, I get properly working results. @audrasjb Do you want to give this snippet a test?

[SergeyBiryukov]

Could we put "Block Themes" between "Latest" and "Favorites", same as in the ​Theme Directory?

[audrasjb]

Thanks for the feedback @SergeyBiryukov @luminuu I updated the PR accordingly :)

[luminuu]

@audrasjb I've left a review comment on the PR as it's not working for me atm, I think the changes I suggested should make it work :)

[audrasjb]

Thanks @luminuu I somehow messed up with the previous commit :)

[luminuu]

Just tested it and it works great!

[audrasjb]

Removing the needs-dev-note workflow keyword as it is not really a technical change, no new filter is available. But we should of course update the end-user docs on HelpHub.

I think we're good to go with this. Let's discuss this change during the next devchat, because I want to make sure this discussed within the Core team before it's committed :)

Ping @marybaum ☝️

[rafiahmedd]

I just test this feature and it works fine on my end. A good addition.

[luminuu]

Documentation pages where screenshots/videos of the filter bar are used, for documentation reference:

​https://wordpress.org/support/article/using-themes/
​https://wordpress.org/support/article/appearance-themes-screen/

[audrasjb]

Ah perfect, thank you for the links, it really helps!

[audrasjb]

In 53906:

Themes: Add a Block Themes filter in Theme Install Screen.

The Theme Directory on wordpress.org recently got updated to show a shortcut for filtering block themes. This changeset adds a "Block Themes" filter when adding a new theme from WordPress administration.

It also introduces two new action hooks: install_themes_pre_blockthemes (fires before the tab is rendered) and install_themes_blockthemes (fires at the top the tab).

Follow-up to ​[meta11963].

Props luminuu, audrasjb, SergeyBiryukov, rafiahmedd.
Fixes #56283.
See ​#meta6330.

Committed in https://core.trac.wordpress.org/changeset/53906

[SergeyBiryukov]

In 53907:

Coding Standards: Remove a one-time variable in themes.view.Installer.browse.

Alphabetize the list of possible hook name in install_themes_pre_* and install_themes_* filters.

Follow-up to [53906].

See #56283.

[SergeyBiryukov]

Thanks for the commit!

Minor thing, but I think it would read more natural to include a hyphen here, see 56283.2.diff​.

That means the filters would include a mix of underscores and a hyphen, which is not quite typical for core, but has a precedent in a similar filter for plugins:

• install_plugins_pre_plugin-information
• install_plugins_plugin-information

[audrasjb]

Alrighty, let's add an hyphen for consistency, then.

[SergeyBiryukov]

In 53908:

Themes: Include a hyphen in the Block Themes tab key on Add Themes screen.

This better matches the tab name and changes the associated action hooks to:

• install_themes_pre_block-themes (fires before the tab is rendered)
• install_themes_block-themes (fires at the top the tab)

While including a mix of underscores and hyphens in a hook name is not quite typical for core, it does have a precedent and brings more consistency with similar filters on Add Plugin screen:

• install_plugins_pre_plugin-information
• install_plugins_plugin-information

Follow-up to [53906], [53907].

Fixes #56283.