A Closer Look at the Block Pattern Directory of WordPress

With WordPress 5.8 that went live on July 20, 2021, WordPress finally introduced WordPress block patterns to regular users.

WordPress block patterns provide the design templates that users can employ and build webpages on the fly without prior experience with designing or coding.

Let’s see how you can use the block pattern directory to build your website.

Read to learn more.

WordPress Block Patterns 101

Navigating the WordPress Block Pattern Directory

How To Use the WordPress Block Pattern

Block Pattern Directory: Using It Effectively

Block Pattern Directory: Updates

Final Thoughts: WordPress Block Pattern Directory: What You Need To Know

WordPress Block Patterns 101

WordPress block patterns refer to preset layouts of different blocks. Instead of developing a complex layout yourself, you can search for a relevant WordPress block pattern and select one that suits your needs.

Once you have a relevant block pattern, you can customize it according to your requirements.

As of writing, you can find block patterns of the following categories:

  • Columns
  • Headers
  • Galleries
  • Images
  • Text
  • Buttons

If you want to add a creative header, you can use a block pattern from the Headers category. For adding social media buttons, you can check out block patterns under Buttons.Similarly, you can use block patterns from other categories according to your design needs.

WordPress provides a block pattern directory at WordPress.org — similar to databases for plugins and themes. It contains block patterns of multiple categories.

You can navigate that and search for a relevant block pattern that suits your needs.

Block Pattern Directory
Screenshot

Alternatively, you can also use the Gutenberg editor. You can find the block pattern directory by opening the block inserter.

Block pattern directory in Gutenberg editor
Source

How To Use the WordPress Block Pattern

You can use WordPress block pattern for designing a webpage by:

  1. Selecting a layout: Access the block pattern directory either through WordPress.org or Gutenberg editor. From the multiple categories, opt for a relevant category and then select the desired layout. 
  2. Transferring the layout: You can transfer the layout to your WordPress editor by:
  • Clicking Copy at the bottom right of the select layout and pressing Ctrl (Cmd) + V in the WordPress editor (If using WordPress.org directory)
  • Clicking the selected layout (if using built-in block pattern directory in Gutenberg editor)
Copying a layout from block pattern directory
Screenshot
  • Customizing the block pattern: Once you have inserted the block pattern, you can edit and customize it as you like.

Block Pattern Directory: Using It Effectively

The primary driver behind the block pattern directory is accessibility. It follows WordPress’s aim to make website development easy and simple for everybody.

With the block pattern directory, non-tech-savvy users can also create attractive and functional webpages.

Still, how to use it effectively?

You can do so by finding opportunities where you can use a layout template:

  • For visuals blogs — coffee-making, gaming and cooking — you can find a relevant layout in the image and header category.
  • For literature, text layouts can be valuable.
  • For call-to-action (CTA) buttons, you can use the buttons category.

Once you have the right layout template, you can customize it using WordPress editor.

You can replace the placeholder text and photos with your text and photos. Additionally, you might have to change the dimensions and adjust the color scheme according to your brand design.

Block Pattern Directory: Updates

When launched, the block pattern directory was only available in English. Since then, the WordPress team has attended to it for the international audience and extended the language coverage to 12 languages.

Also, right now, the block pattern directory contains the patterns from WordPress only. In a future update, you will be able to add your patterns directly to the directory for other community members.

Block patterns from different community users

Final Thoughts: WordPress Block Pattern Directory: What You Need To Know

WordPress block patterns improve the web development experience for both beginners and experts. The beginners can use the patterns to design webpages themselves, whereas the experts can do the same to speed up their work.

With WordPress block patterns, WordPress moves forward in its quest to provide everyone equal opportunity to create and manage their website.

Looking to create your website? Check out the best WordPress hosting plans of Bluehost today.

Build the Website of Your Dreams with Bluehost

Get Started
Devin Sears
Devin Sears | Field Marketing Manager

Leave a comment

Your email address will not be published. Required fields are marked*