Design Share #54 (Apr 8-Apr 26)

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.

Style Book

Status: Mockup.

This issue for improving the Style Book has been updated with mockups by Bea.

Synced pattern overrides

Status: Done.

In WP 6.6 we are also shipping synced pattern overrides. Much like Figma, you can override blocks within an instance of a pattern, keeping the rest in sync with the source pattern. Issue.

Grid layout

Status: In progress.

We are extending the Grid 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. variation to a lot more powerful and intuitive via on canvas controls. Issue.

Site editor responsiveness

Status: In design.

As we expand data views in a way that requires more horizontal space we need to more strongly consider how to respond to various screen sizes. Issue.

Block connections

Status: In progress.

In WP 6.6 we will be adding the ability to write to custom fields that have been connected to blocks. Issue.

Visited Links

Status: In progress.

Work is ongoing to improve the appearance of visited links on the The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. site.

Style inheritance visualization

Status: In progress.

This issue for basic style inheritance visualization by showing inherited values in the inspector was refreshed. This is a preriquisite for further enhancements tracked here. Learn section lessons

Status: Mockup.

A sketch of how the individual lessons in the could evolve in a light refresh. See also, past mockups for the Learn section. Figma.


Status: Conceptual.

A mockup exploring shadow creation and management in global styles. Particular attention paid to supporting multiple shadow properties within a single style. Related issue.

List view density

Status: In progress.

As the site editor matures document block structures become more complex. This PR attempts to increase the density of List View 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. to reduce the overall need to scroll so much.

FilterFilter Filters are one of the two types of 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. chips in narrow containers

Status: Conceptual.

In narrow containers filter chips can pile up and consume too much space in the UI. In 60696 we’re exploring ways to improve this experience, one option being horizontal scrolling.

Site theme switcher

Status: In progress.

For Openverse’s Dark mode project, we explored ideas for switching the site theme from light to dark or follow the device settings from the main footer component. The proposal also addresses the future scenario of profile settings for upcoming features that will need it.

Feature introduction ⋅ aka “What’s new”

Status: In progress.

Also for Openverse’s Dark mode project, we made a proposal for introducing features that impact the experience of users with the search. The component reuses existing components and sets a baseline for upcoming announcements.

Search, filter, and sort in

Status: In progress.

As part of redesign project, we have been iterating with how users browse repositories content and how the components involved address all site sections properly.

#design, #design-share