Skip to content

Commit

Permalink
Docs request WordPress#36688: How to create a block pattern
Browse files Browse the repository at this point in the history
- Add how to guide to create a block pattern, based on The Good Docs Project template.
  • Loading branch information
Jorge Contreras committed Nov 24, 2021
1 parent c96dbc6 commit fba99df
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
6 changes: 6 additions & 0 deletions docs/how-to-guides/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,9 @@ Autocompleters within blocks may be extended and overridden. Learn more about th
Posts in the editor move through a couple of different stages between being stored in `post_content` and appearing in the editor. Since the blocks themselves are data structures that live in memory it takes a parsing and serialization step to transform out from and into the stored format in the database.

Customizing the parser is an advanced topic that you can learn more about in the [Extending the Parser](/docs/reference-guides/filters/parser-filters.md) section.

## Block Patterns

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.

Learn [How to Create a Block Pattern](/docs/how-to-guides/block-tutorial/create-block-pattern.md)
60 changes: 60 additions & 0 deletions docs/how-to-guides/block-tutorial/create-block-pattern.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# How to create a Block Pattern

## Overview

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.

## Before you start

To complete this tutorial, you will need the following:

- WordPress development environment
- Familiarity with Plugins and Gutenberg

## Step-by-step guide

### Step 1: Create a sample plugin

Create a directory named `my-block-pattern` and place it under the plugins folder. Create a file called `my-block-pattern.php` inside the folder you just created and paste the following code:

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

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

?>
```

### Step 2: Activate the plugin

Go to the plugins section in the WordPress admin and activate `Quote Pattern Example Plugin`

### Step 3: Use the block pattern

Open a new post and click on the Patterns tab. Select the `text` category. Your pattern should be displayed and ready to be used.

## Troubleshooting

- If the pattern does not appear in the panel, make sure that the plugin is activated and that you're browsing the correct category.

## Conclusion

Creating a block pattern is an efficient way to organize blocks. In this tutorial you have created a pattern that can be reused in any post.

If you want to learn more about block patterns, you may want to check the [Block Editor Handbook](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/)

<!--
This documentation is based on templates from The Good Docs Project.
This comment can be removed in your guide.
-->

0 comments on commit fba99df

Please sign in to comment.