How to Build WordPress Block Patterns - (r)

Share this on

WordPress is a powerful online publishing software that enables anyone to easily make and distribute textual or multimedia media. But beyond this, it's an excellent tool for professionals marketers, designers and programmers regardless of background and skills.

Simply put, WordPress can be your most useful work companion and assist you across a range of fields.

With that in mind We have put together several articles on our blog that will help you develop the knowledge and skills for becoming an WordPress developer:

It's true that you can boost your career expectations with Gutenberg developer skills, but you don't necessarily need to be a professional developer in order to design advanced layouts for your WordPress site.

WordPress users can take advantage of powerful functions that permit users to create sophisticated block designs with minimal effort. This article will be focusing on Block Patterns.

Block Patterns vs. Reusable Blocks. Template Parts

From the beginning, WordPress provides a few blocks that you can use to pick from while creating your content. Additionally, block themes usually provide more block designs that you can apply to your content directly from your block editor.

• Call to action
• The default Footer
• Hidden 404
• Hidden Comments
• Hidden No Results Content
• Post Meta

You aren't limited to patterns offered by WordPress or your theme because there is a Patterns directory has a wealth of ready-to-use block patterns.

But block patterns are not the only tool you could make use of to design block layouts on your WordPress website. The brand new Gutenberg block editor comes with other tools to pick from for creating your content layout, including reusable blocks and Template Parts. What makes these tools different from one another? What are the reasons to choose one feature over others? We'll take a look.

Block Patterns

Block patterns are predefined groups of blocks that you can include in your web pages or content, and then customize with the same tools for design available to the blocks included. Modifications to block patterns will only impact the page you're editing, and will not be applied to other instances you've included in other posts or pages on your website.

You can use block patterns to provide pre-built layouts are customizable in place, changing pictures, texts, styles, or adding/removing elements.

Block patterns are reusable and, once you've created your own custom block pattern, you can put it up on your website, and then modify it with just a few clicks using the editor's built-in control.

The patterns are available within the Patterns tab in the block inserter. You can also explore all of the patterns in the Block Pattern library right via the editor's interface. Also, visit the Block Pattern site, choose a pattern, and select the Copy button.

When you've copied a pattern, paste it in your article then you're finished.

The pattern can be customized to suit your needs. Blocks that are included in the pattern with no impact on the pattern you have registered or any other instances of it that you have on your site.

Reusable Blocks

Reusable Block is a block that has been built or group of blocks you could add to any blog webpage or post on your website. You can also export reusable blocks to other websites.

Utilizable blocks can be used to build elements you may want to include on several pages of your website and/or on different websites. Think of calls to action promotional banners prices tables and more.

In the following example in the example below, we create the reusable blocks from Columns block, an Image Paragraph, an Image, as well as a button.

Once you have created the block that you can reuse, you can add it on any page on your website using your Block Inserter.

WordPress uses reusable blocks to define the wp_block post type. They, consequently, they are stored in the table wp_posts table.

After you've created the blocks that you can reuse and you are able to manage your blocks from the Reusable blocks administrator screen. The page can be accessed by a number of methods:

• Adding /wp-admin/edit.php?post_type=wp_block to the WordPress URL of your website.
• By clicking on the Manage Reusable blocks button in the Block inserter.
• Clicking on the Manage Reusable Blocks button on the block settings dropdown menu.

There, you will be able to

• edit, thrash, or export your block in JSON,
• Reusable blocks can be imported from JSON,
• Create new blocks that can be reused.

  Every change made to a reusable block are applied to each occurrence of that block across your website regardless of the page from which changes are made.  

If you are a user of Reusable blocks intensively, don't miss this great plugin from J. B. Audras.

Template Parts

In block themes and classic themes which have chosen to use this feature, you can easily create or customize a template or template part with ease in the Site Editor interface. There are no development requirements in the event that you choose to be a theme designer.

A block template can be described as an array of block elements. Examples of block elements are the title of your website, logo as well as navigation.

Template components are distinct sections on an article that are visualized in several locations, such as the header or footer. They can also be displayed on every page on your WordPress website.

You can create and edit templates using the editor, which is where you have access to all editing tools that are available to blocks.

But unlike block patterns and reusable blocks, template parts are intended for parts of the website that are not frequently changed.

The differences between block patterns, Blocks that can be reused, as well as Template Parts

For a quick summary these three, let us look at the most important differences between the three:

Block Patterns

• Block Patterns are standardized block layouts you can add to your content and modify by using the same tools used to design the blocks included. Changes made to a block pattern will only affect that single instance of the block pattern.
• You can copy or paste block patterns from The Pattern directory.
• It is possible to create patterns and upload them into the Pattern directory.

Blocks that can be reused

• Reusable Blocks are collections of blocks you could use for any post or page of your site. Any changes you make to an reusable block will be applied to every occurrence of that block on the entire site, regardless of the admin page from which changes were made.
• Reusable blocks are stored in the post_wp_posts table with the blocks with the wp_block types for posts.
• You can import and export blocks that you can reuse from and on other sites.

