サポート

ブロックは「ブロックサポート」API を使用して、特定の機能のサポートを宣言できます。

任意の機能をオプトインすると、ブロックに追加の属性が登録され、属性を操作する UI が提供されます。

ブロックに属性を適用するために、生成されたプロパティがブロックのラッパー要素に追加されます。これらのプロパティは useBlockProps フックから返されるオブジェクトに追加されます。

BlockEdit 関数:

function BlockEdit() {
	const blockProps = useBlockProps();

	return <div { ...blockProps }>Hello World!</div>;
}

save 関数:

function BlockEdit() {
	const blockProps = useBlockProps.save();

	return <div { ...blockProps }>Hello World!</div>;
}

PHP の render_callback でレンダーされるダイナミックブロックでは、get_block_wrapper_attributes() 関数を使用できます。生成されたすべてのプロパティを含む文字列が返されます。これをラップするブロック要素の開始タグに出力する必要があります。

render_callback 関数:

function render_block() {
	$wrapper_attributes = get_block_wrapper_attributes();

	return sprintf(
		'<div %1$s>%2$s</div>',
		$wrapper_attributes,
		'Hello World!'
	);
}

anchor

タイプ: boolean
デフォルト値: false

anchor を使用するとページ上の特定のブロックに直接リンクできます。このプロパティはブロックの ID を定義するフィールドと、ダイレクトリンクをコピーするボタンをを追加します。重要: ダイナミックブロックでは、まだ動作しません。

// anchor リンクのサポートを宣言
supports: {
    anchor: true
}

align

タイプ: boolean または array
デフォルト値: false

このプロパティはブロックの配置を変更するブロックコントロールを追加します。

supports: {
    // ブロックの配置のサポートを宣言
    // 以下のすべてのオプションのサポートを追加
    // left (左寄せ), center (中央寄せ), right (右寄せ), wide (幅広), full (全幅)
    align: true
}

supports: {
    // 特定の配置のオプションのサポートを宣言
    align: [ 'left', 'right', 'full' ]
}

ブロックが align のサポートを宣言すると、その attributes 定義は、string タイプの align 属性を含むように拡張されます。デフォルトでは、配置は割り当てられません。ブロックにデフォルトの配置を適用するには、自身の align 属性をデフォルトとともに指定します。例えば

attributes: {
    align: {
        type: 'string',
        default: 'right'
    }
}

alignWide

タイプ: boolean
デフォルト値: true

このプロパティを使用するとテーマの幅広揃えを有効化できます。単一ブロックに対してこの機能を無効化するにはこのフラグに false を設定してください。

supports: {
    // 幅広揃えサポートを除去
    alignWide: false
}

ariaLabel

タイプ: boolean
デフォルト値: false

要素にアクセス可能なラベルを定義できます。このプロパティを使用すると、UI フィールドを公開せずに、ブロックの aria-label を定義できます。

supports: {
	// aria ラベルのサポートを追加
	ariaLabel: true
}

background

注意: WordPress 6.5以降

タイプ: Object
デフォルト値: null
サブプロパティ
- backgroundImage: タイプ boolean, デフォルト値 false
- backgroundSize: タイプ boolean, デフォルト値 false

この値はブロックが、背景に関する CSS スタイルプロパティのいくつかをサポートすることを通知します。テーマがサポートを宣言すると、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

backgroundImage は、ユーザーが背景画像を選択できる UI コントロールを追加します。 backgroundSize は、背景画像の位置を選択するための FocalPointPicker を追加し、ユーザーが背景のサイズ (cover、contain、fixed) を選択できるようにします。

supports: {
	background: {
		backgroundImage: true // 背景画像コントールの 有効化
		backgroundSize: true // 背景画像 + サイズコントロールの有効化
	}
}

ブロックが特定の背景プロパティのサポートを宣言すると、その attributes 定義は、style 属性を含むように拡張されます。

背景画像が選択されると、画像データは style.background.backgroundImage に保存されます。

背景画像が選択され、その位置やサイズが変更されると、background-position は style.background.backgroundPosition 属性に、background-size は style.background.backgroundSize 属性に保存されます。

style: タイプ object の属性。デフォルトの割り当てなし。backgroundImage または backgroundSize のサポートを宣言すると追加される。ユーザーが設定したカスタム値を格納する。
- background: タイプ object の属性。
  - backgroundImage: タイプ object の属性。選択した画像の情報を含む
    - url: タイプ string。画像への URL
    - id: タイプ int。添付メディア ID
    - source: タイプ string。現時点で可能な値は file のみ
    - title: タイプ string。添付メディアのタイトル
  - backgroundPosition: タイプ string の属性。背景画像の位置を定義する。FocalPointPicker で選択され、CSS 内で background-position 値として使用される。
  - backgroundSize: タイプ string の属性。CSS background-size 値を定義する。

ブロックはデフォルトの背景画像、位置、サイズを適用できます。これにはブロックの属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        background: {
            backgroundImage: {
				"url":"IMAGE_URL"
			}
			backgroundPosition:"50% 50%",
            backgroundSize: "cover"
        }
    }
}

className

タイプ: boolean
デフォルト値: true

デフォルトでは保存したマークアップの root 要素にクラス .wp-block-your-block-name が追加されます。この結果、テーマやプラグインがブロックをスタイリングする際に利用可能な一貫した機構が実現します。何らかの理由によりこのクラスをマークアップに付加したくない場合、この機能を無効化できます。

supports: {
    // className 生成サポートを除去
    className: false
}

color

タイプ: Object
デフォルト値: null
サブプロパティ:
- background: タイプ boolean, デフォルト値 true
- button: タイプ boolean, デフォルト値 false
- enableContrastChecker: タイプ boolean, デフォルト値 true
- gradients: タイプ boolean, デフォルト値 false
- heading: タイプ boolean, デフォルト値 false
- link: タイプ boolean, デフォルト値 false
- text: タイプ boolean, デフォルト値 true

この値はブロックが色に関連するプロパティをサポートすることを通知します。この値があると、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

注意: background キーとtext キーのデフォルト値は true です。color プロパティを宣言するとこれらも有効化されます。

supports: {
    color: {
		// 同時にテキスト UI コントロールと背景 UI コントロールも有効化
        gradients: true // グラデーション UI コントロールを有効化
    }
}

これらは個別に無効化できます。

supports: {
    color: { // テキスト UI コントロールは有効
        background: false, // 背景 UI コントロールを無効化
        gradients: true // グラデーション UI コントロールを有効化
    }
}

color.background

このプロパティは、ユーザーがブロックに背景色を適用できる UI コントロールを追加します。

color サポートを宣言すると、background プロパティは text プロパティと共に自動で有効化されます。このため単に color を設定すれば、背景色は有効化されます。

supports: {
    color: true // background と text の両方を有効化
}

他の color サポートは有効化しながら background サポートを無効化するには、false を設定します。

supports: {
    color: {
        // background サポートを無効化。テキスト色のサポートは引き続き有効
        background: false
    }
}

ブロックが color.background のサポートを宣言すると、その attributes 定義は、2つの新しい属性 backgroundColor と style を含むように拡張されます。

backgroundColor: タイプ string の属性。デフォルトの割り当てなし。プリセットのリストからユーザーが背景色を選択すると、プリセットのスラッグが backgroundColor 属性に保存されます。背景色プリセットは editor-color-palette テーマサポートがソースです。ブロックにデフォルトのプリセット背景色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    backgroundColor: {
        type: 'string',
        default: 'some-preset-background-slug',
    }
}

style: タイプ object の属性。デフォルトの割り当てなし。カスタムカラーピッカーを使用するなどして、カスタム背景色を選択すると、カスタムカラー値が style.color.background 属性に保存されます。ブロックにデフォルトのカスタム背景色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            color: {
                background: '#aabbcc',
            }
        }
    }
}

color.button

注意: WordPress 6.5以降

このプロパティは、ユーザーがブロック内ののボタンの色 (テキスト、背景) を設定できるブロックコントロールを追加します。ボタンの色はデフォルトでは無効です。

ボタンの色のサポートを有効化するには、color.button に true を設定します。

supports: {
	color: {
		button: true
	}
}

ボタンの色のプリセットは editor-color-palette テーマサポートがソースです。

