\n\n\n\n\n\n
What Are WordPress Block Patterns?<\/h2>\n
WordPress Block Patterns are predefined block layouts made up of WordPress blocks.<\/a> WordPress users can easily insert them into a post or a page to create a more complex content structure with just a few clicks. <\/p>\n <\/div>\n\n\n\n<\/p> An example is a call to action (CTA) block pattern from the Twenty Twenty<\/strong> theme. It contains the Heading, Paragraph, and Buttons blocks you can customize, from the background color to text size and alignment.<\/p> Regular block patterns and synced patterns enable users to insert a pre-made layout quickly. The main difference between these elements is what happens when you edit them.<\/p> Any changes made to a synced pattern will apply to every blog post or page you’ve inserted it in. Meanwhile, the changes won’t affect previous pages or posts if you use a regular block pattern.<\/p> Let’s say you want to insert a CTA button in your posts. Consider using:<\/p> Additionally, users can register block patterns in the Pattern directory or include them in a plugin or a theme. These pre-made patterns will give you more design options when creating post or page layouts.<\/p> Once you start using block patterns, you’ll start noticing the following benefits.<\/p> Time-efficient<\/strong><\/p> There’s no need to create individual items or custom-code them repeatedly. WordPress users can directly access common pre-designed patterns for various purposes from the editor and apply them to their pages or posts.<\/p> If the default pattern doesn’t suit your taste, visit the Pattern library, or install a plugin or theme that offers multiple choices.<\/p> Professional look<\/strong><\/p> Take advantage of professional designers’ and developers’ skills by copying their patterns from the WordPress Pattern directory. There are hundreds of pre-made patterns you can use and combine without hiring a designer.<\/p> Reusability<\/strong><\/p> Save patterns you regularly use, so you don’t have to recreate them every time. It’s possible to create and reuse the same pattern for different areas of a WordPress website, such as headers, footers, and sidebars. This open-source platform also lets you make categories to find patterns in the future quickly.<\/p> Customization<\/strong><\/p> Using block patterns enable users to tweak the design or content however they like. This helps theme developers provide customizable sections instead of offering a whole demo site and confusing clients on how to redesign it.<\/p> The block editor comes with multiple categories to organize WordPress block patterns. Below are six default pattern categories in WordPress.<\/p> Some patterns may have overlapping categories since they include many elements. For instance, a pricing table is under both the Text and Call to Action patterns because it contains textual information and buttons.<\/p> A header refers to the top section of a site page, which usually displays the website’s logo, title, navigation menus, and search button. This block pattern category has six default options with different purposes and styles.<\/p> \n\n\n Learn how to edit a header in WordPress<\/a> with Site Editor and Customizer.<\/p>\n <\/div>\n\n\n\n<\/p> The Text block pattern can be a great start when you don’t know what to include when organizing content. This pattern already has a structure you can edit according to your needs. <\/p> This pattern typically includes paragraphs, media, and other content types. The Text pattern is useful for creating more visually appealing content on your page. Some examples are a quote and an image in a solid color with a description on the side.<\/p> Calls to Action help WordPress users add attention-grabbing links to their content. You can use this pattern to trigger a specific action from visitors, such as signing up for your service or buying a product.<\/p> The Gallery pattern can be useful for quickly making an engaging portfolio<\/a>. It arranges multiple photos appealingly, so you only need to upload images. If you don’t have any, feel free to browse the WordPress media library to access thousands of free images to complement your content.<\/p> The Posts block pattern lets you display posts based on the parameters you set, such as the latest or most popular ones. These posts can be regular blog posts or WooCommerce products. Generally, this pattern combines a featured image, a title, a date, and an excerpt. A Posts pattern can be a good starting point to structure your dynamic page<\/a> and reuse it for other pages.<\/p> To use block patterns, follow the steps below:<\/p> Besides these several default block patterns, you can find more options by following the steps below.<\/p> Visit the <\/strong>WordPress pattern directory<\/strong><\/a><\/p> This free block library lets users find and share block patterns across the WordPress community. Head to the website and search for patterns – view them based on categories or sort the options by date or popularity.<\/p> Click on the block pattern to see its listing page, preview it on different screen sizes, and copy it.<\/p> Alternatively, directly use it by hovering over the pattern, hitting the Copy <\/strong>button, and pasting it to your post or page.<\/p> Find a WordPress theme that offers block patterns<\/strong><\/p> Many WordPress themes<\/a> include their own block patterns. Typically, these patterns will match the theme’s aesthetic, and it’s possible to access them within the WordPress editor.<\/p> Some of the free WordPress themes<\/a> with custom block styles are:<\/p> Install a Plugin<\/strong><\/p> Besides themes, multiple WordPress plugins<\/a> provide block patterns. Redux<\/strong><\/a> <\/strong>is among the most popular options. This plugin offers 1,000+ new block patterns, which users can access from the Gutenberg editor. It also has demo sites to help them preview each block pattern.<\/p> While copying pre-made layouts from the pattern library or a WordPress plugin is possible, you may want to create your own block patterns to better suit your style. Below are two methods to help you create custom block patterns without coding.<\/p> Using the block editor<\/strong><\/p> WordPress now has native support for creating custom patterns via the block editor. You can do so from the post, page, or site editor.<\/p> Start customizing a block or a group of blocks, and select Create pattern<\/strong> from the block toolbar menu. The pattern creation pop-up will appear where you can name the pattern and assign the block pattern to several categories or new ones. <\/p> You will see the Categories<\/strong> field. When you click it, it will show the existing categories in a drop-down. To create a new category, simply type the new category name in the field, and it will be created once the pattern is saved.<\/p> Create a block pattern via the pattern library<\/strong><\/p> Another way to make a block pattern is by going to the Pattern directory and clicking on the Create New Pattern<\/strong> link.<\/p> \n\n Important!<\/strong> Note that creating block patterns through this method requires you to sign in or create a WordPress.org account.<\/p><\/div>\n\n\n\n<\/p> Once signed in, you should see the WordPress block editor that looks similar to the usual one. Add blocks to make your pattern layout and play around with the customization options. Save the design as a draft if you want to keep it for yourself, or hit the Submit <\/strong>button to share it with the community. <\/p> Simply copy and paste the pattern from <\/strong>the My Patterns <\/strong>page to your website when you want to use it. You can manage all your custom patterns on this page, including those you’ve shared, favored, and drafted.<\/p> Before you share the block pattern, don’t forget to read the pattern directory guide<\/a>, and add a description.<\/p> Besides installing a plugin and visiting the Pattern library, users can make new WordPress block patterns manually and add them to the theme by customizing the functions.php<\/strong> file.<\/p> Create your own patterns on a post or page editor, then switch to the Code Editor<\/strong> mode by selecting the three vertical dots in the upper right corner. Copy all code and paste it into a plain text editor like Notepad.<\/p> Next, head to the WordPress dashboard, click Appearance <\/strong>→ Theme File Editor<\/strong>, and find the functions.php<\/strong> file. <\/p> Copy and paste the following code at the end of the file.<\/p> Specify the pattern title and description placeholders with your own, and replace the text of your See the results by creating a new page and clicking Toggle block inserter<\/strong> → the Patterns <\/strong>tab. Click on the dropdown menu and select Uncategorized<\/strong>. Here you should see your new custom block pattern.<\/p> When managing multiple WordPress websites, you can export and import custom block patterns easily to make them available on all sites. This will save you time as you don’t have to recreate the custom pattern manually on each site.<\/p> To export a custom pattern, open the pattern library in the Site Editor by clicking on the WordPress or website icon at the top left corner and selecting Patterns<\/strong>. Find the pattern to export, click the Actions<\/strong> button (ellipsis icon) below the pattern thumbnail to open the drop-down menu, and select Export as JSON<\/strong>.<\/p> Your browser will then open the download prompt to save the JSON file on your computer.<\/p> Once you have the patterns’ JSON files, you can import them to other WordPress sites.<\/p> Open the pattern library and click the Add New Pattern<\/strong> button on the top right corner of the page. Select Import pattern from JSON,<\/strong> and you will be prompted to choose a JSON file from your local computer. Find the pattern’s JSON file and upload it.<\/p> You can remove or unregister a block pattern you’ve registered by copying and pasting this code on your functions.php<\/strong> file:<\/p> In this example pattern, Free trial CTA<\/strong> is the pattern name we used when registering it. If the process is successful, you won’t see the pattern in the block inserter anymore.<\/p> It’s also possible to remove the WordPress core block patterns by using core as the prefix and mentioning the pattern’s name, such as:<\/p> If you wish to delete all default block patterns, use the following code:<\/p> A block pattern is a pre-designed layout consisting of one or more blocks, helping users create WordPress websites quickly and easily.<\/p> You can find default WordPress block patterns in the block editor and insert them into your page or post. If you want more options, visit the Pattern directory, install a plugin like Redux<\/strong>, or search for WordPress themes offering multiple patterns.<\/p> It’s also possible to make your own WordPress block patterns using the Blockmeister <\/strong>plugin or an editor in the Pattern library. Alternatively, design a new block pattern by inserting code in your functions.php<\/strong> file. Now you understand what a WordPress block pattern is, it’s time to start using it to speed up your website design process<\/a>. Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":" First introduced in WordPress 5.5, block patterns have opened the way for the Gutenberg editor to be a full-scale page […]<\/p>\n![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/A-CTA-block-pattern-example-from-the-Twenty-Twenty-theme-in-the-block-editor-showing-a-headline-paragraph-a-button-with-red-border.png\/public\")
<\/a><\/figure><\/div>Block patterns vs synced patterns<\/h2>
\n
Why use WordPress block patterns<\/h2>
WordPress block pattern categories<\/h2>
Headers<\/h3>
Suggested Reading<\/h4>\n
Text<\/h3>
Call to action<\/h3>
Gallery<\/h3>
Posts<\/h3>
How to use WordPress block patterns<\/h2>
\n
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-site-editor-block-pattern-list.png\/public\")
<\/a><\/figure><\/div>\n
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-site-editor-explore-all-block-patterns.png\/public\")
<\/a><\/figure><\/div>\n
How to find more block patterns for a WordPress site<\/h3>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/A-Copy-button-over-a-block-pattern-on-the-official-WordPress-Patterns-Directory-website.png\/public\")
<\/a><\/figure><\/div>\n
How to create custom WordPress block patterns<\/h3>
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/pattern-creation.png\/public\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-Create-New-Pattern-link-at-the-top-of-the-WordPress-Pattern-library.png\/public\")
<\/a><\/figure><\/div>![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-Save-draft-and-Submit-buttons-at-upper-right-corner-of-the-Pattern-depository_s-block-editor-1.png\/public\")
<\/a><\/figure>![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-My-Patterns-page-on-the-Pattern-library.png\/public\")
<\/a><\/figure>How to manually create block patterns<\/h3>
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor.png\/public\")
<\/a><\/figure><\/div>function function_name() {\n register_block_pattern(\n 'slug',\n array(\n 'title' => __( 'your pattern title', 'text-domain' ),\n 'description' => _x( 'your pattern description', 'Block pattern description', 'text-domain' ),\n 'content' => ‘your block content code’,\n )\n);\n}\nadd_action( 'init', 'function_name' );<\/pre>block content code <\/code>with the code from Notepad. Ensure you leave the single quotes surrounding the text in place. Finally, click the Update File<\/strong> button to save changes.<\/p>![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-Update-File-button-in-the-functions.php-file-and-a-block-of-code-for-creating-a-custom-pattern.png\/public\")
<\/a><\/figure>![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/The-Free-trial-CTA-block-pattern-under-the-Uncategorized-menu-the-final-result-of-creating-a-custom-pattern-manually.png\/public\")
<\/a><\/figure>How to export and import block patterns<\/h3>
![\"The](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/export-json.png\/public\")
<\/a><\/figure><\/div>![\"Import](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/07\/1.png\/public\")
<\/a><\/figure><\/div>How to remove a block pattern from WordPress<\/h3>
function unregister_my_patterns() {\n unregister_block_pattern('your pattern title');\n}\n\nadd_action( 'init', 'unregister_my_patterns' );<\/pre>![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/12\/A-code-example-for-a-removing-registered-custom-pattern.png\/public\")
<\/a><\/figure>unregister_block_pattern( 'core\/Pricing table' );<\/pre>
remove_theme_support( 'core-block-patterns' );<\/pre>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\")
<\/a><\/figure>Conclusion<\/h2>