{"id":9995,"date":"2021-03-30T17:01:10","date_gmt":"2021-03-30T17:01:10","guid":{"rendered":"https:\/\/wordpress.org\/news\/?p=9995"},"modified":"2022-04-27T21:07:03","modified_gmt":"2022-04-27T21:07:03","slug":"so-you-want-to-make-block-patterns","status":"publish","type":"post","link":"https:\/\/wordpress.org\/news\/2021\/03\/so-you-want-to-make-block-patterns\/","title":{"rendered":"So you want to make block patterns?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

If you’ve ever built something for the WordPress block editor \u2014 a theme or a plugin \u2014 you may have also heard about block patterns<\/strong>. <\/p>\n\n\n\n

Looking at the patterns that come bundled with WordPress, I thought it would be nice to dedicate to them a short post. They’re pretty nice, useful shortcuts when you know them, but there’s a good chance you may not know what they are or why you might want to use them.<\/p>\n\n\n\n

What’s a block pattern?<\/h2>\n\n\n\n

Patterns are collections of pre-arranged blocks<\/strong> that can be combined and arranged in many ways making it easier to create beautiful content. They act as a head-start, leaving you to plug and play with your content as you see fit and be as simple as single blocks or as complex as a full-page layout.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

They live in a tab in the block library. You can click or drag and you’re able to preview them with your site’s styles.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Basically, a block pattern is just a bunch of blocks put together in advance:<\/p>\n\n\n\n

<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:separator {\"className\":\"is-style-default\"} -->\n<hr class=\"wp-block-separator is-style-default\"\/>\n<!-- \/wp:separator -->\n<!-- wp:image {\"align\":\"center\",\"id\":553,\"width\":150,\"height\":150,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https:\/\/blockpatterndesigns.mystagingwebsite.com\/wp-content\/uploads\/2021\/02\/StockSnap_HQR8BJFZID-1.jpg\" alt=\"\" class=\"wp-image-553\" width=\"150\" height=\"150\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n<!-- wp:quote {\"align\":\"center\",\"className\":\"is-style-large\"} -->\n<blockquote class=\"wp-block-quote has-text-align-center is-style-large\"><p>\"Contributing makes me feel like I'm being useful to the planet.\"<\/p><cite>\u2014 Anna Wong, <em>Volunteer<\/em><\/cite><\/blockquote>\n<!-- \/wp:quote -->\n<!-- wp:separator {\"className\":\"is-style-default\"} -->\n<hr class=\"wp-block-separator is-style-default\"\/>\n<!-- \/wp:separator --><\/div><\/div>\n<!-- \/wp:group --><\/code><\/pre>\n\n\n\n
That’s also how you create them: just use the block editor to configure a smattering of blocks to your liking, and the hard part’s over.<\/p>\n\n\n\n
How do I get them in the block library?<\/h2>\n\n\n\n
There’s more documentation in the handbook<\/a>, but what it boils down to is this:<\/p>\n\n\n\n
<?php \n\/*\nPlugin Name: Quote Pattern Example Plugin\n*\/\n\nregister_block_pattern(\n\t'my-plugin\/my-quote-pattern',\n\tarray(\n\t\t'title'       => __( 'Quote with Avatar', 'my-plugin' ),\n\t\t'categories'  => array( 'text' ),\n\t\t'description' => _x( 'A big quote with an avatar\".', 'Block pattern description', 'my-plugin' ),\n\t\t'content'     => '<!-- wp:group --><div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:separator {\"className\":\"is-style-default\"} --><hr class=\"wp-block-separator is-style-default\"\/><!-- \/wp:separator --><!-- wp:image {\"align\":\"center\",\"id\":553,\"width\":150,\"height\":150,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --><div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https:\/\/blockpatterndesigns.mystagingwebsite.com\/wp-content\/uploads\/2021\/02\/StockSnap_HQR8BJFZID-1.jpg\" alt=\"\" class=\"wp-image-553\" width=\"150\" height=\"150\"\/><\/figure><\/div><!-- \/wp:image --><!-- wp:quote {\"align\":\"center\",\"className\":\"is-style-large\"} --><blockquote class=\"wp-block-quote has-text-align-center is-style-large\"><p>\"Contributing makes me feel like I\\'m being useful to the planet.\"<\/p><cite>\u2014 Anna Wong, <em>Volunteer<\/em><\/cite><\/blockquote><!-- \/wp:quote --><!-- wp:separator {\"className\":\"is-style-default\"} --><hr class=\"wp-block-separator is-style-default\"\/><!-- \/wp:separator --><\/div><\/div><!-- \/wp:group -->',\n\t)\n);\n\n?><\/code><\/pre>\n\n\n\n
\ud83d\udc46 That’s a snippet of PHP, which means you can drop it in a WordPress plugin, or perhaps more simply, paste it into the functions.php<\/strong> file from your theme. Done:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme<\/a> (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.<\/p>\n\n\n\n
Now what?<\/h2>\n\n\n\n
The thing about a block pattern is, as soon as you insert it from the block library, it stops being a cohesive unit<\/em> \u2014 now it’s just a smattering of blocks, detached from the pattern you created and meant to be customized to your liking. It’s a shortcut<\/em>, not a template<\/em>. That also means you don’t have to worry about switching themes or deactivating pattern plugins: the blocks you already inserted won’t go anywhere.<\/p>\n\n\n\n
That being said, if you like this one pattern so much you want to use it again and again, with no customization at all, you can make it into a reusable block<\/a>:<\/p>\n\n\n\n
What makes a good block pattern?<\/h2>\n\n\n\n
Patterns, as they ship today, are limited by the features available. If the block editor doesn’t allow you to customize letter-spacing, your block pattern can’t either. While the Global Styles project will expand what’s to blocks, in the meantime, we have to work with the available tools.<\/p>\n\n\n\n
Even then, with the most basic ingredients \u2014 color, photography, typography \u2014 it is possible to do a lot:<\/p>\n\n\n\n
\"\"
Three columns with images and text
<\/figcaption><\/figure>\n\n\n\n
\"\"
Media and text with image on the right<\/figcaption><\/figure>\n\n\n\n
I designed these patterns to potentially land in WordPress core, which all have a few properties in common:<\/p>\n\n\n\n
They share a theme.<\/strong><\/h3>\n\n\n\n
You can think of a pattern as a section of a website: it is meant to be part of a whole, and so it works best when it can exist in the context of other patterns that share the same theme. There are a few sharing a Nature theme in the patterns above, a few sharing an Art theme, and others sharing an Architecture theme. When seen together, it becomes easier to see how you might be able to piece together multiple pages of your site, one page at a time.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
They share a minimalist color palette.<\/strong><\/h3>\n\n\n\n
By being parts of a whole, patterns will inevitably land in a context that uses different colors. With a reduced color palette, there’s both a better chance of fitting in and less to customize to make it just right.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
The best patterns do things you might have not done otherwise<\/strong>.<\/strong><\/h3>\n\n\n\n
Whether that’s images offset to create a unique silhouette, or just using less visible features (like fixed positioning in the Cover block), it’s a way to surface creativity.<\/p>\n\n\n\n
Tip: You can use any block in your patterns, including blocks that came from a plugin. And if that block is in the block directory, it will prompt you to install it with one click if it’s missing from your self-hosted WordPress:<\/em><\/p><\/blockquote>\n\n\n\n