Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add semantic patterns documentation #38778

Merged
merged 2 commits into from
Feb 14, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 46 additions & 1 deletion docs/reference-guides/block-api/block-patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ The properties available for block patterns are:
- `categories` (optional): An array of registered pattern categories used to group block patterns. Block patterns can be shown on multiple categories. A category must be registered separately in order to be used here.
- `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching.
- `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.
- `blockTypes` (optional): An array of block types that the pattern is intended to be used with.

The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':

Expand Down Expand Up @@ -135,4 +136,48 @@ function my_plugin_unregister_my_pattern_categories() {
}

add_action( 'init', 'my_plugin_unregister_my_pattern_categories' );
```
```

## Block patterns contextual to block types

It is possible to attach a block pattern to one or more block types. This adds the block pattern as an available transform for that block type.

For instance:

```php
register_block_pattern(
'my-plugin/powered-by-wordpress',
array(
'title' => __( 'Powered by WordPress', 'my-plugin' ),
'blockTypes' => array( 'core/paragraph' ),
'content' => '<!-- wp:paragraph -->
<p>Powered by WordPress</p>
<!-- /wp:paragraph -->
',
)
);
```

The above code registers a block pattern named 'my-plugin/powered-by-wordpress' and also shows the pattern in the "transform menu" of paragraph blocks.

Blocks can also use these contextual block patterns in other places. For instance, when inserting a new Query Loop block, the user is provided with a list of all patterns attached to the block.

## Semantic block patterns

In block themes, you can also mark block patterns as "header" or "footer" patterns (template part areas). We call these "semantic block patterns". These patterns are shown to the user when inserting or replacing header or footer template parts.

Example:

```php
<?php
register_block_pattern(
'my-plugin/my-header',
array(
'title' => __( 'My Header', 'my-plugin' ),
'categories' => array( 'header' ),
// Assigning the pattern the "header" area.
'blockTypes' => array( 'core/template-part/header' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's worth noting that core/template-part/header is something that is used only by template parts and is not a generic API for block variations. It had been discussed to support block variations with the same format, but eventually left for template parts to override the filtering patterns function with that naming convention.

'content' => 'Content of my block pattern',
)
);
```