ブロックが color.button のサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: タイプ object の属性。デフォルトの割り当てなし。ボタンの色が選択されると、色の値は style.elements.button.color.text 属性と style.elements.button.color.background 属性に保存されます。ブロックにデフォルトのボタンの色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            elements: {
                button: {
                    color: {
                        text: 'var:preset|color|contrast',
                        background: '#000000',
                    }
                }
            }
        }
    }
}

color.enableContrastChecker

注意: WordPress 6.5以降

ブロックエディター UI にコントラストチェッカーウィジェットを表示するかどうかを決定します。

コントラストチェッカーは、ブロックが色のサポートを宣言している場合にのみ表示されます。色の組み合わせの可読性をテストし、潜在的な問題がある場合には警告します。このプロパティはデフォルトで有効です。明示的に無効化するには false を設定します。

supports: {
	color: {
		enableContrastChecker: false
	}
}

color.__experimentalDuotone

注意: WordPress 6.3から非推奨となりました。

このプロパティは filter.duotone で置換されました。

color.gradients

このプロパティは、ユーザーがブロックにグラデーション背景を適用できる UI コントロールを追加します。

supports: {
    color: {
        gradients: true,
        // グラデーションと一緒にデフォルト値を使いたくない場合は、無効化する必要がある
        background: false,
        text: false
    }
}

グラデーションプリセットは editor-gradient-presets テーマサポートがソースです。

ブロックが color.gradient のサポートを宣言すると、その attributes 定義は、2つの新しい属性 gradient と style を含むように拡張されます。

gradient: タイプ string の属性。デフォルトの割り当てなし。プリセットのリストからユーザーがグラデーションを選択すると、プリセットのスラッグが gradient 属性に保存されます。ブロックにデフォルトのプリセットグラデーションを適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    gradient: {
        type: 'string',
        default: 'some-preset-gradient-slug',
    }
}

style: タイプ object の属性。デフォルトの割り当てなし。カスタムグラデーションピッカーを使用するなどして、カスタムグラデーションを選択すると、カスタムグラデーション値が style.color.gradient 属性に保存されます。ブロックにデフォルトのカスタムグラデーションを適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            color: {
                gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
            }
        }
    }
}

color.heading

注意: WordPress 6.5以降

このプロパティは、ブロック内の見出しの色を設定できるブロックコントロールを追加します。デフォルトでは見出しの色は無効です。

見出しの色のサポートを有効化するには、color.heading に true を設定します。

supports: {
	color: {
		// 見出しの色のサポートを有効化
		heading: true
	}
}

見出しの色のプリセットは editor-color-palette テーマサポートがソースです。

ブロックが color.heading のサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: タイプ object の属性。デフォルトの割り当てなし。見出しの色が選択されると、色の値は style.elements.heading.color.text 属性と style.elements.heading.color.background 属性に保存されます。ブロックにデフォルトの見出しの色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            elements: {
                heading: {
                    color: {
                        text: 'var:preset|color|contrast',
                        background: '#000000',
                    }
                }
            }
        }
    }
}

color.link

このプロパティは、ユーザーがブロック内のリンクの色を設定できるブロックコントロールを追加します。デフォルトではリンクの色は無効です。

リンクの色のサポートを有効化するには、color.link に true を設定します。

supports: {
	color: {
		link: true
	}
}

リンクの色のプリセットは、editor-color-palette テーマサポートをソースとしています。

ブロックが color.link のサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: タイプ object の属性。デフォルトの割り当てなし。リンクの色が選択されると、色の値が style.elements.link.color.text 属性と style.elements.link.:hover.color.text 属性に格納されます。ブロックにデフォルトのリンクの色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            elements: {
                link: {
                    color: {
                        text: 'var:preset|color|contrast',
                    },
                    ":hover": {
                        color: {
                            text: "#000000"
                        }
                    }
                }
            }
        }
    }
}

color.text

このプロパティは、ユーザーがブロック内のテキスト色を設定できるブロックコントロールを追加します。

color サポートを宣言すると、text プロパティは background プロパティとともに自動で有効化されます。このため単に color を設定すれば、テキスト色は有効化されます。

supports: {
    color: true // background と text を有効化。link は有効化しない。
}

他の color サポートは有効化しながら text サポートを無効化するには、color.text に false を設定します。

