エディターマークアップ

useBlockProps() フックは、@wordpress/block-editor パッケージによって提供され、Edit コンポーネント内のブロックの外部マークアップを定義するために使用されます。

このフックは、いくつかのタスクを簡素化します。

  • ブロックの HTML 構造に一意の id を割り当てること。
  • 機能と情報を向上させるためのさまざまなアクセシビリティおよび data- 属性を追加すること。
  • ブロックのカスタム設定を反映するクラスとインラインスタイルを組み込むこと。デフォルトでは、これには次のものが含まれます：
    • 一般的なブロックスタイリングのための wp-block クラス。
    • ブロックの名前空間と名前を組み合わせたブロック固有のクラスで、ユニークでターゲットを絞ったスタイリング機能を保証します。

次の例では、Edit コンポーネント内で useBlockProps() フックを使用してブロックのエディターマークアップが定義されています。 

  1. const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
  3. registerBlockType( ..., {
  4.    edit: Edit
  5. } );

上記の コード の 完全なブロック例 を参照してください。

ブロックエディタ内のブロックのマークアップは、クラスと属性が自動的に適用されるため、次のようになります： 

  1. <p
  2.    tabindex="0"
  3.    id="block-4462939a-b918-44bb-9b7c-35a0db5ab8fe"
  4.    role="document"
  5.    aria-label="Block: Minimal Gutenberg Block ca6eda"
  6.    data-block="4462939a-b918-44bb-9b7c-35a0db5ab8fe"
  7.    data-type="block-development-examples/minimal-block-ca6eda"
  8.    data-title="Minimal Gutenberg Block ca6eda"
  9.    class="
  10.    block-editor-block-list__block
  11.    wp-block
  12.    is-selected
  13.    wp-block-block-development-examples-minimal-block-ca6eda
  14.    "
  15. >Hello World - Block Editor</p>

ブロックの Edit コンポーネント内では、useBlockProps() フックを使用して、追加のクラスと属性を引数として渡すことで含めます。（例を参照）

supports プロパティを使用して機能を有効にすると、useBlockProps によって返されるオブジェクトに対応するクラスや属性が自動的に含まれます。

保存マークアップ

データベースにマークアップを保存する際は、useBlockProps.save() によって返されるプロパティをブロックのラッパー要素に追加することが重要です。useBlockProps.save() は、ブロッククラス名がブロックサポート API によって注入された HTML 属性に加えて正しくレンダリングされることを保証します。

クライアントでブロックを登録する次のコードを考えてみてください。ブロックを編集する際に使用されるマークアップと、ブロックがデータベースに保存される際に使用されるマークアップがどのように定義されているかに注目してください。 

  1. const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
  2. const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;
  4. registerBlockType( ..., {
  5.    edit: Edit,
  6.    save,
  7. } );

上記の コード の 完全なブロック例 を参照してください。

フロントエンドのブロックのマークアップは、クラスが自動的に適用されるため、次のようになります： 

  1. <p class="wp-block-block-development-examples-minimal-block-ca6eda">Hello World – Frontend</p>

ブロックの save 関数に追加のクラスや属性を追加したい場合は、それらを useBlockProps.save() の引数として渡す必要があります。（例を参照）

supports を任意の機能に追加すると、適切なクラスが useBlockProps.save() フックによって返されるオブジェクトに追加されます。以下の例では、段落ブロックにテキストと背景色のクラスが追加されています。 

  1. <p class="
  2.    wp-block-block-development-examples-block-supports-6aa4dd
  3.    has-accent-4-color
  4.    has-contrast-background-color
  5.    has-text-color
  6.    has-background
  7. ">Hello World</p>

この HTML を生成した 例のブロック は、ブロック開発の例 リポジトリで入手できます。

動的レンダーマークアップ

動的ブロックでは、フロントエンドのマークアップがサーバー側でレンダリングされるため、get_block_wrapper_attributes() 関数を利用して、必要なクラスと属性を出力できます。これは、save 関数内で useBlockProps.save() を使用するのと同様です。（例を参照） 

  1. <p <?php echo get_block_wrapper_attributes(); ?>>
  2.    <?php esc_html_e( 'Block with Dynamic Rendering – hello!!!', 'block-development-examples' ); ?>
  3. </p>