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 an update to the #block-directory project. You can see the first round of concepts and feedback in this previous post. Feedback from that post was used to update the mockups in this round of iterations.
Building the new 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. Directory in wp-admin presents us with a couple opportunities to redesign certain existing patterns, and turn them into reusable components. When we revisit future admin pages, we’ll have these components available to replace the older patterns.
Here’s some updated patterns we can turn into components for this project.
There are tons of pages in the WordPress admin. None of them are consistent.
I’d previously explored a consistent headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. for admin pages, but it still felt subpar:
When I started working on the Block Directory, I wanted to take another stab at a header that could work across the entire admin. These were roughly based off of Material’s headers, then adjusted and improved to fit our use cases.
Page headers consist of the following elements:
Rather that opening Help and Screen Options (now “Settings”) in tabs, we can use the modal component:
This is a more portable approach than the existing pull-down tabs, and also makes the longform help content much easier to read, since the modal constrains it to a much better line-length for readability.
Note: the modal header and panels don’t line up in the mockups due to some conflicts in the Figma files, but should in real life.
Y’all, List Tables are as old as dirt. They’ve done a good job for the past decade and whatever, but they could use some modernization. Lists Tables would be a way to bring all of the list actions together into one single container, rather than floating above and below, disconnected from the table. I’ve kept the table items themselves the same, but made adjustments to the header, footer, and external table elements.
List Tables are composed of the following elements:
This is similar to how we handle bulk deletion in the Media admin screen.
There isn’t currently a consistent “Empty” State for admin pages (like when you don’t have any posts, pages, comments, etc.). This new component take a stab at one we can reuse for all pages in the future.
Empty States are composed of three elements:
You can see more component documentation for the Block Library in Figma.
Per this 2019 projects recap, the Block Directory is slated for inclusion in WordPress 5.5. Development will hopefully start soon.
In the meantime, if you have a block you’d already like to include in the directory, you can already submit it! Check out this post on Meta for more information.
Thanks to @tinkerbelly for taking my sloppy mocks and making all my one-off elements into reusable Figma components!
You must be logged in to post a comment.