Design Share #60 (Jul 1 – Jul 12)

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.


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:

  1. Move filter chips to a dedicated panel, so that users can toggle their visibility.
  2. 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:

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.


#design, #design-share