Design Share: Sep 11-Sep 22

Pattern Directory iteration 2

“Generic” 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. design version.

“Expressive” header design version.

A new iteration for 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. pattern directory, which features a refined submission flow and a new “Pattern Bundles” feature. The best way to test out the new design is through the Figma prototypes, which come in two flavors, a “generic” one that features a common header, as well as a more expressive one.


A great pagination interface can be a whole project on its own. But as a starting point, we explored a minimal version for use in the 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. inspector in style revisions, and hopefully that same pattern can expand, componentize, and apply in more contexts in the future.

Enterprise notice

Per a trac issue, we’re exploring adding the generic homepage banner to the Enterprise page, to direct to a recently released “State of Enterprise for WordPress” report. 

Command Palette organisation

A quick exploration around how to organise results in the command palette in a scannable / scalable way.

Polish Modal 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. on mobile

The experience when interacting with modals on handheld devices can be improved by pinning the container to the bottom of the viewport – within thumbs reach – and making the buttons fill horizontal space to increase their hitbox.

Note: Colors, spacing, radii, and other visual details are rough mockups from early work here.

If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at

#design, #design-share