Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years 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 2 years 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 2 years ago.
After applying PR#3019
56283.2.diff (2.3 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (27)

@luminuu
2 years 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
2 years ago

  • Milestone changed from Awaiting Review to 6.1

#2 @SergeyBiryukov
2 years ago

  • Focuses ui administration added

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


2 years ago
#3

  • Keywords has-patch added

@audrasjb
2 years ago

After applying PR#3019

#4 @audrasjb
2 years 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
2 years 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
2 years ago

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

#7 @audrasjb
2 years ago

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

#8 @luminuu
2 years 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
2 years ago

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

#10 @luminuu
2 years ago

Just tested it and it works great!

#11 @audrasjb
2 years 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
2 years ago

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

#13 @luminuu
2 years 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
2 years ago

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

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


2 years ago

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


2 years ago

#17 @audrasjb
2 years 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
2 years ago

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

#20 @SergeyBiryukov
2 years 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
2 years 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
2 years ago

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

#23 @SergeyBiryukov
2 years 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.


2 years ago

Note: See TracTickets for help on using tickets.