WordPress (Gutenberg) のブロックにて、インナーブロック(InnerBlocks)を持つ階層構造のブロックで、ルートブロック(親)の atributes 値に合わせてインナーブロック(子孫)の状態を変化(条件分岐)させたい場合、一つの方法として “ブロックコンテキスト” が利用できます。
例えば、カラムスタイルの料金表や定義リストなど、同じスタイルで分割されるインナーブロックを持つようなブロックの場合、ベースとなる背景カラーやテキストカラーをルートブロックで一括で指定したいときなどに利用できます。
ブロックコンテキストは、ルートブロックの block.json にて継承させる属性を providesContext プロパティで宣言しておき、インナーブロックの block.json にて usesContext プロパティでルートブロックで宣言した同じ属性を指定することで、ルートブロックの属性の状態をインナーブロックから参照できます。
...
"name": "my-plugin/root-block",
"attributes": {
"commonTextColor": {
"typ": "string"
},
"commonBackgroundColor": {
"type": "string"
}
},
"providesContext": {
"my-plugin/commonTextColor": "commonTextColor",
"my-plugin/commonBackgroundColor": "commonBackgroundColor"
}
...
...
"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 ] としてコンテキスト値を利用します。
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;
上記の場合、インナーブロックでもテキストカラーと背景カラーの属性が与えられており、これらが指定されていればインナーブロックの配色を優先し、値がなければルートブロックで指定されている共通のテキストカラーと背景カラーを利用するようになります。
