The Design Team provides experience, interface, and visual design expertise for the WordPress project.
Want to get involved? See our handbook and drop into #design once signed up for volunteer opportunities. Our vision is to be the go-to resource for design for other teams across the open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
There’s been ongoing work on the WordPress.orgWordPress.orgThe 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. https://wordpress.org/ Patterns Directory since I last posted. I’ve continued to iterate on the design for the site and editor and wanted to share some updates. You can find the latest designs in Figma, along with all the past iterations and explorations.
Some notable changes since the last post:
The search has been made more prominent.
The chaotic masonry-style layout has been replaced with a more rigid grid.
Pattern titles are always visible.
Author avatars along with view and favorite counts are displayed below the pattern title.
The “Load more” button has been replaced with a UIUIUI 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. for navigating between pages.
The pattern preview gains a menu to adjust the width of the viewport to see how a pattern reacts at various sizes.
The pattern editor gets it’s own welcome tour.
Media uploads will be restricted, meaning patterns can only use media provided to them in the library.
The background color of the pattern editor now matches that of the blockBlockBlock 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. editors “template editing” mode.
The pattern editor replaces the “Preview” menu with a “Width” menu, which allows designers to set the viewportWidth property of their pattern.
Clicking the “Publish” button in the editor uses a multi-step modal that walks through collecting and confirming the required details (title, description, category) of a pattern.
My Patterns has been split into two screens; The first is for patterns you own, and the second is for patterns that you’ve favorited.
Work continues on both Github and in Figma; Please do join in the fun and help us out. If you have any thoughts or feedback feel free to drop a comment below. Thanks!
GutenbergGutenbergThe 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/ is diving deep into customization leading into 2020. With customization, and eventual full site editing, comes new terminology that needs to be defined.
Blocks are the smallest, most atomic unit in the WordPress editor. The Paragraph is the default blockBlockBlock 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.. Blocks can be static (an image) or dynamic (a list of posts).
Patterns are curated collections of blocks, often organized around a specific section or purpose. They make up common patterns across the web.
For example, a Contact pattern could contain:
A contact information block on one side, with fields for address, phone number, and email address.
A contact form block on the right.
A Team pattern could contain:
A column block
Inside each column, a group block containing:
An image block with a round mask for headshots
A headerHeaderThe 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. block for names
A paragraph block for biographies
A social links block
Think of patterns as several LEGO bricks stuck together to make just a castle gate. It’s a feature in itself, but only part of the greater whole of your post or page.
But doesn’t that mean something like Cover or Media & Text are patterns, not layouts?
That’s a great question! It requires more discussion before there’s a definitive answer. Should Cover / Media & Text / etc. be patterns, rather than blocks? What do you think?
Layouts are one step up from patterns. They can be groupings of patterns or specific blocks that make up the entire design of your page — including your header, footer, and any additional global or repeating block areas, like sidebars.
Think of layouts as the entire castle — gates, towers, ramparts, catapults, flags, and all.
But isn’t this just a page template?
The short answer is yes, “layout” is a new way of saying page template. Template, however, is a pre-existing term that carries a lot of baggage. Page templates, as they exist in WordPress now, are technical entities with design implications. On the admin side, changing your page template is a pretty poor user experience. Selecting a different template for your page should be a visual process, but instead, we offer different templates in a dropdown. You can’t preview them, so you have to guess what they’ll look like, or search for a theme demo.
(Additionally, there isn’t any sort of native UIUIUI 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. for selecting different post templates, or any UI at all for post formats.)
By creating layouts as a block-first concept, complete with visual placeholders for filling in content instead of creating pages from scratch, we can start to deprecate templates as a design concept.