supports: {
    color: {
        // text color サポートを無効化。
        text: false
    }
}

テキスト色プリセットは editor-color-palette テーマサポートがソースです。

ブロックが color.text のサポートを宣言すると、その attributes 定義は、2つの新しい属性 textColor と style を含むように拡張されます。

textColor: タイプ string の属性。デフォルトの割り当てなし。プリセットのリストからユーザーがテキスト色を選択すると、プリセットのスラッグが textColor 属性に保存されます。ブロックにデフォルトのプリセットテキスト色を適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    textColor: {
        type: 'string',
        default: 'some-preset-text-color-slug',
    }
}

style: タイプ object の属性。デフォルトの割り当てなし。カスタムカラーピッカーを使用するなどして、カスタムテキスト色を選択すると、カスタムカラー値が style.color.gradient 属性に保存されます。ブロックにデフォルトのカスタムテキスト色を適用するには、自身の属性をデフォルトともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            color: {
                text: '#aabbcc',
            }
        }
    }
}

customClassName

タイプ: boolean
デフォルト値: true

このプロパティはブロックのラッパーのカスタム classsName を定義するフィールドを追加します。

supports: {
    // カスタム className サポートを除去
    customClassName: false
}

dimensions

注意: WordPress 6.2以降

タイプ: Object
デフォルト値: null
サブプロパティ:
- minHeight: タイプ boolean, デフォルト値 false

この値は、ブロックが寸法に関連する CSS スタイルプロパティのいくつかをサポートすることを通知します。通知すると、テーマがサポートを宣言していれば、ブロックエディターはユーザーが値を設定できる UI コントロールを表示します。

supports: {
    dimensions: {
        minHeight: true // 最小高コントロールを有効化
    }
}

ブロックが特定の dimensions プロパティのサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: デフォルトの割り当てのない object タイプの属性。aspectRatio または minHeight のサポートが宣言されると追加され、ユーザーが設定したカスタム値を保存します。例えば

attributes: {
    style: {
        dimensions: {
            aspectRatio: "16/9",
            minHeight: "50vh"
        }
    }
}

filter

タイプ: Object
デフォルト値: null
サブプロパティ:
- duotone: タイプ boolean, デフォルト値 false

この値はブロックがフィルターに関連するプロパティのいくつかをサポートすることを通知します。サポートする場合、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

filter.duotone

このプロパティは、ユーザーがブロックまたはブロックの一部にデュオトーンフィルタを適用できる UIコントロールを追加します。

supports: {
    filter: {
        // デュオトーンサポートを有効化
        duotone: true
    }
},
selectors: {
    filter: {
        // 画像ブロック内の img 要素にフィルターを適用
        duotone: '.wp-block-image img'
    }
}

セレクタ selectors.filter.duotone を設定することで、ブロック内の要素にフィルタを適用できます。

デュオトーンプリセットは、theme.json の color.duotone がソースです。

ブロックが filter.duotone のサポートを宣言すると、その attributes 定義は、style 属性を含むように拡張されます。

style: タイプ object の属性。デフォルトの割り当てなし。ブロックにデフォルトのデュオトーンカラーを適用するには自身の属性をデフォルトともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            color: {
                duotone: [
                    '#FFF',
                    '#000'
                ]
            }
        }
    }
}

html

タイプ: boolean
デフォルト値: true

デフォルトではブロックのマークアップは個別に編集できます。この動きを止めるには html に false を設定してください。

supports: {
    // HTML モードサポートを除去
    html: false
}

inserter

タイプ: boolean
デフォルト値: true

デフォルトではすべてのブロックはインサーター、ブロック変換メニュー、スタイルブック等に表示されます。ブロックをすべてのユーザインターフェースの部品に表示せず、プログラム的にのみ挿入可能にするには inserter に false を設定してください。

supports: {
    // このブロックをインサーターに表示しない
    inserter: false
}

interactivity

タイプ: boolean または object
デフォルト値: false
サブプロパティ:
- clientNavigation: タイプ boolean, デフォルト値 false
- interactive: タイプ boolean, デフォルト値 false

ブロックが Interactivity API 機能を使用しているかどうかを示します。

