Creating a WordPress-friendly Design System
A design system that can be easily translated into a WordPress block-based site not only ensures beautiful and consistent experiences, but also saves a lot of effort and time during development.
Let us understand how we can combine WordPress blocks and some fundamental design philosophies to create efficient and effective design systems for WordPress Block Editor.
Understanding core blocks in WordPress Block Editor
WordPress ships with a variety of blocks, called core blocks. There are more than 100 core blocks available for the user to choose from and more blocks can be added using plugins (block libraries) and by developing custom blocks.
Core blocks can be modified in two ways:
- Logical modifications (extensions)
- Stylistic modifications (customizations and variations)
As designers, we may wish to change both. Hence, it is important to understand what WordPress ships with natively. This reduces development time and effort.
Following are some of the commonly used blocks:
Heading
Heading blocks can be used to add headings (obviously) ranging from H1 – H6 levels. Each of these levels corresponds to the HTML heading element (h1-h6).
Figure 2.6 shows the default heading styles that ship with the Twenty Twenty Four theme.
Some common modifications for heading block are (but not limited to):
- Font family
- Font size
- Font weight
- Font color
Paragraph
Paragraph blocks can be used to add normal text to the website. Figure 2.7 shows a default paragraph block.
A paragraph block supports rich text formatting, so users can format text, add links, etc.
Following are the common considerations:
- Font family
- Font sizes
- Link (Anchor) design
- Font weight
Image
Button
Creating modular design elements for WordPress
- Create a library of reusable components and patterns
- Design with block-based structure in mind
- Develop a system of micro-components that can be combined into larger patterns
- Consider how components can be nested and reused across different contexts
Achieving consistency in WordPress design systems
Consistency is important for any design system. A big advantage of a consistent system is that a major part of the UI work is already solved. It can simply be handed over to new developers and designers and they can continue working with utmost efficiency.
There may be a few inconsistencies here and there to spice the design up a bit, but holistically, a design should be consistent, not only within itself but also with standard guidelines and design principles.
We recommend the following guidelines to achieve consistency:
- Ensure cohesive styling across various page types (home, archive, single post, etc.)
- Use global styles to maintain consistency in typography, colors, and spacing
- Design flexible templates that can accommodate different content types
- Create a set of reusable block patterns for common page sections
- Keep the set of configurations limited
Balancing flexibility and brand consistency
- Allow for customization while maintaining brand identity
- Use locking options to prevent unwanted changes to crucial brand elements
- Provide a range of pre-designed variations that align with brand guidelines
- Create clear documentation on how to use customization options within brand parameters
Nomenclature and organization in WordPress design systems
For a design system, it is crucial to establish a clear naming convention in the design system. A well-defined nomenclature helps designers and developers use consistent terminology across design and codebase. It also helps developers organize theme.json sections logically.
The key to having a good naming system is to document the purpose and usage of each token. For WordPress, we recommend using kebab-case. Usually, we follow the category-concept/property-variant naming convention.
Following are the common set of guidelines to follow while naming the tokens:
Be descriptive
Use informative names, reflecting the purpose of the token. Avoid using generic names such as “color1”.
Bad: xs-h (does not reflect the purpose; no information at all)
Good: gap-horizontal-xs (provides all the information needed)
Maintain consistency
Even if you prefer a different naming convention, it is important to keep the token names consistent throughout the design system.
Bad: color-form-green / color-error (there’s no consistency across the concept in which the token is to be used)
Good: color-feedback-success / color-feedback-error (indicates the concept very clearly)
Make it scalable
Consider how your names scale as your design system grows. Avoid using names that are specific to a project or component.
Bad: rtcamp-rtblock-bggradient
(can only be used for rtblock)
Good: background-gradient
(can be used across the project)
To learn more about tokens and how to name them, you can check out this article.