ブロックラッパー

Topics

  • Edit コンポーネントのマークアップ
  • Save コンポーネントのマークアップ
  • サーバー側でのマークアップのレンダー

それぞれのブロックのマークアップは、コンテナ HTML タグによってラップされます。コンテナ HTML タグは適切な属性を持つ必要があり、ブロックエディターで完全に動作し、ブロックエディターとフロントエンドの両方でレンダーされたときに適切なブロックスタイル設定を反映しなければなりません。開発者はブロックのマークアップを完全にコントロールできますし、WordPress にはブロックのマークアップのラッパーに必要な属性を追加するツールがあります。

ブロックラッパーに適切な属性を付けることは、カスタムスタイルや supports のような機能を使用する場合に、特に重要です。

supportsを使用するとプロパティのセットが生成されます。ブロックデータの一部として適切に保存されるように、これらのプロパティを手動でブロックのラッパー要素に追加する必要があります。

ブロックには3つのマークアップセットを定義できます。それぞれに特定のターゲットと目的があります。

  • ブロックエディターのため。クライアントでブロックを登録する際に registerBlockType に渡される edit React コンポーネントを通して定義されます。
  • データベース内にブロックを保存するため。クライアントでブロックを登録する際に registerBlockType に渡される save 関数を通して定義されます。
    • ブロックにダイナミックレンダーが定義されていなければ、リクエストに応じてこのマークアップがフロントエンドに返されます。
  • ブロックのマークアップを動的にレンダーするため。リクエストに応じてクライアントに返され、register_block_type の render_callback または block.json 内の render PHP ファイルで定義されます。
    • この定義があると、サーバー側で生成されたマークアップはフロントエンドに返されます。データベースに保存されたマークアップは無視されます。

edit React コンポーネントと save 関数においてブロックのラッパー要素は、ネイティブのDOM要素 (例: <div>) か、ネイティブの DOM 要素に追加の prop を転送する React コンポーネントでなければなりません。例えば、<Fragment> や <ServerSideRender> コンポーネントは使用できません。

Edit コンポーネントのマークアップ

useBlockProps() フックは @wordpress/block-editor で利用可能で、ブロックエディタに必要な属性を edit ブロックの外側のラッパーに渡せます。

特に、useBlockProps()フックは、このラッパーに以下が含まれるようにします。

  • ブロックのマークアップのための id
  • いくつかのアクセシビリティと data- 属性
  • カスタム設定を反映したクラスとインラインスタイル。デフォルトで以下を含む
    • wp-block クラス
    • ブロックの名前と名前空間を含むクラス

例えばクライアント側に、ブロックを登録する以下のようなコードがあると …

const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;

registerBlockType( ..., {
	edit: Edit
} );

(の中の上のコードを参照してください)

… ブロックエディター内のブロックのマークアップは以下のようになります。

<p 
    tabindex="0" 
    id="block-4462939a-b918-44bb-9b7c-35a0db5ab8fe" 
    role="document" 
    aria-label="Block: Minimal Gutenberg Block ca6eda" 
    data-block="4462939a-b918-44bb-9b7c-35a0db5ab8fe" 
    data-type="block-development-examples/minimal-block-ca6eda" 
    data-title="Minimal Gutenberg Block ca6eda" 
    class="
        block-editor-block-list__block 
        wp-block 
        is-selected 
        wp-block-block-development-examples-minimal-block-ca6eda
    "
>Hello World - Block Editor</p>

ブロックの Edit コンポーネントに追加するクラスや属性は、useBlockProps の引数として渡す必要があります ( を参照)。どの機能に対しても supports を追加すると、それらは useBlockProps フックが返すオブジェクトに追加されます。

Top ↑

Save コンポーネントのマークアップ

マークアップをデータベース内に保存する際には、必ず useBlockProps.save() が返すブロックの prop をラッパー要素に追加してください。useBlockProps.save() は、ブロッククラス名、そしてブロック Supports API によって注入された HTML 属性を適切にレンダリングします。

例えば、クライアントでブロックを登録する以下のコード例では、データベースで必要とされる、またデフォルトでフロントエンドに返されるマークアップを定義していて …

const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;

registerBlockType( ..., {
	edit: Edit,
	save,
} );

(の中の上のコードを参照してください)

… フロントエンドのブロックのマークアップは、次のようになります。

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

ブロックの save 関数に追加するクラスと属性は、useBlockProps.save() の引数として渡す必要があります (を参照)。

任意の機能に supports を追加すると、useBlockProps.save() フックが返すオブジェクトに適切なクラスが追加されます。

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

フロントエンドで上の HTML を生成するをチェックをしてください)

Top ↑

サーバー側でのマークアップのレンダー

ブロックのサーバー側レンダー定義にあるマークアップは get_block_wrapper_attributes() 関数を使用して、ブロックの設定を反映するために必要な属性の文字列を生成できます。を参照してください。

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

原文

最終更新日: