Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
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
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.
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. https://wordpress.org/gutenberg/ 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.
Status: In progress.
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.
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.
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.
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.
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.
Status: In progress.
There are two problems this attempts to address:
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..
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.
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..
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.
You must be logged in to post a comment.