Make WordPress Core

Opened 17 months ago

Closed 16 months ago

Last modified 16 months ago

#56283 closed feature request (fixed)

Add "Block Theme" filter under "Add themes"

Reported by: luminuu's profile luminuu Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: major Version:
Component: Themes Keywords: has-patch has-screenshots needs-docs needs-user-docs needs-dev-note
Focuses: ui, accessibility, administration Cc:

Description

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.

Attachments (3)

Bildschirmfoto 2022-07-24 um 22.56.56.png (138.4 KB) - added by luminuu 17 months ago.
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".
19c823e6717fadf693486d5c311b180a.gif (1.9 MB) - added by audrasjb 17 months ago.
After applying PR#3019
56283.2.diff (2.3 KB) - added by SergeyBiryukov 16 months ago.

Download all attachments as: .zip

Change History (27)

@luminuu
17 months ago

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".

#1 @SergeyBiryukov
17 months ago

  • Milestone changed from Awaiting Review to 6.1

#2 @SergeyBiryukov
17 months ago

  • Focuses ui administration added

This ticket was mentioned in PR #3019 on WordPress/wordpress-develop by audrasjb.


17 months ago
#3

  • Keywords has-patch added

@audrasjb
17 months ago

After applying PR#3019

#4 @audrasjb
17 months ago

  • Focuses accessibility added
  • Keywords dev-feedback needs-testing has-screenshots needs-docs needs-user-docs needs-dev-note added
  • Type changed from enhancement to feature request
  • Version trunk deleted

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.

#5 @luminuu
17 months ago

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?

#6 @SergeyBiryukov
17 months ago

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

#7 @audrasjb
17 months ago

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

#8 @luminuu
17 months ago

@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 :)

#9 @audrasjb
17 months ago

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

#10 @luminuu
17 months ago

Just tested it and it works great!

#11 @audrasjb
17 months ago

  • Keywords needs-testing needs-dev-note removed
  • Owner set to audrasjb
  • Status changed from new to accepted

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 ☝️

#12 @rafiahmedd
16 months ago

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

#13 @luminuu
16 months ago

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/

#14 @audrasjb
16 months ago

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


16 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#17 @audrasjb
16 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#18 @audrasjb
16 months ago

  • Keywords needs-dev-note added; dev-feedback removed

#20 @SergeyBiryukov
16 months ago

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.

#21 @SergeyBiryukov
16 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#22 @audrasjb
16 months ago

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

#23 @SergeyBiryukov
16 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by sergey. View the logs.


16 months ago

Note: See TracTickets for help on using tickets.