WordPress 5.5 から利用できる「ブロックパターン」がめちゃいいかもしれない

WordPress 5.5 (2020年8月11日リリース予定) ではブロックエディタが大きく変わるようです。そのなかで、かなり気になる「ブロックパターン」という機能がありましたのでご紹介いたします。

これをうまく利用すると今まで「再利用ブロック」を流用してユーザーに使ってもらっていたブロックのデザイン・レイアウトの雛形を「ブロックパターン」に登録して使えるようになります。

※この記事は WordPress5.5 beta1 でテストしています。
※ブロックパターンはまだ開発中であり、APIは変更される可能性があります。

ブロックパターンとは

ブロックエディタに慣れてくるとブロックを1つだけ使用するのではなくいくつものブロックを組み合わせて使用するようになってきますよね。

そこで慣れてない人でも簡単にブロックを組み合わせ、あらかじめ作っておいたデザイン・レイアウトを1クリックで利用できる「ブロックパターン」が現時点で10個用意されるようになりました。

ブロックパターンの使い方

「＋」ボタンをクリックしたら出てくるブロック選択画面タプの「パターン」をクリックすると「ブロックパターン」が選択できます。

いくつかブロックパターンカテゴリごとにブロックパターンがありますので使いたいブロックパターンをクリックするとコンテントエリアに挿入(コピー)されます。

あとは、コンテンツ内容に合わせてブロック内の情報を入力するだけになります。
今までの「再利用ブロック」を流用する方法でしたら「通常のブロックへ変換」してからブロックを触らないとえらいことになりますが、そんな心配はいりません。

　

スポンサードリンク

オリジナルブロックパターン

ブロックパターンは自分で作ったブロックパターンを登録する事ができます。

基本コード

基本はこちら、phpコードになります。

/**
 * Registers a new pattern.
 *
 * @param string $pattern_name       Pattern name including namespace.
 * @param array  $pattern_properties Array containing the properties of the pattern.
 */
function nendebcom_my_block_pattern(){
	register_block_pattern(
		'nendebcom/my-block-pattern',	//ブロックパターン名 namespace/block-pattern-name
		array(
			'title'   => 'ブロックパターンのタイトル',
			'content' => 'ブロックHTML',
		)
	);
}
add_action( 'init', 'nendebcom_my_block_pattern' );

関数名を自分用に変更してください。
ブロックパターン名は自分用の名前をつけてください。ルールは「namespace/block-pattern-name」な感じで。接続部分は「-」を使ってください。「_」はこけます。
ブロックパターンのタイトルをつけてください。日本語でも大丈夫です。
ブロックHTMLを貼り付けてください。

サンプルコード

実験用のサンプルコードを紹介します。
以下のコードを my-plugin.php に張り付けてみてください。
※WordPress5.5でない場合は Gutenbergプラグインver8.3 もインストールしてください。

/**
 * ブロックパターン追加サンプル
 *
 * WordPress5.5 beta
 * License: GPLv2
 */
function nendebcom_block_pattern(){

	//ブロックHTML
	$block_pattern_tag = '

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"className":"is-style-default"} -->
<figure class="wp-block-image is-style-default"><img alt=""/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph {"textColor":"black","fontSize":"medium"} -->
<p class="has-black-color has-text-color has-medium-font-size">アクセシビリティ、パフォーマンス、セキュリティ、使いやすさを重視し、すべての人のために設計されています。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":14,"style":{"color":{"background":"#cf8e26"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="border-radius:14px;background-color:#cf8e26">もっと詳しく</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph {"textColor":"black","fontSize":"medium"} -->
<p class="has-black-color has-text-color has-medium-font-size">シンプルで予測可能なので、簡単に始めることができます。成長と成功のための強力な機能を提供します。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":15,"style":{"color":{"background":"#57b75f"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="border-radius:15px;background-color:#57b75f">もっと詳しく</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph {"textColor":"black","fontSize":"medium"} -->
<p class="has-black-color has-text-color has-medium-font-size">最小限の設定で動作するので、あなたのストーリー、製品、サービスを自由に共有することに集中できます。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":15,"style":{"color":{"text":"#ffffff","background":"#4385d6"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:15px;background-color:#4385d6;color:#ffffff">もっと詳しく</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

	';	//.ブロックHTML

	//ブロックパターン追加
	register_block_pattern(
		'nendebcom/nendebcom-3-featured-articles',	//ブロックパターン名 namespace/block-pattern-name
		array(
			'title'   => '3列の注目記事',		//ブロックパターンのタイトル
			'content' => $block_pattern_tag,	//ブロックHTML
			'categories' => array( 'nendebcom' ),	//ブロックパターンカテゴリ
		)
	);

	//ブロックパターンカテゴリ追加
	register_block_pattern_category(
		'nendebcom',
		array( 'label' => 'nendebcom' )
	);
}
add_action( 'init', 'nendebcom_block_pattern' );