Parts for templates

• Template components are distinct areas on a webpage that may be displayed in multiple places, such as Header, Footer, and Sidebar and are recurrent on various pages of your WordPress website.
• The site editor lets you create and edit elements of templates through the editor interface.
• Template parts are intended for areas of the site that do not change frequently.

How Do You Create Block Patterns?

So, at the time as of this writing, you have two ways to design a block.

• Using the register_block_pattern helper function,
• Then, add the PHP file in your theme's pattern folder.

Designing a Block Pattern with a Plugin

The first approach is designed for WordPress developers but is simple enough to be used by people who are not advanced in their development.

If you decide to go with the first method, you can create a block pattern using the two new functions register_block_pattern and register_block_pattern_category in the PHP file of a plugin or in the of your theme.

Choose or register a Pattern Classification

In the beginning, it is possible select a specific category that you can use to create your pattern. With WordPress 6.2, new category categories for pattern designs were added as well as previously used categories have been altered. At the time of this article, you are able to use the categories built into WordPress:

• Featured ( featured)
• Posts ( posts)
• Text ( text)
• Gallery ( gallery)
• Call-to-action ( call-to-action)
• Banners ( banner)
• Headers ( header)
• Footers ( footer)
• Teams ( team)
• Testimonials (testimonials)
• Services ( services)
• Portfolio (portfolio)
• Media ( media)

If your block pattern does not fall into any of the default categories, you can also register a new category using the register_block_pattern_category function.

This function takes two arguments:

• $category_name The pattern for the name of the category including namespace.
• $category_properties: An array of category properties.

An example will help you better understand how to register the new category of pattern:

if ( function_exists( 'register_block_pattern_category' ) ) 
 function my_plugin_register_pattern_category() 
 register_block_pattern_category( 
 'my-pattern-category', 
 array(
 'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
 'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
 )
 );
 
 add_action( 'init', 'my_plugin_register_pattern_category' );
 

Register a Block Pattern

After the category for pattern has been verified The next step is to sign up the block pattern. You will register the block pattern using the register_block_pattern helper function as follows:

function my_plugin_register_block_pattern() 
 register_block_pattern( 'prefix/pattern-name', $props );
 
 add_action( 'init', 'my_plugin_register_block_pattern' );

The function is based on two arguments:

• $pattern_name: A machine-readable name in the form of namespace/pattern-name.
• $pattern_properties: An array of the properties associated with the pattern.

Below is a listing of patterns that are currently available for properties:

• name (required): A accessible to humans title for the pattern.
• content (required): The HTML markup required for the pattern.
• description Description of the pattern in the inserter. A description is optional but it's highly recommended because it helps users find the pattern.
• categories: An array comprising one or more recognized patterns categories. It is necessary to create the category prior to being able to apply it to this site (see the section before).
• keywords: An array of words that can help the user discover the pattern.
• viewportWidth: An integer specifying the dimensions of the pattern within the preview.
• blockTypes The HTML0 blockTypes array is an optional set of block types that will be included in the pattern.
• postTypes: An array of post types that will be allowed to utilize the pattern.
• inserter: A boolean to determine whether the pattern will be displayed within the inserter block. Change the value in the range of False to block the pattern. In default the patterns are displayed inside Block Inserter.

Here is an example of usage of register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) 
 function my_plugin_register_block_pattern() 
 register_block_pattern( 
 'my-plugin/my-block-pattern', 
 array(
 'title' => _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
 'categories' => array( 'my-pattern-category' ),
 'postTypes' => array( 'post' ),
 'content' => 'My awesome block pattern
'
 ) 
 );
 
 add_action( 'init', 'my_plugin_register_block_pattern' );
 

In this example we have used to use the postTypes property to limit the pattern accessible for blog posts that are regular. You may also choose a different value to postTypes in order to make the pattern available for various post types. If you're working with an specific product post type and decide to make the pattern only available for that post type, you'll write:

'postTypes' => array( 'product' ),

Now create a new post (or custom post type), open the block inserter then click on the label Patterns. It should show a New pattern category ( My Pattern Category) which contains your personal block design. Feel free to play around by altering the pattern properties in order to create your block patterns.

Now let's dive a little into the depths of our minds and attempt to create a real-world block pattern.

An Real World Example of Block Pattern

If you'd like to design a block pattern including a heading, an image, a paragraph, and the button.

In the editor, you can create the block's layout in the editor. pattern, then switch into the editor for code and copy the markup.

In this example, we use the following code

 wp:paragraph -->
 is a cloud Platform created to assist companies and dev teams ship and manage their web projects quickly and efficiently. 
 

 /wp.column   
 /wp:columns --> WP:Buttons 
   wp. "textAlign":"center","textColor":"base","width":100,"style ":"color ":"background ":"#5831f6 ","typography ":"fontSize":"1.36rem ","border ":"radius ":"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px ","fontFamily":"inter" -->
 View Plans HTML10 
  /wp:button -->
 buttons /wp:  

