[WP]インナーブロックからルートブロックの attributes を参照する方法

WordPress (Gutenberg) のブロックにて、インナーブロック(InnerBlocks)を持つ階層構造のブロックで、ルートブロック(親)の atributes 値に合わせてインナーブロック(子孫)の状態を変化(条件分岐)させたい場合、一つの方法として “ブロックコンテキスト” が利用できます。

例えば、カラムスタイルの料金表や定義リストなど、同じスタイルで分割されるインナーブロックを持つようなブロックの場合、ベースとなる背景カラーやテキストカラーをルートブロックで一括で指定したいときなどに利用できます。

ブロックコンテキストは、ルートブロックの block.json にて継承させる属性を providesContext プロパティで宣言しておき、インナーブロックの block.json にて usesContext プロパティでルートブロックで宣言した同じ属性を指定することで、ルートブロックの属性の状態をインナーブロックから参照できます。

block.jsonルートブロック

...
"name": "my-plugin/root-block",
"attributes": {
    "commonTextColor": {
        "typ": "string"
    },
    "commonBackgroundColor": {
        "type": "string"
    }
},
"providesContext": {
    "my-plugin/commonTextColor": "commonTextColor",
    "my-plugin/commonBackgroundColor": "commonBackgroundColor"
}
...

block.jsonインナーブロック(子孫)

...
"name": "my-plugin/child-block",
"attributes": {
    "commonTextColor": {
        "typ": "string"
    },
    "commonBackgroundColor": {
        "type": "string"
    }
},
"usesContext": [
    "my-plugin/commonTextColor",
    "my-plugin/commonBackgroundColor"
],
"parent": [
    "my-plugin/root-block"
],
....

上記の場合、コンテキストのキーとして my-plugin/commonTextColor と my-plugin/commonBackgroundColor の２つを割り当てています。

キーは他のキーとの重複を避けるため、通常はプラグインの名前空間(上記の場合、my-plugin )を先頭に付けたものを指定します。

あとは、インナーブロックの edit.js にて props.context[ contextKey ] としてコンテキスト値を利用します。

edit.jsonインナーブロック(子孫)

const Edit = props => {
    const {
        attributes: {
            commonTextColor,
            commonBackgroundColor,
        },
    setAttributes
    } = props;

    // インナーブロックで個別にカラーが指定されていなければルートブロックで指定されたカラーを利用
    const textColor = commonTextColor || props.context[ 'my-plugin/commonTextColor' ];
    const backgroundColor = backgroundColor || props.context[ 'my-plugin/backgroundColor' ];
    ...
}
export default Edit;

上記の場合、インナーブロックでもテキストカラーと背景カラーの属性が与えられており、これらが指定されていればインナーブロックの配色を優先し、値がなければルートブロックで指定されている共通のテキストカラーと背景カラーを利用するようになります。

コンテキスト

ブロックは「ブロックコンテキスト」を使用して、継承先のブロックでも消費可能な値を提供できます。子や孫のブロック…