Block Patterns
Build beautiful posts, pages, and templates with ease with WordPress.com patterns, made by the design team at WordPress.com to effortlessly inherit your theme’s global styles. Choose from a vast collection of patterns and customize them in any way you like; no additional plugins or coding required. Think of these patterns as a component library for the block editor.
Using Patterns on WordPress.com
A WordPress pattern is a collection of blocks arranged together into a thoughtful, intentional, and opinionated section for a post, page, or template.
Find Patterns via the Block Editor
WordPress.com patterns are available in the block editor by following these instructions:
- Navigate to the editor for any post, page, or template.
- Click on the “+” button to bring up the block inserter.
- Click the Patterns tab to browse a list of pattern categories.
- To browse all patterns in a grid view, scroll to the bottom of the list and click on “Explore all patterns.”
- Click your desired pattern to insert it into your post, page, or template.
- Edit the content (images, copy, links) in the pattern. Theme styles set in the Site Editor will be automatically applied to the pasted pattern.
Find Patterns via the Pattern Library
To preview patterns at different screen widths and check the responsiveness of the designs, you can use WordPress.com’s Pattern Library. The library not only allows you to browse, search, and preview patterns at different screen widths, but it also enables you to copy and paste patterns into the block editor:
- Visit the Pattern Library.
- Use the category navigation to view all available patterns, or search for a pattern by feature or keyword.
- Once you find a pattern you’d like to use, click the Copy pattern button.
- If you’re logged out of your WordPress.com account, you will only be able to copy the first three patterns in each category. For any other patterns, you’ll see a button that says Get access and, when clicked, will prompt you to create a free WordPress.com account or log into an existing account.
- Navigate to the editor for a post, page, or template on your WordPress.com website, and paste the pattern by using a keyboard shortcut (command + v on Mac or ctrl + v on Windows) or by right-clicking and selecting Paste.
- Edit the content (images, copy, links) in the pattern. Theme styles set in the Site Editor will be automatically applied to the pasted pattern.
Building with Patterns
The patterns found in WordPress.com’s Pattern Library do not use local custom styles. Instead, they adhere to global styles set in the Site Editor.
When building with patterns, there are a few guidelines we suggest all developers follow:
Block Theme Guidelines
Our block patterns are made to be portable, but your theme.json file will still need to follow some guidelines to ensure our patterns look their best.
Specifically, we assume the following slugs are defined in spacing.spacingSizes:
“slug”: "20”
“slug”: "30"
“slug”: "40"
“slug”: "50"
“slug”: "60"
“slug”: "70"
“slug”: "80"
These are the same spacing presets that WordPress generates by default. If they are missing from your theme, some block spacing may collapse entirely when you paste a pattern. Our patterns may still work if your theme uses different spacing presets, but this is the standard we adhere to.
Pattern Structure Guidelines
In addition to using WordPress.com patterns in your posts, pages, and templates, you can also create your own. The WordPress.com design team has published some of their learnings on the developer.wordpress.org blog, including some of the following suggested guidelines for creating patterns:
- A top-level Group block that spans the full width of the page.
- This makes it easier to change the background color of a whole section of the page and to reorder the sections of a page, as each pattern is contained within a Group block.
- These Group blocks typically have the left and right padding values mapped to the site’s global styles layout settings so that the pattern adapts to the theme.
- A container block (Grid, Columns, Row and Stack, etc.) are nested directly within the top-level block.
- This block is set to the theme’s “wide” width value, allowing for the pattern’s contents to have a max-width, as defined by the theme.
- Two Spacer blocks are placed directly above and below the Container block.
- These Spacer blocks allow you to select and manipulate the space between patterns without having to find the block’s relevant padding controls.
Get more information on how specific blocks work and how to build with them here.
Frequently Asked Questions
How can I hide WordPress.com and core patterns?
If you want to ensure your clients only use the custom patterns you created, here’s a handy tip for disabling WordPress.com patterns and others from the block editor.
Next Steps and Feedback
Interested in learning more about block themes and patterns? The WordPress.org Theme Handbook is the canonical resource for learning about block theme development and has plenty of handy tips.
Be sure to check out our other developer tools and platform features that will provide you with the flexibility and control you need to build on WordPress.com.
If you have any feedback about our Pattern Library (or anything else on WordPress.com), we want to hear it! Contact support here with your thoughts and suggestions.
Last updated: April 11, 2024
