WordPress 5 was released in 2018 and with that release came the long-anticipated and much-debated new block editor – codenamed ‘Gutenberg’.
This new editor opens new opportunities and also introduces new challenges for theme designers.
In this post, I will try to give a basic overview of how a designer can adapt to this new paradigm so that the designer>developer handover is as painless as possible.
Embracing modular design
Everything is a block – or so the Gutenberg mantra goes.
Everything on a WordPress website becomes a block: text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, whether added by plugins or otherwise. Users will only have to learn a single interface —— the block interface.
There’s already been a move to component-based design systems, but I think that the transition from “design me 5 page mockups” to “design 10-15 modules/components/blocks” (we’ll go with ‘blocks’ for the rest of this post) is still tricky for some designers to grasp.
In a block-based world, a developer doesn’t think in templates, or pages, they think in blocks.
It doesn’t matter if the ‘About’ page will eventually contain text, then a video, then a CTA section. We only need to know what each of these looks like.
The exception here is if a block should look a particular way if it is adjacent to another particular block, or in a certain position on the screen. For example, you might want to style a block differently if it’s the first block on a page or if it follows another type of block.
The default WordPress blocks
You can find a list of the default WordPress blocks here. That can be overwhelming for a designer to look at. So many blocks! So many options!
Luckily, if we approach design by first creating a general style guide, then we can deal with most of those blocks without too much worry.
Style guide
One of the most important features of any design and the most useful for a developer is a detailed style guide.
A style guide could contain the following:
- Colour palette
- Typography guide (see below)
- Link and button styles (with hover, focus and active states)
- Form styling (including validation/error messages)
- Grid rules (max-width, number of columns, gutter width, etc.)
- Images (and captions)
Typography guide
Styling for the following elements:
- Paragraphs
- Headings (h1 – h6)
- Unordered lists
- Ordered (numbered) lists
- Quotes (quoting someone else)
- Pullquotes (quoting text on the page)
- Links
For each of the above there could be information about:
- Colour
- Font size
- Font family
- Weight
- Letter spacing
- Line height
- Padding and margins
- Underlines
- Transforms (e.g. uppercase)
Your style guide will largely cover the following blocks:
- Paragraph
- List
- Heading
- Subhead
- Button
- Image
- Quote
- Pullquote
Custom blocks
WordPress doesn’t limit you to only the default blocks.
Through plugins and/or custom development you can have any number of off-the-shelf or custom blocks to work with.
For example, you might want to design a ‘person’ block which shows details of a member of staff. In this case, you could create a block with fields such as:
- First name
- Last name
- Job title
- Email address
- Photo
- Bio
These can be styled as you choose.
Templates
There may still be areas of your site that are not created using ‘blocks’ but are dynamically built. For example, a ‘Blog’ page isn’t usually built up by hand but is instead generated automatically based on the blog posts that you add.
Therefore, there may be some pages, or templates, that need to be designed outside of the ‘block’ system. Typically, these are ‘archive’ style pages like ‘Meet the team’, ‘News’, ‘Resources’, etc.
Site-wide modules
There are two modules that (currently) sit outside of the block system and they are the site header and footer.
Designs for these can be provided separately (like an individual block) or as part of a page mockup, showing how the blocks work together, or a template design.
Navigation
It’s important for a designer to consider the interactivity of any navigation elements. What happens with sub-menus (e.g. dropdowns), what are the hover states, how does it work on touchscreens and mobile devices, etc?
Resources
- Gutenberg: Design principles and vision
- A list of the default blocks
- Designing Themes with Gutenberg Blocks and Sketch
Summary
In some ways, from a design perspective, there are really no limits to what the new block editor can achieve.
However, it’s worth considering how content will be added as it will have an effect on the final cost of the build and ease of use of the system.
If unsure, it’s worth consulting with an experienced WordPress developer.
We’ll be improving this guide over time – if you have any suggestions please let us know.