It is now possible to optimize this code. If you're registering the block pattern with an application, you need to change the image URL as follows:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

So, WordPress won't look for images in your uploads instead, it will be within your plugin's images folder within the plugin.

It is then possible to utilize viewportWidth property to provide a better preview of the pattern. viewportWidth property to provide an improved view of the pattern within the block inserter:

'viewportWidth' => 800,

It is also possible to include an array of keywords to help customers locate your block pattern:

'keywords' => array( 'cta', 'demo', '' ),

Another option to help users find the block in search results is to include an array of blocks:

'blockTypes' => array( 'core/button' ),

This way, the block pattern will be displayed in the suggestions that appear when a user searches for any of the blocks specified.

The postTypes property lets you restrict the block design available for specific post types. You could, for instance, make the pattern only visible on only the product post type

'postTypes' => array( 'product' ),

In the end, you are able to include a CSS class to the wrapper of your block pattern.

In order to do this, you need to create a new Group with the name="className" attribute:

Make sure you add the same class name in the next element. element.

To get a better understanding of block patterns and additional examples of code check out Block patterns found in The WordPress.org Theme Handbook.

Creating a Block Pattern With the help of a file

You can set the same parameters as with the previous method, however you need to include them in a comment in the file header. Additionally to using the parameters with names that are in the case of camel, you will separate the words by a space as well as instead of arrays, it is recommended to use comma separated list items.

First, deactivate the plugin which you have used to register your pattern as in the earlier example. Next, create a brand-new my-block-pattern.php file and include the following header:

Next, you'll add the content to your block pattern. You can use the same markup as previously mentioned, however, first you'll have alter it slightly:

 

 

 
 

 
 
 
 

 Your New Home for Modern Web Apps and Sites
 
 
 
  is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.
 

 

 
 
 
 

 
 

 

The format is virtually similar to that of the earlier example. There are only two minor changes.

The placeholder image URL is now generated through the get_theme_file_uri function:

It is recommended that you first have placed your placeholder.jpg image in the image files in the /assets/images folder of your theme.

Following the instructions, you can generate the language you'd like to translate.

Now save your file and create a new post. Your block pattern should appear within the Featured and Banners categories.

Remove Support, Unregister to hide block patterns, as well as remove support.

In certain scenarios there are situations where you might want to perform special actions on blocks. As an example, you could decide to swap a basic block pattern with a pattern that you create or unregister a category under specific conditions. Here are the operations that you could do.

1. Stop All Support for Core Block Patterns

In the beginning, theme designers can remove support for core block patterns, and then provide their own set of patterns. For the removal of support for core patterns it is possible to use the remove_theme_support function in this manner:

remove_theme_support( 'core-block-patterns' );

It is advised to connect the remove_theme_support method to the after_setup_theme hook.

2. Register a single block pattern and unregister it.

You may also deregister a specific block pattern should you wish to offer a different option or do not want it to be used with your theme.

The Patterns API provides the unregister_block_pattern function for that:

function my_theme_unregister_block_pattern() 
 unregister_block_pattern( 'namespace/block-pattern-name' );
 
 add_action( 'init', 'my_theme_unregister_block_pattern' );

If you want to deregister a pattern of a central block You will do so by following one of the following methods:

function my_theme_unregister_block_pattern() 
 unregister_block_pattern( 'core/query-offset-posts' );
 
 add_action( 'init', 'my_theme_unregister_block_pattern' );

You will use unregister_block_pattern with the init hook.

3. Register a Category for Block Patterns and Unregister it.

You can also unregister a pattern category, hooking the unregister_block_pattern_category function into the init hook:

function my_theme_unregister_block_pattern_categories() 
 unregister_block_pattern_category( 'pattern-category-name' );
 
 add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Create and share Block Patterns Utilizing the Pattern Creator

You can also create your patterns and share your creations with others using an online free tool called The Pattern Creator.

If you have an WordPress.org user account, you will be able to connect to the Creator of Patterns Creator through the Pattern directory.

When you are there, select Create new pattern. This will start a custom edition of Block Editor that you are able to use to design your block patterns.

Additionally, you can use no-cost images uploaded by Openverse. Openverse library.

When you're satisfied with your changes You can save your draft or submit the pattern for revision.

Then, go back to the Patterns directory and choose My patterns. Then, you'll find your patterns on 3 tabs: All, Drafts, and Pending Review.

Once you're done with the changes, you're able to upload your patterns to the world at large. Just click on the Submit button located in the upper right hand corner of the editor to make the change to your pattern (be aware of the instructions for the pattern before you submit your pattern).

Summary

These figures prove that WordPress is a great publication tool, used by a multitude of developers, experts and bloggers all around the world.

And now up to you. Have you already created block patterns? Have you shared any to the public? We would love to see what you have created. Comment with a link to your site or thoughts on block patterns.