So you want to make block patterns?

If you’ve ever built something for the WordPress block editor — a theme or a plugin — you may have also heard about block patterns.

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.

What’s a block pattern?

Patterns are collections of pre-arranged blocks 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.

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.

Basically, a block pattern is just a bunch of blocks put together in advance:

	<!-- 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>— 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 -->

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.

How do I get them in the block library?

There’s more documentation in the handbook, but what it boils down to is this:

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'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>— 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 -->',
	)
);

?>

👆 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 file from your theme. Done:

For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.

Now what?

The thing about a block pattern is, as soon as you insert it from the block library, it stops being a cohesive unit — 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, not a template. 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.

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:

Reusable blocks are created, as the name implies, to be reused. The feature is a great way to store small bits of commonly used snippets that you can edit in one place to update in all. “Follow me on Twitter,” “Article series, or “Subscribe to my podcast” are great examples of that.

What makes a good block pattern?

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.

Even then, with the most basic ingredients — color, photography, typography — it is possible to do a lot:

Three columns with images and text
Media and text with image on the right

I designed these patterns to potentially land in WordPress core, which all have a few properties in common:

They share a theme.

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.

They share a minimalist color palette.

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.

The best patterns do things you might have not done otherwise.

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.

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:

Here’s a plugin for you

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'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>— 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 -->',
	)
);

?>

In case you want to make patterns, this example plugin features two of the patterns you saw above. Drop it in your plugins folder and they should show up in your block library.

Installed pattern under “Text” Category

Feel free to tweak it, customize it, and make it yours. It’s GPL, after all!


Thank you @joen for the help writing this post.

WordPress 5.7 Release Candidate 2

The second release candidate for WordPress 5.7 is now available! 🎉

You can test the WordPress 5.7 release candidate in two ways:

Thank you to all of the contributors who tested the Beta/RC releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.7 and update the Tested up to version in the readme file to 5.7. If you find compatibility problems, please be sure to post to the support forums, so those can be figured out before the final release.

The WordPress 5.7 Field Guide will give you a more detailed dive into the major changes.

How to Help

Do you speak a language other than English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

Props to @lukecarbis for the haiku and @audrasjb and @hellofromtonya for peer reviewing!


Five-seven next week
So test your plugins and themes
Update your readme

Did You Know About Reusable Blocks?

Created by Joen Asmussen, @joen

The WordPress block editor (a.k.a. Gutenberg) comes with a feature called “reusable blocks.” They are blocks, saved for later, edited in one place.

Have you ever wanted to:

  • Re-use the same snippet of text across posts and pages?
  • Save complex layouts to spare you having to copy/paste from one post to another?

Reusable blocks can do these things.

Like templates, you mean?

Not quite. Think of reusable blocks as snippets of globally synchronized content that are personal to you. You can edit all your reusable blocks in one place, and any post or page you inserted that block into, get the updated version as well. 

Where you might use templates to structure your website, you can use reusable blocks to structure your content. For example:

  • A testimonial on your homepage and your product page.
  • A “this post is part of a series” box that you insert part-way through your article.
  • A “Follow me on social media” section you can weave into the prose of your popular article.
  • Complex but static blocks, such as a “Subscribe to my newsletter” box, a contact form, a survey, quiz, or polls.

Key properties are that reusable blocks are unbeatable when you want to reuse a snippet of content, edit it in one place, and have the changes propagate to every instance.

Show me how

To create a reusable block, open the block editor and create the content you want to reuse:

Now select the content you want to turn into a reusable block, then click the three-dot “More” menu and choose “Add to Reusable blocks.”

Voilà, you’ve now created a reusable block. From now on, you can find this block, and any other you create, in the “Reusable blocks” tab in the block library:

This is also where you can insert the newly created block on any of your posts or pages.

Where do I edit my existing reusable blocks?

To edit a reusable block, select it and make your edits. When you make an edit, the Publish button will have a little dot indicator:

This dot indicates you’ve made a global change that potentially affects posts beyond just the one you’re editing, the same as when you’re editing templates. This lets you confirm the change was intentional.

