From fba99dfa47545f6c6e3229e66dd67ca93f22115f Mon Sep 17 00:00:00 2001 From: Jorge Contreras Date: Wed, 24 Nov 2021 10:11:36 -0500 Subject: [PATCH] Docs request #36688: How to create a block pattern - Add how to guide to create a block pattern, based on The Good Docs Project template. --- docs/how-to-guides/README.md | 6 ++ .../block-tutorial/create-block-pattern.md | 60 +++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 docs/how-to-guides/block-tutorial/create-block-pattern.md diff --git a/docs/how-to-guides/README.md b/docs/how-to-guides/README.md index 8cc028f7b2e59f..4ebc9db180cb3d 100644 --- a/docs/how-to-guides/README.md +++ b/docs/how-to-guides/README.md @@ -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) diff --git a/docs/how-to-guides/block-tutorial/create-block-pattern.md b/docs/how-to-guides/block-tutorial/create-block-pattern.md new file mode 100644 index 00000000000000..d8fc2d43605e25 --- /dev/null +++ b/docs/how-to-guides/block-tutorial/create-block-pattern.md @@ -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 + __( 'Quote with Avatar', 'my-block-pattern' ), + 'categories' => array( 'text' ), + 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-block-pattern' ), + 'content' => '

"Contributing makes me feel like I\'m being useful to the planet."

— Anna Wong, Volunteer
', + ) +); + +?> +``` + +### 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/) + +