clientNavigation サブプロパティは、ブロックが Interactivity API のクライアントサイドナビゲーションに対応しているかどうかを示します。ブロックがインタラクティブでない、または、Interactivity API を使用してインタラクティブな場合にのみ true に設定します。ブロックがインタラクティブだが、バニラ JS、jQuery、または Interactivity API 以外の JS フレームワークやライブラリを使用している場合は false に設定します。

interactive サブプロパティは、ブロックが Interactivity API ディレクティブを使用しているかどうかを示します。

layout

タイプ: boolean または Object
デフォルト値: null
サブプロパティ:
- default: タイプ Object, デフォルト値 null
- allowSwitching: タイプ boolean, デフォルト値 false
- allowEditing: タイプ boolean, デフォルト値 true
- allowInheriting: タイプ boolean, デフォルト値 true
- allowSizingOnChildren: タイプ boolean, デフォルト値 false
- allowVerticalAlignment: タイプ boolean, デフォルト値 true
- allowJustification: タイプ boolean, デフォルト値 true
- allowOrientation: タイプ boolean, デフォルト値 true
- allowCustomContentAndWideSize: タイプ boolean, デフォルト値 true

この値は内部ブロックのコンテナとなるブロックにのみ適用されます。true に設定するとレイアウトタイプは flow になります。その他のレイアウトタイプでは、default オブジェクト内で明示的に type を設定する必要があります。

layout.default

タイプ: Object
デフォルト値: null

type プロパティを設定することで、ブロックのデフォルトのレイアウトタイプを定義できます。また、そのレイアウトタイプに固有のプロパティのデフォルト値も定義できます。たとえば、flex レイアウトに対してデフォルト値に flexWrap を設定できます。

layout.allowSwitching

タイプ: boolean
デフォルト値: false

既存のすべてのレイアウトタイプを切り替えられるスイッチャーコントロールを公開します。

layout.allowEditing

タイプ: boolean
デフォルト値: true

ブロックサイドバーのレイアウトコントロールの表示を決定できます。false に設定すると、レイアウトコントロールは表示されません。

layout.allowInheriting

タイプ: boolean
デフォルト値: true

flow レイアウトタイプのみ。「コンテンツ幅を使用するインナーブロック」トグルの表示を決定します。

layout.allowSizingOnChildren

タイプ: boolean
デフォルト値: false

flex レイアウトタイプのみ。フレックスブロックのすべての子ブロックのサイズコントロール (Fit/Fill/Fixed) の表示を決定します。

layout.allowVerticalAlignment

タイプ: boolean
デフォルト値: true

flex レイアウトタイプのみ。ブロックツールバーの縦方向の位置揃えコントロールの表示を決定します。

layout.allowJustification

タイプ: boolean
デフォルト値: true

flex レイアウトタイプのみ。ブロックツールバーとブロックサイドバーの配置コントロールの表示を決定します。制約レイアウトタイプでは、ブロックサイドバーの配置コントロールの表示を決定します。

layout.allowOrientation

タイプ: boolean
デフォルト値: true

flex レイアウトタイプのみ。ブロックツールバーの方向コントロールの表示を決定します。

layout.allowCustomContentAndWideSize

タイプ: boolean
デフォルト値: true

constrained レイアウトタイプのみ。ブロックサイドバーのカスタムコンテンツとワイドサイズコントロールの表示を決定します。

lock

タイプ: boolean
デフォルト値: true

ブロックは、ロック状態を切り替える機能を無効化したい場合があります。デフォルトでは、ブロックの「オプション」ドロップダウンから、ユーザーによるロック、ロック解除が可能です。この動作を無効にするには、lock を false に設定します。

supports: {
	// ロック UI のサポートを削除。
	lock: false
}

multiple

タイプ: boolean
デフォルト値: true

非 multiple ブロックは各投稿に1回だけ挿入できます。たとえば組み込みの「続きを読む」ブロックは、編集中の投稿にすでに存在する場合は挿入できません。非 multiple ブロックのアイコンはクリックできないよう自動的にグレイアウトされ、複数インスタンスの作成を回避します。

supports: {
    // ブロックは投稿ごとに1度だけ使用できる
    multiple: false
}

position

注意: WordPress 6.2以降

タイプ: Object
デフォルト値: null
サブプロパティ:
- sticky: タイプ boolean, デフォルト値 false

