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.
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/ 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 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.. Blocks can be static (an image) or dynamic (a list of posts).
Think of blocks as a single LEGO brick.
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 Team pattern could contain:
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.
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.
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 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. 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.
To summarize:
Layouts > Patterns > Blocks
(If you’re familiar with atomic design, you can also think of blocks as atoms and molecules, patterns as organisms, and layouts as templates.)
Does this terminology make sense? Are you left with any lingering doubts or questions?
You must be logged in to post a comment.