Block Patterns - markhowellsmead/helpers GitHub Wiki
Block Patterns in WordPress are collections which provide an author with a pre-defined set of blocks, with which content can be more quickly created. After inserting a Block Pattern, the editor can then edit the content as required. Whereas Reusable Blocks are kept in sync. everywhere they are used, Block Patterns are not kept in sync. if they are edited. (The original basis in the theme or plugin code always remains the same.)
Contextual Block Patterns are Block Patterns which can be linked with a block type. For example, linking a Block Pattern to a list block by means of the comma-separated Block Types definition will allow the editor to convert a regular list block to an extended block pattern.
(See this overview for a full list of options.)
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: core/list, comma, separated, values
* Inserter: yes|no
*/Use with Hello FSE
Add a PHP file to the patterns folder in the Theme. Requires WordPress 6.0+.
<?php
/**
* Title: Startseite - neuste Beiträge
* Slug: sht/front-latest-posts
* Categories: home, list-view
*/
?>
<!-- wp:query {"queryId":3,"query":{"offset":0,"perPage":21,"postType":"post","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide","className":"wp-block-query\u002d\u002dsht-cards","sht_ad_location":"home"} -->
<div class="wp-block-query alignwide wp-block-query--sht-cards">
<!-- wp:post-template {"align":"wide","className":"wp-block-query__entries is-style-cards"} -->
<!-- wp:sht/post-featured-image {"link":true,"className":"wp-block-query__figure"} /-->
<!-- wp:group {"className":"wp-block-query__textcontent"} -->
<div class="wp-block-group wp-block-query__textcontent">
<!-- wp:sht/post-strapline /-->
<!-- wp:post-title {"isLink":true,"className":"wp-block-query__title","fontSize":"medium"} /-->
</div>
<!-- /wp:group -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->This automatically inserts the content of the patterns/page-base.php file when the user creates a new page. The content can then be freely modified, in line with Block Pattern standards. (This code example is for use with the Hello FSE theme.) (Via.)
<?php
namespace SayHello\Theme\PostType;
class Page
{
public function run()
{
add_action('init', [$this, 'pageTemplate']);
}
/**
* Adds a pre-defined page template of blocks when a new page is created
*
* @return void
*/
public function pageTemplate()
{
$post_type_object = get_post_type_object('page');
$post_type_object->template = [
['core/pattern', [
'slug' => 'sht/page-base',
]]
];
}
}