この値は、ブロックが位置に関連する CSS スタイルプロパティのいくつかをサポートすることを通知します。通知すると、テーマがサポートを宣言していれば、ブロックエディタはユーザーが値を設定できる UI コントロールを表示します。

注意: sticky 位置コントロールは、現在のところ、ドキュメントのルートレベルに設定されたブロックに対してのみ有効です。ブロックを sticky 位置に設定すると、ユーザがページをスクロールしたときに、ブロックは最も近い親に張り付きます。

supports: {
    position: {
        sticky: true // sticky 位置の選択を有効化
    }
}

ブロックが特定の position プロパティのサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: デフォルトの割り当てのない object タイプの属性。これは sticky サポートが宣言されると追加されます。ユーザーが設定したカスタム値が格納されます。例えば

attributes: {
    style: {
        position: {
            type: "sticky",
            top: "0px"
        }
    }
}

renaming

注意: WordPress 6.5以降

タイプ: boolean
デフォルト値: true

デフォルトではユーザーは、ブロックの「オプション」ドロップダウン、または「高度な設定」パネルからブロックの名前を変更できます。この動作を無効化するには、renaming を false に設定してください。

supports: {
	// エディター内でのブロックの名前の変更を許可しない
	renaming: false,
}

reusable

タイプ: boolean
デフォルト値: true

ブロックを再利用可能なブロックに変換する機能を無効化したい場合があります。デフォルトではすべてのブロックは再利用可能ブロックに変換できます。reusable サポートを false に設定すると、再利用可能ブロックするに変換するオプションが表示されません。

supports: {
    // 再利用可能ブロックへの変換を許可しない
    reusable: false,
}

shadow

注意: WordPress 6.5以降

タイプ: boolean
デフォルト値: false

このプロパティは、ユーザーがブロックにボックスシャドウを設定できるブロックコントロールを追加します。シャドウはデフォルトでは無効です。

supports: {
	shadow: true // box-shadow ピッカーを有効化
}

シャドウプリセットは theme.json 内に定義されたシャドウプリセットがソースです。

ブロックが shadow のサポートを宣言すると、その attributes 定義は style 属性を含むように拡張されます。

style: タイプ object の属性。デフォルトの割り当てなし。シャドーが選択されると、色の値は style.shadow に保存されます。ブロックにデフォルトのシャドーを適用するには、自身の属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            shadow: "var:preset|shadow|deep"
        }
    }
}

spacing

タイプ: Object
デフォルト値: null
サブプロパティ:
- margin: タイプ boolean または array, デフォルト値 false
- padding: タイプ boolean または array, デフォルト値 false
- blockGap: タイプ boolean または array, デフォルト値 false

この値はブロックがスペースに関連する CSS スタイルプロパティをサポートすることを通知します。テーマがサポートを宣言すると、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

supports: {
    spacing: {
        margin: true,  // margin UI コントロールを有効化
        padding: true, // padding UI コントロールを有効化
        blockGap: true,  // `layout` を使用するブロックに対して block spacing UI コントロールを有効化
    }
}

ブロックが特定の spacing プロパティのサポートを宣言すると、その attributes 定義は、style 属性を含むよう拡張されます。

style: デフォルトの割り当てのない object タイプの属性。margin または padding サポートを宣言すると追加されます。ユーザーが設定したカスタム値が格納されます。例えば

attributes: {
    style: {
        margin: 'value',
        padding: {
            top: 'value',
        }
    }
}

spacing プロパティは構成可能なサイド、’top’、’right’、’bottom’、’left’ の配列を定義することもできます。任意のサイドが UI コントロールに定義されると、そのサイドが表示されます。

軸方向のサイドは vertical と horizontal で定義され、軸方向のペアごとに1つの UI コントロールが表示されます (例えば、vertical は上辺と下辺の両方を制御します)。spacing プロパティは、任意の個別のサイド、または、軸方向のサイドをサポートできますが、両方を混ぜることはできません。

注意: blockGap は軸方向のサイド vertical と horizontal を取り、列値と行値のスペースを調整します。blockGap は任意方向のサイドをサポートしません。

