ブロックコンテキストの定義

ブロックコンテキストは、ブロックの登録設定で定義されます。ブロックはコンテキスト値を提供するか、継承したい値を消費することができます。

ブロックコンテキストの提供

ブロックは、登録設定に providesContext プロパティを割り当てることでコンテキスト値を提供できます。これは、コンテキスト名をブロック自身の属性の1つにマッピングするオブジェクトです。その属性値に対応する値は、子孫ブロックに利用可能であり、同じコンテキスト名で参照できます。現在、ブロックコンテキストはブロック自身の属性から派生した値のみをサポートしています。将来的には、追加のコンテキスト値のソースをサポートするように拡張される可能性があります。 

  1. attributes: {
  2.    recordId: {
  3.    type: 'number',
  4.    },
  5.    },
  7.    providesContext: {
  8.    'my-plugin/recordId': 'recordId',
  9.    },

完全な例については、以下のセクションを参照してください。

名前空間の含め方

上記の例に見られるように、他のプラグインやWordPressが提供するデフォルトのコンテキスト値との潜在的な競合を避けるために、コンテキストキーの名前の一部として名前空間を含めることをお勧めします。コンテキストの名前空間は、プラグインに特有であるべきであり、ほとんどの場合、ブロック自体の名前で使用されるものと同じにすることができます。

ブロックコンテキストの消費

ブロックは、登録設定に usesContext プロパティを割り当てることで、祖先プロバイダーからコンテキスト値を継承できます。これは、ブロックが継承したいコンテキスト名の配列として割り当てる必要があります。 

  1. registerBlockType('my-plugin/record-title', {
  2.    title: 'Record Title',
  3.    category: 'widgets',
  5.    usesContext: ['my-plugin/recordId'],

ブロックコンテキストの使用

ブロックが継承したいコンテキストを定義すると、edit (JavaScript) および render_callback (PHP) の実装でアクセスできます。これは、ブロックのために定義されたコンテキスト値のオブジェクト (JavaScript) または連想配列 (PHP) として提供されます。コンテキスト値は、ブロックがその値を継承したいと明示的に定義した場合にのみ利用可能になります。

注意: ブロックコンテキストは save には利用できません。

JavaScript

  1. registerBlockType('my-plugin/record-title', {
  3.    edit({ context }) {
  4.    return 'The record ID: ' + context['my-plugin/recordId'];
  5.    },

PHP

ブロックのコンテキスト値は、context プロパティから $block 引数の3番目の引数として render_callback 関数に渡されます。 

  1. register_block_type( 'my-plugin/record-title', array(
  2.    'render_callback' => function( $attributes, $content, $block ) {
  3.    return 'The current record ID is: ' . $block->context['my-plugin/recordId'];
  4.    },
  5. ) );

例

  • 1. record ブロックを作成します。
  1. npm init @wordpress/block --namespace my-plugin record
  2. cd record
  • 1. src/index.js を編集します。recordId 属性と providesContext プロパティを registerBlockType 関数に挿入し、record-title ブロックの登録を下部に追加します:
  1. registerBlockType( 'my-plugin/record', {
  2.    // ... cut ...
  4.    attributes: {
  5.    recordId: {
  6.    type: 'number',
  7.    },
  8.    },
  10.    providesContext: {
  11.    'my-plugin/recordId': 'recordId',
  12.    },
  14.    /**
  15.      * @see ./edit.js
  16.    */
  17.    edit: Edit,
  19.    /**
  20.      * @see ./save.js
  21.    */
  22.    save,
  23. } );
  25. registerBlockType( 'my-plugin/record-title', {
  26.    title: 'Record Title',
  27.    category: 'widgets',
  29.    usesContext: [ 'my-plugin/recordId' ],
  31.    edit( { context } ) {
  32.    return 'The record ID: ' + context[ 'my-plugin/recordId' ];
  33.    },
  35.    save() {
  36.    return null;
  37.    },
  38. } );
  • 1. src/edit.js を record ブロックのために編集します。Edit 関数を次のコードに置き換えます:
  1. import { TextControl } from '@wordpress/components';
  2. import { InnerBlocks } from '@wordpress/block-editor';
  4. export default function Edit( props ) {
  5.    const MY_TEMPLATE = [ [ 'my-plugin/record-title', {} ] ];
  6.    const {
  7.    attributes: { recordId },
  8.    setAttributes,
  9.    } = props;
  10.    return (
  11.    <div>
  12.    <TextControl
  13.    label={ __( 'Record ID' ) }
  14.    value={ recordId }
  15.    onChange={ ( val ) =>
  16.    setAttributes( { recordId: Number( val ) } )
  17.    }
  18.    />
  19.    <InnerBlocks template={ MY_TEMPLATE } templateLock="all" />
  20.    </div>
  21.    );
  22. }
  • 1. src/save.js を record ブロックのために編集します。save 関数を次のコードに置き換えます:
  1. export default function save( props ) {
  2.    return <p>The record ID: { props.attributes.recordId }</p>;
  3. }
  • 1. 新しい投稿を作成し、record ブロックを追加します。テキストボックスに数字を入力すると、下の record-title ブロックに同じ数字が表示されます。

ブロックコンテキストの例