As a designer who works with WordPress on a daily basis building websites and themes, I quickly realized the importance of well-crafted block patterns. They’re the backbone of a seamless user experience. Through trial and error, I’ve gathered a few insights on what makes a good pattern, and what ensures that each pattern integrates flawlessly into any WordPress theme, maintaining coherence while offering adaptability. Let me share with you some of the invaluable lessons I’ve learned along the way.
Structure
There is some flexibility when it comes to a pattern’s structure, but generally a structure like the one below helps encourage consistency in the application of patterns, for users applying a pattern anywhere on a site:
- A top-level Group block.
- Spans the full width of the page.
- Makes it easier to change the background color of a whole section of page.
- Makes it easier to reorder the sections of a page, as each pattern is contained within a Group block.
- Typically has the left and right padding values mapped to the site’s global styles layout settings, so that the pattern adapts to the theme (and users’ preferences).
- A container block (Group, Columns, etc.) nested directly within the top-level block.
- Set to the theme’s “wide” width value (
settings.layout.wideSizeintheme.json), allowing for the pattern’s contents to have a max-width, as defined by the theme.
- Set to the theme’s “wide” width value (
- Two Spacer blocks, above and below the container block.
- Allows for users to select and manipulate the space between patterns, without having to find the block’s relevant padding controls.