- \n
- What are WordPress block patterns<\/a><\/li>\n\n\n\n
- How to use block patterns<\/a><\/li>\n\n\n\n
- How to find more block patterns<\/a><\/li>\n\n\n\n
- How to create your own block patterns<\/a><\/li>\n<\/ul>\n\n\n\n\t\t
<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\t#WordPress Block Patterns \ud83d\udcd0 what they are and how to use them \ud83d\udd79\ufe0f\ud83d\udd79\ufe0f<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n<\/div>\n\n\n\nWhat are WordPress block patterns? \ud83e\udd37\u200d\u2642\ufe0f<\/h2>\n\n\n\n
The WordPress Block Editor<\/a> enables you to create posts and pages using pre-built elements called blocks. In turn, the Site Editor<\/a> (formerly known as full-site editing) lets you use blocks to create template parts like headers and footers.<\/p>\n\n\n\n
However, you might be in a hurry to create your layouts. In addition, if you lack design skills, it can still be difficult to achieve a professional-looking design by yourself.<\/p>\n\n\n\n
In these scenarios, you can use block patterns to simplify your work. By default, WordPress comes with a collection of pre-made layouts that are accessible through the Block Editor (or the Site Editor):<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/access-patterns-fse.png\")
<\/figure><\/div>\n\n\nHere, you’ll find patterns such as calls-to-action<\/a> and header layouts, which you can easily customize using the block settings.<\/p>\n\n\n\n
Many themes provide their own block patterns, so you may have access to additional options. You can also find more block patterns through WordPress.org, and even create your own designs.<\/p>\n\n\n\n
Block patterns come in two types:<\/p>\n\n\n\n
- \n
- Synced patterns<\/strong> (formerly reusable blocks) – these are patterns that are the same in each post. If you edit the synced pattern in one spot, that change will automatically apply to every piece of content where you’ve included it. You can also think of them as “global” patterns, which is the terminology that some other plugins use.<\/li>\n\n\n\n
- Unsynced patterns<\/strong> – these are patterns that you want to be unique in each post. If you edit an unsynced pattern, it doesn’t have any effect on other places where you’ve used it.<\/li>\n<\/ul>\n\n\n\n
Again, synced patterns used to be known<\/em> as reusable blocks<\/a>. However, WordPress has now ditched the separate terminology and only calls them synced and unsynced patterns.<\/p>\n\n\n
<\/div>\n\n\n\nHow to use block patterns \ud83e\uddd1\u200d\ud83d\udcbb<\/h2>\n\n\n\n
As we mentioned earlier, WordPress provides access to a collection of block patterns that you can access through the editor. Your WordPress theme may also offer its own designs.<\/p>\n\n\n\n
It’s important to note that you can use block patterns with both classic themes and block themes<\/a>.<\/p>\n\n\n\n
Whatever theme you’re using, in order to access block patterns, open the page or post where you want to create a new layout. Then click on the Toggle Block Inserter<\/em><\/strong> button in the top-left corner of the screen, and switch to Patterns<\/em><\/strong>.<\/p>\n\n\n\n
There you can view all available patterns, which are organized into different categories. For instance, if you want to display lots of images, you might want to use a gallery block pattern:<\/p>\n\n\n
\n![\"Gallery](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/gallery-patterns.png\")
<\/figure><\/div>\n\n\nMeanwhile, you can insert pre-made headers or create an attention-grabbing featured section. Alternatively, click on Explore all patterns<\/em><\/strong> to see large previews of the designs:<\/p>\n\n\n
\n![\"Explore](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/explore-all-patterns.png\")
<\/figure><\/div>\n\n\nOnce you find a pattern you like, all you have to do is click on the design to add it to your layout. Then you can customize the pattern using the block settings.<\/p>\n\n\n\n
How to customize block patterns<\/h3>\n\n\n\n
When you insert a block pattern, it is made up of multiple individual blocks. So if you want to make changes, simply click on any block within the layout to customize its content.<\/p>\n\n\n\n
If you’re familiar with editing WordPress blocks<\/a>, the process is much the same. For example, if a header pattern contains a cover block, you can use the block settings to apply a background image<\/a> or change the cover color:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/customize-block-patterns.png\")
<\/figure><\/div>\n\n\nIf the block settings don’t immediately open when you add the pattern to your page, just click on the Settings<\/em><\/strong> icon in the top-right corner.<\/p>\n\n\n\n
You can also delete a block from the pattern. Make sure you select only the relevant block, then click on the three-dots icon in the toolbar and select Remove (block)<\/em><\/strong>:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/remove-block-scaled.jpg\")
<\/figure><\/div>\n\n\nIf you want to remove the entire block pattern, make sure you’ve highlighted the whole thing. Then select Remove Group<\/strong>.<\/em> <\/p>\n\n\n
<\/div>\n\n\n\nHow to find more block patterns \ud83d\udd0e<\/h2>\n\n\n\n
While you can access default block patterns (and any provided by your theme) through the editor, you might require more options. If so, you can find additional choices in the WordPress.org Pattern Directory:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/pattern-directory.png\")
<\/figure><\/div>\n\n\nThere, you can view a huge library of extra designs to add to your layout. Again, the patterns are organized into categories, which you can switch between using tabs.<\/p>\n\n\n\n
You can also search for specific templates or filter the results. If you change the Curated<\/em><\/strong> drop-down menu to “Community”, you’re able to browse patterns that have been submitted by members of the broader WordPress community.<\/p>\n\n\n\n
When you find a block pattern that you want to use on your site, hover over the design and click on Copy<\/em><\/strong>:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/copy-block.png\")
<\/figure><\/div>\n\n\nThen return to your WordPress site and open the post or page where you want to include the design. Right-click within the editor, and select Paste<\/em><\/strong>.<\/p>\n\n\n
<\/div>\n\n\n\nHow to create your own block patterns (two options) \ud83d\uddb1\ufe0f<\/h2>\n\n\n\n
In the section above, we showed you how to find block patterns that have been submitted by other WordPress users. You can also create your own block patterns, either for your use or to share with the community (or both!).<\/p>\n\n\n\n
Creating block patterns on your site using the Block Editor or Site Editor<\/h3>\n\n\n\n
The easiest way to create a block pattern is via the Block Editor or the Site Editor.<\/p>\n\n\n\n
The basic process is the same via either editor. We’ll show you how it works in the Site Editor, but you can follow the exact same steps in the regular Block Editor (which also lets you create block patterns in themes that don’t support the Site Editor).<\/p>\n\n\n\n
To get started, open your preferred editor and build your custom layout using blocks. Once you’re happy with the design…<\/p>\n\n\n\n
- \n
- Select all of the blocks that you want to include in the pattern. It could be a single block or multiple ones.<\/li>\n\n\n\n
- Click on the three-dots icon in the toolbar.<\/li>\n\n\n\n
- Select Create pattern\/reusable block<\/em><\/strong>:<\/li>\n<\/ol>\n\n\n\n
![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/create-pattern.png\")
<\/figure><\/div>\n\n\nNow, give your pattern a name and determine whether it will be a synced pattern or not:<\/p>\n\n\n
\n![\"Sync](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/pattern-sync.png\")
<\/figure><\/div>\n\n\nAgain, synced patterns used to be known as reusable blocks. This means that each time you edit the pattern, the changes will be applied to every post or page where you’ve added it.<\/p>\n\n\n\n
However, if you choose not to sync, you’ll create a standard WordPress block pattern. Changes you make will only apply to the specific pattern you’re editing, and won’t affect any other instances on your website.<\/p>\n\n\n\n
Next, click on Create<\/strong><\/em>. If you want to insert or edit a pattern, you’ll find it under My Patterns<\/em><\/strong> in the Patterns<\/em><\/strong> section in the Site Editor, or the pattern inserter in the Block Editor.<\/p>\n\n\n
\n![\"Manage](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/manage-patterns.png\")
<\/figure><\/div>\n\n\nHere, you can preview patterns and check the syncing status. You can also launch the pattern editor to start working on your designs, just as described above.<\/p>\n\n\n
<\/div>\n\n\n\nCreating and sharing block patterns via the Pattern Directory<\/h3>\n\n\n\n
To build a pattern to share with other WordPress users, first visit the WordPress Pattern Directory<\/a>. Make sure you’re logged into WordPress, otherwise you won’t be able to save your pattern. If you don’t have an account, you’ll need to create one at this stage.<\/p>\n\n\n\n
Then, click on Create a new pattern<\/em><\/strong>:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/pattern-directory-scaled.jpg\")
<\/figure><\/div>\n\n\nThis will lead you to the Block Pattern Editor. All you have to do is use the available blocks to create your pattern.<\/p>\n\n\n\n
Alongside blocks, you can access royalty-free images when you use a media block such as a cover or a gallery:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/pattern-media.png\")
<\/figure><\/div>\n\n\nOnce you’ve completed your design, you can either save the pattern as a draft or submit it to the Pattern Directory. It’s a good idea to read through the Pattern Directory guidelines<\/a> before you submit your creation.<\/p>\n\n\n\n
If you’re saving the design as a draft, first switch to the pattern settings to give it a title, description, and category:<\/p>\n\n\n
\n![\"How](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/save-pattern.png\")
<\/figure><\/div>\n\n\nAfter you’ve created at least one block pattern, you can manage your designs through the My Patterns<\/em><\/strong> link:<\/p>\n\n\n
\n![\"Manage](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/my-patterns.png\")
<\/figure><\/div>\n\n\nHere, you can view all the layouts that you’ve shared or marked as favorites. Plus, you can access your draft patterns.<\/p>\n\n\n\n
If you only want to create patterns to use on your own website, you can leave them as drafts. Then copy and paste the pattern into your WordPress post or page, just as we did in the section above.<\/p>\n\n\n
<\/div>\n\n\n\nHow to create and register block patterns manually<\/h2>\n\n\n
- Unsynced patterns<\/strong> – these are patterns that you want to be unique in each post. If you edit an unsynced pattern, it doesn’t have any effect on other places where you’ve used it.<\/li>\n<\/ul>\n\n\n\n
- How to use block patterns<\/a><\/li>\n\n\n\n