Making WordPress.org

#7036 closed enhancement (fixed)

Theme Directory: Add filters for community & commercial themes

Reported by: ryelle's profile ryelle Owned by: ryelle's profile ryelle
Milestone: Priority: normal
Component: Theme Directory Keywords: has-patch
Cc:

Description

The ability to categorize a theme as "community" or "commercial" was launched at the end of last year, and many themes have opted into these. The category shows up on individual themes, but there currently isn't a way to filter by this.

The attached design should be used, adding navigation links to filter the current view to just the selected category.

(this is a similar ticket to #7035, but for the Theme Directory)

Attachments (2)

Themes bar.png (207.0 KB) - added by ryelle 17 months ago.
missingsearch.png (113.6 KB) - added by kafleg 17 months ago.

Download all attachments as: .zip

Change History (21)

@ryelle
17 months ago

This ticket was mentioned in PR #149 on WordPress/wordpress.org by @ryelle.


17 months ago
#1

  • Keywords has-patch added

See https://github.com/WordPress/wordpress.org/pull/142 for the Plugin Directory version of this PR.

This updates the navigation on the Theme Directory to add "Commercial" and "Community" links, which show archives of themes using that categorization. It creates new "browse" pages, wordpress.org/themes/browse/commercial/ and wordpress.org/themes/browse/community/.

⚠️ Due to the way the theme's JS routing works, I can't figure out a great way to combine filters (ex, we can't sort "Community" by popular, nor can we filter out "Community" + "Block Themes"). But this matches the current behavior anyway - you can't sort Block Themes by popular, either.

This is built on #148 but I can't seem to chain them since that branch lives on my own fork, but I intended for them to be separate commits.

cc @WordPress/meta-design

Screenshots:

I also added some responsive styles so the nav isn't so awkward on smaller screens. it's not great, but should be fine until this is redesigned.

Large Medium Small
https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/2f53b94b-3636-4e4c-b0c0-c7a9d628280a https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/0734a279-22ab-4460-9d9a-62d2f5ca6fd2 https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/db3a1628-1cc9-4b25-9c5e-96fc19c20e9a
https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/b34143b7-6613-4bfe-90d0-8a09a9747687 https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/771d6f4d-4858-4e1d-b5f9-8684988a2cf9 https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/9aef5cf9-1ef5-4b54-ab50-a4a0e4bdfe51
https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/c6b814f2-fc92-4d4f-be80-d8643d09ddba https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/09bf79bb-e430-4946-b458-623872cab3ec https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/f90bb656-b588-412b-b4e1-202ebcd1eafc

@dufresnesteven commented on PR #149:


17 months ago
#3

Is it possible my patch didn't apply correctly? It seems to load the relevant view on page load but clicking the menu items returns empty from the endpoint?

https://i0.wp.com/github.com/WordPress/wordpress.org/assets/1657336/246900ad-ac0a-45aa-8b0c-4b0a1ad23d87

@dd32 commented on PR #149:


17 months ago
#4

Is it possible my patch didn't apply correctly?

@StevenDufresne Make sure you have the API sandboxed, but there's also caching which you may have run into.
If you look for if ( 'local' === wp_get_environment_type() ) { in wporg-themes/functions.php and force-enable that branch it should bypass caching.

@dd32 commented on PR #149:


17 months ago
#5

I'm personally not a fan of replacing the Latest and Popular filters with the dropdown and treating it like a Sort - Because they're not sorts, they're views.

If we want to convert them to sorts instead, then that requires changing them from browse to being orderbys in the query handlings.

jasmussen commented on PR #149:


17 months ago
#6

Ideally the filter bar could visually be similar to that of the pattern and plugin directory "tab-bars", i.e. just a blue background on the active state. The theme directory here is a bit the odd one out, with a bordered box, white background, and bottom border.

But given these extend sections are all due for a more coherent visual refresh in the future, this is more of a future concern, where I would expect filter-bars across to be unified, and lean closer to the pattern the plugin and pattern directories use. So on these, I'll defer to you on the dev side to choose. Functionally, this looks right. Thank you!

@ryelle commented on PR #149:


17 months ago
#7

I'm personally not a fan of replacing the Latest and Popular filters with the dropdown and treating it like a Sort - Because they're not sorts, they're views. (The code calls it a 'sorter' but that's a misnomer, and relates to the original code that was pulled from wp-admin theme browser)

Yeah, I was halfway to updating that (sorter term) when I realized it was a bigger change, and I was aiming for the smallest change to ship the new filters. (that's the same reason I didn't adjust the active state look, @jasmussen)

Instead of the dropdown implying sort, we could keep the tab look, which would clear up that confusion:

https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/d0b3dc9e-fbb5-431e-8f96-bc1911af031b

What do you think, @jasmussen ?

@ryelle commented on PR #149:


17 months ago
#8

I updated the spacing on links, which also fixes the slightly awkward focus state 👍🏻

Before After
https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/d52a190a-ad00-4883-9b4b-ed6adf904c84 https://i0.wp.com/github.com/WordPress/wordpress.org/assets/541093/4c1cd6cc-1c7d-40c6-9a9f-e860d39b2283

Is it possible my patch didn't apply correctly? It seems to load the relevant view on page load but clicking the menu items returns empty from the endpoint?

The PR has changes to both /themes/pub/wporg-themes/ and /plugins/theme-directory/— I'm not sure how you apply patches but I need to sync those separately, and if you miss the plugin, the endpoint doesn't work.

jasmussen commented on PR #149:


17 months ago
#9

Thanks for the clarity. The tabbed approach seems like the most pragmatic approach. I personally think that can be okay to go with, so for speed that seems fine to me.

I would love a general sanity check by @richtabor and @fcoveram, probably doesn't need to block anything here, mostly for followup.

#10 @ryelle
17 months ago

In 12645:

Theme Directory: Add "community" and "commercial" as browse views.

See #7036.

#11 @ryelle
17 months ago

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

In 12646:

Theme Directory: Add tabs to view "community" and "commercial" themes.

Fixes #7036.

@ryelle commented on PR #149:


17 months ago
#12

Updated to use tabs instead of the sort dropdown, and committed in r12645 and r12646.

#13 @kafleg
17 months ago

@ryelle

There used to be a number of themes while browsing popular or block themes. But now, I can't see how many block themes there are. It is removed. Can we have that back or it is removed intentionally?

#14 @kafleg
17 months ago

Also, the theme search is missing.

This ticket was mentioned in Slack in #themereview by kafleg. View the logs.


17 months ago

#16 @ryelle
17 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

There used to be a number of themes while browsing popular or block themes. But now, I can't see how many block themes there are. It is removed. Can we have that back or it is removed intentionally?

This was removed intentionally, for now, but the count will be back when the theme directory is redesigned.

the theme search is missing

You're right, the search should have been moved into the header like the Plugin Directory.

This ticket was mentioned in Slack in #themereview by kafleg. View the logs.


17 months ago

#18 @ryelle
17 months ago

In 12652:

Theme Directory: Fix undefined route when using back button.

See #7036.

#19 @ryelle
17 months ago

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

In 12653:

Theme Directory: Bring back search bar in site header.

The search was removed from the filter bar in [12646], but it should have been moved to the header. This change brings it back into the header, mirroring the Plugin & Pattern directory behavior.

Fixes #7036.

Note: See TracTickets for help on using tickets.