In this guide, you\u2019ll learn what WordPress Block Patterns are and how to create them.
You\u2019ll also learn:<\/p>\n\n\n\n
What are Block Patterns in WordPress?<\/a><\/p>\n\n\n\n Creating WordPress Block Patterns<\/a><\/p>\n\n\n\n Registering your Block Pattern<\/a><\/p>\n\n\n\n Future plans for Block Patterns<\/a><\/p>\n\n\n\n Final thoughts: How to create and register WordPress Block Patterns<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n WordPress Block Patterns<\/strong> are a collection of predefined reusable and customisable blocks that you can insert into pages and posts. You can combine different blocks to create a custom block pattern that you can then use to craft professional-looking page layouts.<\/p>\n\n\n\n Block Patterns<\/strong> are composed of reusable blocks but are a bit different from them:<\/p>\n\n\n\n Ever since WordPress Block Patterns were introduced in WordPress 5.5<\/a>, they\u2019ve been a game-changer to the future of Full Site Editing.<\/p>\n\n\n\n Before Block Patterns were added, users had to create and edit blocks from scratch when they wanted to edit their site.<\/p>\n\n\n\n With Block Patterns, you can simply browse the predefined block layouts available in the Pattern Directory<\/a>, and copy and paste those patterns. You save time by creating your own, making it easier and faster to build pages, posts, and entire websites.<\/p>\n\n\n\n With WordPress 5.9<\/a>, you could only choose from patterns shared by official contributors. But WordPress 6.0<\/a> introduced major pattern features<\/a> such as user creation and pattern submission using the Pattern Creator<\/a>, along with pattern registration from the Pattern Directory using theme.json.<\/p>\n\n\n\n The WordPress Editor comes with several core Block Patterns. But if you want to create your own, you\u2019ll need basic knowledge of WordPress Site Editing (formerly Full Site Editing) and block themes.<\/p>\n\n\n\n Here\u2019s a step-by-step tutorial for creating your own block patterns:<\/p>\n\n\n\n Design a new page or new post using blocks. <\/p>\n\n\n\n You can create one from scratch or import an existing pattern from the WordPress pattern library and customise the design to your liking.<\/p>\n\n\n\n Once you\u2019re happy with the design, select the blocks you want to include in your pattern.<\/p>\n\n\n\n Click the three vertical dots on the block toolbar and click Copy<\/strong>. You should see a notification at the bottom left side of the page that says \u2018Copied X blocks to the clipboard\u2019.<\/em><\/p>\n\n\n\n Click the three vertical dots at the top right corner of the page and select Code editor<\/strong>. Copy the code that appears on the screen.<\/p>\n\n\n\n For this example, we used the JSON formatter tool<\/a> and pasted the code on the left side of the screen. Click Escape<\/strong> to see the amended code.<\/p>\n\n\n\n Go to the WordPress dashboard<\/strong><\/a> > Appearance > Theme File Editor<\/strong>. Click Theme Functions<\/strong> (or the functions.php file).<\/p>\n\n\n\n Scroll to the end and paste this code from Rich Tabor<\/a>:<\/p>\n\n\n\n Take note of the two function names. Specify a function name and ensure that both match.<\/p>\n\n\n\n Don’t forget to add a title and description between the relevant inverted commas.<\/p>\n\n\n\n Lastly, paste the code from step three in between the inverted commas in the content section.<\/p>\n\n\n\n When you\u2019re done, click Update file<\/strong>.<\/p>\n\n\n\n Create a new WordPress page to test your Block Pattern.<\/p>\n\n\n\n Click the Toggle block inserter (the blue +<\/strong> button at the top left corner of the page). Switch from the Blocks tab to the Patterns <\/strong>tab.<\/p>\n\n\n\n Click the drop-down menu. <\/p>\n\n\n\n Select the new addition in the menu called Uncategorized<\/strong>. It should show you your new custom WordPress Block Pattern.<\/p>\n\n\n\n Once you\u2019ve created your WordPress Block Pattern, you can register it to the Pattern Directory<\/a> to share with other WordPress.org users.<\/p>\n\n\n\n Use the register_block_pattern<\/strong> helper function. You\u2019ll need to input two pieces of information:<\/p>\n\n\n\nWhat are Block Patterns in WordPress?<\/h2>\n\n\n\n
\n
Creating WordPress Block Patterns<\/h2>\n\n\n\n
\n
1. Create a new page in the Gutenberg editor<\/h3>\n\n\n\n
2. Select all the blocks you want to include in your pattern<\/h3>\n\n\n\n
![\"Start](\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/07\/Copy-blocks-WordPress.png.webp\")
<\/figure>\n\n\n\n![\"Copy](\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/07\/Copying-the-code.png.webp\")
<\/figure>\n\n\n\n3. Paste the code in a JSON formatter<\/h3>\n\n\n\n
![\"Paste](\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/07\/JSON-code-formatter.png.webp\")
<\/figure>\n\n\n\n4. Go to the WordPress Theme Editor<\/h3>\n\n\n\n
![\"Paste](\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/07\/WordPress-Theme-Editor.png.webp\")
<\/figure>\n\n\n\nfunction function_name() {\nregister_block_pattern(\n'slug',\narray(\n'title' => __( 'Your Title', 'text-domain' ),\n'description' => _x( 'Your Description.', 'Block pattern description', 'text-domain' ),\n'content' => \" paste code here \",\n)\n);\n}\nadd_action( 'init', 'function_name' );<\/code><\/pre>\n\n\n\n5. Test your new Block Pattern<\/h3>\n\n\n\n
![\"Test](\"https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/07\/Testing-block-pattern.png.webp\")
<\/figure>\n\n\n\nRegistering your WordPress Block Pattern<\/h2>\n\n\n\n
\n