This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.
If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.
Useful Figma files
Useful Tracking Issues
Design work
Improving FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. UXUX UX is an acronym for User Experience – the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.
Status: In progress
As you add more filters in the site editor data views the experience can degrade quite quickly, particularly on smaller containers or screens. The chips begin to dominate the UIUI UI is an acronym for User Interface – the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. which looks clunky and can be distracting.
Work is under way on two enhancements to improve this:
- Move filter chips to a dedicated panel, so that users can toggle their visibility.
- Increase density in the filter chip UI
Consolidate bulk actions
Status: In progress
The current bulk action experience is split between two separate areas of the UI. An effort to simplify and consolidate this is being explored.
Visualizing style inheritance
Status: In progress/Needs feedback
Continuing the conversation on how to visualize inheritance, shown here is a mockup that combines various ideas including showing inherited input values in all text fields just as they are already shown in the “Line height” field, and showing inherited colors in the color flyout.
Text-wrapping
Status: In progress/Needs feedback
Some nascent mockups on how we might offer text-wrapping options in Global Styles. Issue.
Drag to resize
Status: Needs dev
In the List View configuration, the resize handle for the preview frame should resize both the preview and the list. Issue.
Placeholders
Status: Needs feedback
The Placeholder component has hidden complexity in that it needs to be able to scale to contexts as tiny as 60x60px for when it’s inserted in narrow contexts. At the moment, this case is not handled very well at all, except for the Site Logo, which could still improve:
For the Image placeholder, it would be useful to better handle the aspect ratio. Perhaps it, similar to the Site Logo blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., leans in to the literal placeholder material, and moves controls to the block toolbar?
In both cases, work is ongoing in this Figma to explore improvements. Related issues:
MediaPlaceholder/MediaUploadcomponent doesn’t addapt to small sizes- Site logo: set square aspect ratio by default with opt out for themes
- Site Logo: Improve the initial state
Audio Block
Status: Needs dev
A collaboration to advance the Audio block has been sketched out, and is ready for a dev.
WordPress logos page
Status: In progress
As part of the redesign update, we decided to revamp the current Graphics & Logos page by cleaning up the vector and PNG files displayed, making the “Fauxgo” diagram simpler, and applying the latest text styles.