supports: {
    spacing: {
        margin: [ 'top', 'bottom' ],             // 任意のサイドのマージンを有効化する。
        padding: true,                           // すべてのサイドのパディングを有効化する。
        blockGap: [ 'horizontal', 'vertical' ],  // 軸方向 (列/行) のブロックのスペース制御を有効化する。
    }
}

typography

タイプ: Object
デフォルト値: null
サブプロパティ:
- fontSize: タイプ boolean、デフォルト値 false
- lineHeight: タイプ boolean、デフォルト値 false

このオブジェクトが存在すると、ブロックがいくつかのタイポグラフィ関連のプロパティをサポートすることを通知します。サポートする場合、ブロックエディタにはタイポグラフィのUIが表示され、ユーザーは値を制御できます。

supports: {
    typography: {
        // font-size のサポートと UI コントロールを有効化
        fontSize: true,
        // line-height のサポートと UI コントロールを有効化
        lineHeight: true,
    },
}

typography.fontSize

タイプ: boolean
デフォルト値: false

この値はブロックが font-size CSS スタイルプロパティをサポートすることを通知します。サポートする場合、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

このコントロール内に表示される値は editor-font-sizes テーマサポートでテーマが宣言したもの、または指定がなければデフォルトのものになります。

supports: {
    typography: {
        // font-size のサポートと UI コントールの有効化
        fontSize: true,
    },
}

ブロックが fontSize サポートを宣言すると、その attributes 定義は、新しい属性 fontSize と style を含むように拡張されます。

fontSize: string タイプの属性で、デフォルトの割り当てはありません。ユーザーが選択したプリセット値のセットを保存します。ブロックは自身の fontSize 属性とデフォルトを指定することで、デフォルトの fontSize を適用できます。例えば

attributes: {
    fontSize: {
        type: 'string',
        default: 'some-value',
    }
}

style: object タイプの属性で、デフォルトの割り当てはありません。ユーザーが設定したカスタム値が格納され、色などの他のブロックサポートと共有されます。ブロックは自身の style 属性とデフォルトを指定することで、デフォルトのスタイルを適用できます。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            typography: {
                fontSize: 'value'
            }
        }
    }
}

typography.lineHeight

タイプ: boolean
デフォルト値: false

この値はブロックが line-height CSS スタイルプロパティをサポートすることを通知します。サポートする場合、テーマがサポートを宣言すると、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。

supports: {
    typography: {
        // line-height のサポートと UI コントロールを有効化
        lineHeight: true,
    },
}

ブロックが lineHeight プロパティのサポートを宣言すると、その attributes 定義は、新しい属性 style を含むように拡張されます。style は object タイプの属性で、デフォルトの割り当てはありません。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の style 属性とデフォルトを指定することで、デフォルトの style を適用できます。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            typography: {
                lineHeight: 'value'
            }
        }
    }
}

typography.textAlign

注意: WordPress 6.6以降

タイプ: boolean or array
デフォルト値: false

このプロパティは、ブロックのテキスト配置を変更できるブロックツールバーコントロールを追加します。

supports: {
    typography: {
        // ブロックのテキスト配置のサポートを宣言
        // 以下のすべてのオプションのサポートを追加
        // left (左寄せ), center (中央寄せ), right (右寄せ).
        textAlign: true
    }
}

supports: {
    typography: {
        // 特定のテキスト配置オプションのサポートを宣言
        textAlign: [ 'left', 'right' ]
    }
}

ブロックが textAlign のサポートを宣言すると、その attributes の定義は、デフォルトの割り当てのない、object タイプの新しい属性 style を含むように拡張されます。これはユーザーが設定したカスタム値を保存します。ブロックにデフォルトのスタイルを適用するには、自身の style 属性をデフォルトとともに指定します。例えば

attributes: {
    style: {
        type: 'object',
        default: {
            typography: {
                textAlign: 'value'
            }
        }
    }
}

splitting

true に設定すると、Enter はブロックを2つのブロックに分割します。注意: これは単一の RichTextフィールドを持つ、段落や見出しのような単純なテキストブロックにのみ有効です。edit 関数内の RichText は identifier prop を持ち、テキストの attribute キーとマッチしなければなりません。この結果、正しく選択を更新し、どこを分割すべきかがわかります。

原文

この投稿内