What is a Block Pattern?

A Block Pattern is a collection of blocks that make up a design that can be re-used. Instead of starting from a blank page and building from scratch, users can look for a pattern that closely resembles how their page might be laid out, and copy and paste it into the editor.

Then the work begins. Users will need to customize the block, perhaps replace text and images, delete sections which they don’t want. This all is made easier via the Block List View.

Where Can I Find Block Patterns?

There are at least three places to look for Block Patterns.

1. The WordPress Pattern Page (https://wordpress.org/patterns/)

Here you will find a growing list of curated patterns collected by wordpress.org designers. There are useful filters (highlighted below) to facilitate your search.

Screenshot of the Patterns Page

2. GutenbergHub (https://builder.gutenberghub.com/)

Go to this site and build your page via the official patterns curated by WordPress. You will not be able to change the pattern on this site. You just click on the “Copy Code” button and then paste it into your page. Then customize it as you like.

3. Your Block Theme

If you are using a block theme, click on the plus sign at the top of your edit screen. This will reveal a panel that displays all the blocks that are available to you in the “Blocks” tab. If your theme has any patterns, they will display in the “Patterns” tab. If you have any reusable blocks, they will be displayed in the “Reusable Blocks” tab.

Screenshot of a Block Theme's Pattern Tab

You can also click on the “Explore” button to get a full width display of the available patterns.

How Do I Use A Block Pattern?

Once you’ve found a pattern you like, how do you move forward?

With a Page or Post

Once you’ve found a pattern you like, simply copy and paste it into a block on your post or page.You’ll probably need to change text and images and maybe tweak the colors, but a block pattern provides a good foundation for your content.

Some patterns are designed to be used for special purposes, such as a header or footer. You can use a pattern any way you want, but the result may not be what you want. The pattern page has tabs at the top that separate patterns into categories. The default is “All.”

With A Site Template (if using a Full Site Editing theme)

If you the think the pattern could be used globally on your site, add it to one of your WordPress templates. Copy/paste it into wherever you choose. For more information on this, see Full Site Editing.

Block Editing Resources On The Commons

  • Query Loop Block

    The Query Loop block lets you choose a post type (page, post, or a custom post type), a filter (category, tag, author, keyword) and fetch that data in a loop. This closely resembles the familiar “Post” page (what used to… Read More

  • Reusable Blocks

    If you have content that you expect to repeat in other parts your site, consider creating a reusable block. Start out by creating the block. Perhaps you might have an image and a paragraph. Once you’ve created this composited block… Read More

  • Block Libraries

    Plugin authors are creating elegant, easy to use blocks that will make your site look amazing. When you activate a plugin, you may see one or more new blocks added to your list On the Commons, we now have two… Read More

  • Block Patterns

    Get a head start on your page design. Copy a pattern and paste it into your content wherever you want it to appear. Then customize it – change the text, images, colors, etc. Continue reading Read More

  • Block Editor’s “List View”

    “List View” displays how the blocks work together on a page, and provides access to each block’s settings. “List View” can be accessed by clicking the icon pictured above, which is always available in the Block Editor toolbar. Continue reading Read More

  • Full Site Editing

    Full Site Editing (“FSE”) lets users design every part of a WordPress post or page, with modular blocks.  No coding is needed, but users do need to understand how FSE works. A good understanding how templates are used in WordPress. Continue reading Read More

  • Block Editing

    The Block Editor is now the default editor on the Commons and we hope you use it. It is the future for WordPress. Continue reading Read More

FYI – This is a Reusable Bock built with a Query Loop.