パターン

ブロックパターンは事前に定義されたブロックレイアウトです。ブロックインサーターの「パターン」タブから利用できます。コンテンツ内に挿入すると、ブロックはコンテンツや構成を追加、変更できます。

目次

ブロックパターン

register_block_pattern

エディターにはいくつかのコアブロックパターンが付属します。テーマやプラグインの作者は register_block_pattern ヘルパー関数を使用して追加のカスタムブロックパターンを登録できます。

register_block_pattern ヘルパー関数は2つの引数を取ります。

  • title: 機械が読めるタイトル。命名規約は namespace/title
  • properties: パターンのプロパティを説明する配列

ブロックパターンで利用可能なプロパティを以下に示します。

  • title (必須): 表示されるパターンのタイトル。
  • content (必須): パターンのブロック HTML マークアップ。
  • description (オプション): インスペクター内でパターンの記述に使用される非表示のテキスト。オプションだがタイトルで十分にブロックの動作を表せない場合は強く推奨。ユーザーの検索を支援する。
  • categories (オプション): ブロックパターンのグループ化に使用される、登録されたパターンカテゴリーの配列。ブロックパターンは複数のカテゴリーに分けて表示できる。ここで使用されるには、カテゴリーは個別にと労苦する必要がある。
  • keywords (オプション): 検索の際に役立つ別名またはキーワードの配列。
  • viewportWidth (オプション): インサーター内でのパターンのインデント幅を指定する整数。パターンのスケールするプレビュー用。

次のサンプルコードは、ブロックパターン「my-plugin/my-awesome-pattern」」を登録します。

register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Two buttons', 'my-plugin' ),
        'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ),
        'content'     => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

注意:

register_block_pattern() は、init フックにアタッチされたハンドラから呼ぶ必要があります。

function my_plugin_register_my_patterns() {
  register_block_pattern( ... );
}

add_action( 'init', 'my_plugin_register_my_patterns' );

ブロックパターンの登録の解除

unregister_block_pattern

unregister_block_pattern ヘルパー関数を使用すると、テーマやプラグインからブロックパターンの登録を解除出来ます。1つの引数を取ります。

  • title: 登録解除するブロックパターンの名前

次のサンプルコードは、ブロックパターン「my-plugin/my-awesome-pattern」の登録を解除します。

unregister_block_pattern( 'my-plugin/my-awesome-pattern' );

注意:

unregister_block_pattern() は、init フックにアタッチされたハンドラから呼ぶ必要があります。

function my_plugin_unregister_my_patterns() {
  unregister_block_pattern( ... );
}

add_action( 'init', 'my_plugin_unregister_my_patterns' );

ブロックパターンカテゴリー

ブロックパターンはカテゴリーを使用してグループ分けできます。ブロックエディターにはカスタムブロックパターンでも利用可能な組み込みのカテゴリーが付属します。独自のブロックパターンカテゴリーを登録することもできます。

register_block_pattern_category

register_block_pattern_category ヘルパー関数は2つの引数を取ります。

  • title: ブロックパターンカテゴリーの機械が読み取り可能なタイトル。
  • properties: パターンカテゴリーのプロパティを説明する配列

パターンカテゴリーのプロパティを以下に示します。

  • label (必須): 表示されるパターンカテゴリーの名前。

次のサンプルコードは、カテゴリー「hero」を登録します。

register_block_pattern_category(
    'hero',
    array( 'label' => __( 'Hero', 'my-plugin' ) )
);

注意:

register_block_pattern_category() は、init フックにアタッチされたハンドラから呼ぶ必要があります。

function my_plugin_register_my_pattern_categories() {
  register_block_pattern_category( ... );
}

add_action( 'init', 'my_plugin_register_my_pattern_categories' );

unregister_block_pattern_category

unregister_block_pattern_category はパターンカテゴリーの登録を解除します。

関数の引数は解除するパターンカテゴリーの名前です。

次のコードの例ではカテゴリー「hero」の登録を解除します。

unregister_block_pattern_category( 'hero' );

注意:

unregister_block_pattern_category() は、init フックにアタッチされたハンドラから呼ぶ必要があります。

function my_plugin_unregister_my_pattern_categories() {
  unregister_block_pattern_category( ... );
}

add_action( 'init', 'my_plugin_unregister_my_pattern_categories' );

原文

最終更新日: