Design Share: Mar 11-Mar 22

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.

As a new thing in this iteration of our design share, included above are some useful links to where this work comes from. Let us know what you think of this, if any links are missing or otherwise would be useful to include.

Grid layout

Status: In progress.

As part of a drive to improve layout tools within GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. we are working with Robert and Isabel on extending the grid layout type. Jamie’s video below does a decent job of showing off what’s in trunk, but much more exciting things are to come, such as a more intuitive drag/drop/resize type experience. The next iteration is being worked on here, which will be followed up with manually setting row count and click/dragging on cells to create new blocks.

Template vs page content refinements

Status: In progress.

Template part selection

Recently merged, this makes it a little easier for users to modify headers/footers when editing pages. We know changing a site’s navigation can be challenging for non technical folks, so we hope this update strikes a better balance between editing local and global elements. More discussion around the reasoning behind this here.

Proximity selection

This PR, which is not too far away from merging, tries to be a little smarter with what happens when clicking on blocks that are not part of the page you’re editing and instead are within the template. We’d previously show a toast notification but instead are selecting the “nearest” (in location) editable 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.. Although this makes a little harder to modify a template, we think it strikes a better balance especially when combined with the template part change above.

Colour generation

Status: In progress.

We’ve made some further improvements to how colours are generated within the new WP system. It includes a contrast setter which increases or decreases interactive elements like borders and backgrounds. You can watch the video in the later admin design section below to get an idea of how it works.

Admin update

Status: In progress.

We are continuing to make progress on the admin design front, including the related threads of data views. The video below is long but gives a summary of where we are at and goes into detail into some of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. paradigms.

Synced pattern overrides

Status: In progress.

Synced patterns are now coming in 6.6 due to some last minute changes with how we define which blocks are overridable. We are continuing to explore ways of making this more obvious.

contentOnly improvements

Status: In progress.

There are two problems this attempts to address:

  1. Editing in Gutenberg can be complicated for non technical users partly because of how challenging it can be navigating/selecting the block tree (going down and up the tree), and how granular editing is. We are enhancing the zoomed out view which helps to alleviate some complexity when composing pages by emphasising sections and not their inner blocks, but editing still remains a challenge. A prime example is the act of editing a site’s navigation.
  2. When a pattern is contentOnly locked, like synced patterns, we still have a need to modify attributes of inner blocks that may not be surfaced in the toolbar. A prime example is the image block which has alternative text. As an interim solution we have added alternative text to the toolbar in 6.5, but this is not an elegant solution long term.

Top bar organisation exploration

Status: Exploration.

A quick prototype to explore re-organising all ‘plugins’ into a dedicated sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..

Save & publish

Status: In progress.

Another look at saving and publishing in the site editor. This sketch seeks to simplify the single-entity publish flow while aligning it with a potential bulk-publishing experience.

Openverse dark mode

Status: Ongoing.

We continued testing the colors update for supporting dark mode in Openverse. The work involved creating Figma variables to update the Design Library and test the state styles of components to reach a clean 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..

Blocks v2

Status: Ongoing.

We are working to upgrade Blocks page. Among many feedback points and different insights, we are exploring how to present these in a visual form for the discussion to move forward.

#design, #design-share