Block patterns are pre-designed layouts you can add to your site in a few clicks. This guide will show you how to add block patterns to your site and customize them with your own content.
To browse and add block patterns to your site, follow these steps:
- Visit your site’s dashboard.
- Go to Pages or Posts and select a page or post to edit, or open the Site Editor at Appearance → Editor.
- In the editing screen, click the Block inserter (+) in the top-left corner.
- Click the Patterns tab.
- Browse the available patterns. You can view collections by category, such as Starter content, Contact, Gallery, and Blog Posts.
- To see all patterns in a larger window, click the “Explore all patterns” button at the bottom of the section.
- Click any pattern to add it to your page at your cursor’s location.
Once you add a block pattern to your site, it becomes part of your content. Any future updates or removals of patterns from the library will not affect patterns already added to your pages or posts.
📌
Images in block patterns and starter content are free to use, but they’re hosted externally and aren’t saved to your media library. They could change or be removed in the future. For best results, replace them with your own images.
To preview patterns at different screen sizes and check their responsiveness, use the WordPress.com Pattern Library. You can browse, search, and preview patterns, then copy and paste them into the block editor:
- Visit the Pattern Library.
- Use the category navigation or search by feature or keyword to find patterns.
- When you find a pattern you want to use, click the “Copy pattern” button.
- If you are not logged in, you can copy only the first three patterns in each category. To copy more, click “Get access” and log in or create a free WordPress.com account.
- Go to the editor for a post, page, or template on your WordPress.com site. Paste the pattern using Command + V (Mac) or CTRL + V (Windows), or right-click and select Paste.
- Edit the content (such as images, text, or links) as needed. Styles set in the Site Editor will automatically apply to the pasted pattern.
Once you add a block pattern, you can customize it in two ways: edit the content while keeping the layout intact, or edit the layout itself to rearrange, add, or remove blocks.
When you add a block pattern to a page or post, the pattern opens in content-only editing mode. You can change the text, images, and links inside the pattern without accidentally breaking its layout.
In content-only editing mode, the editor filters what you see and interact with:
- List view shows only the content blocks inside the pattern—headings, paragraphs, images, and buttons. The structural blocks that control the layout (columns, groups, and rows) are hidden until you edit the pattern.
- The block sidebar shows a Content tab with editable fields for the selected block, a List View option for adding or removing specific items within a pattern, and a Styles tab for appearance options.
- The block toolbar includes an “Edit pattern” button to switch to full structural editing and a “Shuffle” button to try different style variations.
Click any visible content block to edit it directly—select a heading to change the text, click an image to replace it, or update a link with a new URL.
Some blocks inside a pattern contain repeatable items, like the Buttons block, Links block, and Social Icons block. You can add or remove individual items without leaving content-only editing mode.
To edit any of these specific blocks while in content-only mode, follow these steps:
- Click the pattern in the editor.
- Open the block settings sidebar.
- Click the List view icon in the block settings sidebar.
- Click the + Block inserter icon to add another of the same block type (e.g., an individual button, social icon, or link).
- Click the three-dot menu (⋮) to the right of any block to select from the following options:
- Move up/down: Move the specific item within the block up or down.
- Duplicate: Make an exact copy of the specific item.
- Add before/after: Add a new button, link, or social icon before or after the existing one.
- Add note: Add a block note to the item.
- Delete: Remove the item from the parent block.
By default, a block pattern’s layout is locked in content-only editing mode. You cannot add or remove blocks, change the layout, or customize the design until you enter full editing mode.
To edit the layout of a block pattern, follow these steps:
- Click the pattern in the editor.
- Click the “Edit pattern” button in the block toolbar or the block settings sidebar.
- Make your structural changes—you can move, remove, or add blocks.
- To return to content-only editing mode, click the “Exit pattern” button in the block settings sidebar or the block toolbar.
Patterns you have created also appear in the Patterns section of the block inserter. To add a pattern you created, follow these steps:
- Visit your dashboard.
- Go to Pages or Posts and select a page or post to edit, or open the Site Editor at Appearance → Editor.
- In the editing screen, click the Block inserter (+) in the top-left corner.
- Click the Patterns tab.
- Select the “My patterns” category.
- Click a pattern once to add it to your content, or drag it to where you want it to appear.
Learn how to edit and manage your own patterns.