これで新しいブロックパターンがパターン一覧にでてきます。

クリックするとコンテントエリアに設置されます。

作り方

以下の手順で上記のコードをベースに変更してみてください。

①まず登録するブロックコンテンツを作ります。
②ブロックコンテンツをコピーして「//ブロックHTML」の所に貼り付けます。

③ブロックパターン名、タイトルを設定してください。
※必要ならばブロックパターンカテゴリを設定してください。無い場合は「未分類」に入ります。
現在「text」「hero」「columns」「buttons」「gallery」「features」「testimonials」の7つのカテゴリがありますがカテゴリを新規追加する事もできます。

　

スポンサードリンク

おまけ

標準でついてるブロックパターンやカテゴリを個別に削除する事もできます。
ユーザーに使ってほしくないとかブロックパターンが多すぎてややこしくなった等の理由で調整する事ができます。

/**
 * ブロックパターン・カテゴリ削除サンプル
 *
 * WordPress5.5 RC1
 * License: GPLv2
 */
function nendebcom_unregister_block_pattern(){

	//ブロックパターン
	unregister_block_pattern( 'core/text-two-columns' );
	unregister_block_pattern( 'core/two-buttons' );
	unregister_block_pattern( 'core/two-images' );
	unregister_block_pattern( 'core/text-two-columns-with-images' );
	unregister_block_pattern( 'core/text-three-columns-buttons' );
	unregister_block_pattern( 'core/large-header' );
	unregister_block_pattern( 'core/large-header-button' );
	unregister_block_pattern( 'core/three-buttons' );
	unregister_block_pattern( 'core/heading-paragraph' );
	unregister_block_pattern( 'core/quote' );

	//ブロックパターンカテゴリ
	unregister_block_pattern_category( 'buttons' );
	unregister_block_pattern_category( 'columns' );
	unregister_block_pattern_category( 'gallery' );
	unregister_block_pattern_category( 'header' );
	unregister_block_pattern_category( 'text' );
}
add_action( 'init', 'nendebcom_unregister_block_pattern' );

あとがき

ブロックパターンはまだ開発中であり、変更されるかもしれませんが「再利用ブロック」のようにブロックパターンも簡単に登録やメンテナンスできるようになれば、もっと使いやすくなりますね。

という事で作ってみました。

WordPress5.5 ブロックパターンを簡単に登録やメンテナンスできるようにする

参考

パターン（実験的） | ブロックエディターハンドブック
https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/

Gutenbergプラグイン
https://ja.wordpress.org/plugins/gutenberg/

スポンサードリンク

ブロックパターンとは

ブロックパターンの使い方

オリジナルブロックパターン

基本コード

サンプルコード

作り方

おまけ

あとがき

参考

関連記事

WordPress5.6 をチェックしています

WordPress5.5 ブロックパターンを簡単に登録やメンテナンスできるようにする

WordPress 5.5 をチェックしています

【実験中】外部CSSを全てminifyしてインライン(ヘッダ内)に出力する

テーマカスタマイザーの「追加CSS」をminify(縮小化)する