Another way to edit your reusable blocks is to click the global three-dot “More” menu and selecting “Manage all reusable blocks”:

This takes you to a section letting you edit, rename, export, or delete every reusable block you created. 

What else can I do?

Here are a couple of tips and tricks you can leverage to get the most out of reusable blocks.

Give them a good name

When you name a reusable block, you are essentially choosing your search terms, as the name is what you search for in the block library (or when you use the “slash command,” typing / in an empty paragraph):

Avoid names such as “Gallery” or “Image,” as that’ll be annoying when you just want to insert one of those. You can avoid that with a unique name, such as “My author biography.”

Insert in the best place of your content flow

One obvious benefit of reusable blocks is that they are just blocks, just like everything else in the block editor. That means you can insert it anywhere in your content. You might want your rich author biography to sit at the top or bottom of the post, but This post is part of a series box that might sit well two or three paragraphs not to disrupt the reading flow.

A design shortcut

Maybe you created a complex layout you’re happy with, a call to action with the right image and buttons, and it took a while to get it just right. Go on and save it as a reusable block: even if you mean to insert it only to convert it to a regular block, it might still save you a minute. 

To convert a reusable block to regular (blocks, select it and click the “Convert to regular blocks”:

Design by Beatriz Fialho.

Tip: You can also find some nice patterns on Gutenberg Hub or ShareABlock.

Take it with you

Need to move to another site? You can both export and import reusable blocks. Go to the Manage all reusable blocks section from the global three-dot “More” menu, hover over the block you want to export, and click “Export as JSON”:

The downloaded file can be imported on any WordPress 5.0 or newer website.

Try it

Create a draft post and play around with Reusable Blocks to see how you might start using them. You can always delete them when you’re done playing.

You can test importing and using a small reusable block I created as an example. It’s a “Further reading” block that shows the four latest posts from the category “Featured”:

It might work well as a highlight in an article, giving the reader something new to read or awareness of your other content.

The videos in this post show the reusable blocks flow in the upcoming WordPress 5.7.

Download the block from this gist, import it to your WordPress site, then customize to make it yours.

WordPress 5.5 Beta 3

WordPress 5.5 Beta 3 is now available!

This software is still in development,so it’s not recommended to run this version on a production site. Consider setting up a test site to play with the new version.

You can test WordPress 5.5 Beta 3 in two ways:

WordPress 5.5 is slated for release on August 11th, 2020, and we need your help to get there!

Thank you to all of the contributors who tested the beta 2 development release and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

Some highlights

Since beta 2, 43 bugs have been fixed. Here are a few changes in beta 2:

  • Plugin and theme versions are now shared in the emails when automatically updated (see #50350).
  • REST API routes without a permission_callback now trigger a _doing_it_wrong() warning (see #50075).
  • Over 23 Gutenberg changes and updates (see #24068 and #50712).
  • A bug with the new import and export database Dashicons has been fixed (see #49913).

Developer notes

WordPress 5.5 has lots of refinements to polish the developer experience. To keep up, subscribe to the Make WordPress Core blog and pay special attention to the developers’ notes for updates on those and other changes that could affect your products.

How to Help

Do you speak a language other than English? Help translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you!

If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

WordPress 5.5 Beta 2


WordPress 5.5 Beta 2 is now available!

This software is still in development, so it’s not recommended to run this version on a production site. Consider setting up a test site to play with the new version.

You can test WordPress 5.5 beta 2 in two ways:

WordPress 5.5 is slated for release on August 11th, 2020, and we need your help to get there!

Thank you to all of the contributors that tested the beta 1 development release and provided feedback. Testing for bugs is an important part of polishing each release and a great way to contribute to WordPress. Here are some of the changes since beta 1 to pay close attention to while testing.

Some highlights

Since beta 1, 48 bugs have been fixed. Here is a summary of a few changes included in beta 2:

  • 19 additional bugs have been fixed in the block editor (see #23903 and #23905).
  • The Dashicons icon font has been updated (see #49913).
  • Broken widgets stemming from changes in Beta 1 have been fixed (see #50609).
  • Query handling when counting revisions has been improved (see #34560).
  • An alternate, expanded view was added for wp_list_table (see #49715).
  • Some adjustments were made to the handling of default terms for custom taxonomies (see #43517)

Several updates have been made to the block editor. For details, see #23903 and #23905.

Developer notes

WordPress 5.5 has lots of refinements to polish the developer experience. To keep up, subscribe to the Make WordPress Core blog and pay special attention to the developers’ notes for updates on those and other changes that could affect your products.

How to Help

Do you speak a language other than English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you!

If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

WordPress 5.5 Beta 1

WordPress 5.5 Beta 1 is now available for testing!

This software is still in development, so it’s not recommended to run this version on a production site. Consider setting up a test site to play with the new version.

You can test the WordPress 5.5 beta in two ways:

The current target for final release is August 11, 2020. This is only five weeks away. Your help is needed to ensure this release is tested properly.

Testing for bugs is an important part of polishing the release during the beta stage and a great way to contribute. Here are some of the big changes and features to pay close attention to while testing.

Block editor: features and improvements

WordPress 5.5 will include ten releases of the Gutenberg plugin, bringing with it a long list of exciting new features. Here are just a few:

  • Inline image editing – Crop, rotate, and zoom photos inline right from image blocks.
  • Block patterns – Building elaborate pages can be a breeze with new block patterns. Several are included by default.
  • Device previews – See how your content will look to users on many different screen sizes.
  • End block overwhelm. The new block inserter panel displays streamlined categories and collections. As a bonus, it supports patterns and integrates with the new block directory right out of the box.
  • Discover, install, and insert third-party blocks from your editor using the new block directory.
  • A better, smoother editing experience with: 
    • Refined drag-and-drop
    • Block movers that you can see and grab
    • Parent block selection
    • Contextual focus highlights
    • Multi-select formatting lets you change a bunch of blocks at once 
    • Ability to copy and relocate blocks easily
    • And, better performance
  • An expanded design toolset for themes.
  • Now add backgrounds and gradients to more kinds of blocks, like groups, columns, media & text
  • And support for more types of measurements — not just pixels. Choose ems, rems, percentages, vh, vw, and more! Plus, adjust line heights while typing, turning writing and typesetting into the seamless act.

In all, WordPress 5.5 brings more than 1,500 useful improvements to the block editor experience. 

To see all of the features for each release in detail check out the release posts: 7.5, 7.6, 7.7, 7.8, 7.9, 8.0, 8.1, 8.2, 8.3, and 8.4.

Wait! There’s more!

XML sitemaps

XML Sitemaps are now included in WordPress and enabled by default. Sitemaps are essential to search engines discovering the content on your website. Your site’s home page, posts, pages, custom post types, and more will be included to improve your site’s visibility.

Auto-updates for plugins and themes

WordPress 5.5 also brings auto-updates for plugins and themes. Easily control which plugins and themes keep themselves up to date on their own. It’s always recommended that you run the latest versions of all plugins and themes. The addition of this feature makes that easier than ever!

Lazy-loading images

WordPress 5.5 will include native support for lazy-loaded images utilizing new browser standards. With lazy-loading, images will not be sent to users until they approach the viewport. This saves bandwidth for everyone (users, hosts, ISPs), makes it easier for those with slower internet speeds to browse the web, saves electricity, and more.

Better accessibility

With every release, WordPress works hard to improve accessibility. Version 5.5 is no different and packs a parcel of accessibility fixes and enhancements. Take a look:

  • List tables now come with extensive, alternate view modes.
  • Link-list widgets can now be converted to HTML5 navigation blocks.
  • Copying links in media screens and modal dialogs can now be done with a simple click of a button.
  • Disabled buttons now actually look disabled.
  • Meta boxes can now be moved with the keyboard.
  • A custom logo on the front page no longer links to the front page.
  • Assistive devices can now see status messages in the Image Editor.
  • The shake animation indicating a login failure now respects the user’s choices in the `prefers-reduced-motion` media query.
  • Redundant `Error:` prefixes have been removed from error notices.

Miscellaneous Changes

Keep your eyes on the Make WordPress Core blog for 5.5-related developer notes in the coming weeks, breaking down these and other changes in greater detail.

So far, contributors have fixed more than 350 tickets in WordPress 5.5, including 155 new features and enhancements, and more bug fixes are on the way.

How You Can Help

Do you speak a language other than English? Help translate WordPress into more than 100 languages!

If you think you’ve found a bug, please post to the Alpha/Beta area in the support forums. We would love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac. That’s also where you can find a list of known bugs.

Props to @webcommsat, @yvettesonneveld, @estelaris, and @marybaum for compiling/writing this post, @davidbaumwald for editing/proof reading, and @cbringmann, @desrosj, and @andreamiddleton for final review.

WordPress 5.4 RC5


The fifth release candidate for WordPress 5.4 is live!

WordPress 5.4 is currently scheduled to land on March 31 2020, and we need your help to get there—if you haven’t tried 5.4 yet, now is the time!

You can test the WordPress 5.4 release candidate in two ways:

For details about what to expect in WordPress 5.4, please see the first release candidate post.

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.4 and update the Tested up to version in the readme to 5.4. The priority in testing is compatibility. If you find issues, please be sure to post to the support forums so we can figure them out before the final release.

The WordPress 5.4 Field Guide is also out! It’s your source for details on all the major changes.

How to Help

Do you speak a language besides English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

WordPress 5.4 RC4

The fourth release candidate for WordPress 5.4 is live!

WordPress 5.4 is currently scheduled to land on March 31 2020, and we need your help to get there—if you haven’t tried 5.4 yet, now is the time!

You can test the WordPress 5.4 release candidate in two ways:

For details about what to expect in WordPress 5.4, please see the first release candidate post.

RC4 commits the new About page and updates the editor packages.

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.4 and update the Tested up to version in the readme to 5.4. The priority in testing is compatibility. If you find issues, please be sure to post to the support forums so we can figure them out before the final release.

The WordPress 5.4 Field Guide is also out! It’s your source for details on all the major changes.

How to Help

Do you speak a language besides English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

WordPress 5.4 RC3

The third release candidate for WordPress 5.4 is now available!

WordPress 5.4 is currently scheduled to be released on March 31 2020, and we need your help to get there—if you haven’t tried 5.4 yet, now is the time!

There are two ways to test the WordPress 5.4 release candidate:

For details about what to expect in WordPress 5.4, please see the first release candidate post.

RC3 addresses improvements to the new About page and 8 fixes for the following bugs and regressions:

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.4 and update the Tested up to version in the readme to 5.4. If you find compatibility problems, please be sure to post to the support forums so we can figure those out before the final release.

The WordPress 5.4 Field Guide has also been published, which details the major changes.

How to Help

Do you speak a language other than English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.

WordPress 5.4 RC2

The second release candidate for WordPress 5.4 is now available!

WordPress 5.4 is currently scheduled to be released on March 31 2020, and we need your help to get there—if you haven’t tried 5.4 yet, now is the time!

There are two ways to test the WordPress 5.4 release candidate:

For details about what to expect in WordPress 5.4, please see the first release candidate post.

RC2 addresses improvements to the new About page and 5 fixes for the following bugs and regressions:

  • 49611 – Block Editor: Update WordPress Packages WordPress 5.4 RC 2
  • 49318 – Bundled Themes: Twenty Twenty content font CSS selector is too important
  • 49585 – REST API: Fix typo in disable-custom-gradients theme feature description
  • 49568 – Block Editor: Fix visual regression in editor’s color picker
  • 49549 – Bundled Themes: Calendar widget CSS fixes on various Bundled themes

Plugin and Theme Developers

Please test your plugins and themes against WordPress 5.4 and update the Tested up to version in the readme to 5.4. If you find compatibility problems, please be sure to post to the support forums so we can figure those out before the final release.

The WordPress 5.4 Field Guide has also been published, which details the major changes.

How to Help

Do you speak a language other than English? Help us translate WordPress into more than 100 languages!

If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.