Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

Nice work. I appreciate you've been able to unify the content type picker with the filter picker on mobile.

On desktop it makes a ton of sense to replace the filter icon with the number of filters applied, because the label remains as context. I wish a similar pattern culd work on mobile, though I suppose the unread dot can work in its place. Perhaps an alternative would be to have the number shown to the left of the Settings icon?

Related, the white background around the settings icon feels like a "holepunch" in the search box. I wonder if there's an opportunity there.

Perhaps on mobile the settings icon rests, sans background, on the gray search input. When a filter is applied, it gets a boundary — white or gray or a border — and the boundary is extended leftwards to leave room to show the the number of filters applied. What do you think? It's nitpick territory, the dot works.

On desktop it makes a ton of sense to replace the filter icon with the number of filters applied, because the label remains as context. I wish a similar pattern could work on mobile, though I suppose the unread dot can work in its place.

Actually, it does not. The dot indicator points that "you applied" one or several filters, but not "how many" or "which ones."

Think of the following scenario on mobile.

1. User searches "cats" in images from the homepage.
2. Open the Settings, and the drawer shows the content type tab.
3. Tap on Filters tabs and enable "license: CC0" and "Image size: Large."
4. See the results. The drawer closes.
5. Open the Settings and the drawer shows the Filters tab.
6. Tap on Content type to change to Audio
7. Select audio

In the example, shifting to audio means that "License: CC0" remains, but there is no "Image size" criterion. For this we have two options:

1. Just keep "License: CC0" enabled (Filters applied = 1)
2. Reset filters (Filters applied = 0)

In both cases we need to convey that filters changed. And the dot indicator is insufficient for that purpose.

Even if we show the Filter counter next to the Settings button, I am afraid that it might not be fully visible. The change will happen in the background, behind the dark-opaque layer, while the focus is set on the drawer's content. Therefore, the drawer is the "safest" place to convey this info.

This looks like a great way to reduce movement in the UI. It's a different issue, but I'd also like to consider a fixed width for the searchbar or the content switcher to prevent motion there as well.

Consider a fixed width for the search bar or the content switcher to prevent motion there as well.

When designing the new header, I thought of a full-width search bar to avoid white spaces between the input and buttons. I assumed that filtering was a more typical action than shifting to another content type, so the motion effect is likely less visible.

For the 2xl breakpoint, the search is fixed. The full-width would look too prominent on large screens. Although I have not reviewed the implementation nor detailed the condition prior to the hands-off.

As mentioned during the weekly meeting, I will start preparing the assets for its implementation.

The assets are ready to start the implementation ✨

• Design presentation
• Mockups in Figma
• Prototype. xs breakpoint

Please start with the Design page to understand the proposal, the Mockups for the design specs, and Prototype whether you want to interact with the mobile view.

I will update the initial message and status label for ready for work.