サポート
Topics
ブロックは「ブロックサポート」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
サポートを宣言するとブロック属性定義が拡張され、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
}
className
- タイプ:
boolean
- デフォルト値:
true
デフォルトでは保存したマークアップの root 要素にクラス .wp-block-your-block-name
が追加されます。この結果、テーマやプラグインがブロックをスタイリングする際に利用可能な一貫した機構が実現します。何らかの理由によりこのクラスをマークアップに付加したくない場合、この機能を無効化できます。
supports: {
// className 生成サポートを除去
className: false
}
color
- タイプ:
Object
- デフォルト値: null
- サブプロパティ:
background
: タイプboolean
, デフォルト値true
__experimentalDuotone
: タイプstring
, デフォルト値なしgradients
: タイプ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 コントロールを追加します。ユーザーは UI コントロールを使用してブロックに背景色を適用できます。
color サポートを宣言すると、background プロパティは text プロパティと共に自動で有効化されます。このため単に color を設定すれば、背景色は有効化されます。
supports: {
color: true // background と text の両方を有効化
}
他の color サポートは有効化しながら background サポートを無効化するには、false
を設定します。
supports: {
color: {
// background サポートを無効化。テキスト色のサポートは引き続き有効
background: false
}
}
ブロックが color.background
のサポートを宣言すると、属性定義が拡張され、2つの新しい属性 backgroundColor
と style
が含まれます。
backgroundColor
: タイプstring
の属性。デフォルト値なし。
プリセットのリストからユーザーが背景色を選択すると、プリセットのスラッグが backgroundColor
属性に保存されます。
背景色プリセットは editor-color-palette
テーマサポート がソースです。
ブロックはデフォルトのプリセット背景色を適用できます。これには 自身の属性に default で指定します。
attributes: {
backgroundColor: {
type: 'string',
default: 'some-preset-background-slug',
}
}
style
: タイプobject
の属性。デフォルト値なし。
カスタムカラーピッカーを使用するなどして、カスタム背景色を選択すると、カスタムカラー値が style.color.background
属性に保存されます。
ブロックはデフォルトのカスタム背景色を適用できます。これには 自身の属性に default で指定します。
attributes: {
style: {
type: 'object',
default: {
color: {
background: '#aabbcc',
}
}
}
}
color.__experimentalDuotone
注意: WordPress 6.3から非推奨となりました。
このプロパティは filter.duotone
で置換されました。
color.gradients
このプロパティは UI コントロールを追加します。ユーザーは UI コントロールを使用して、ブロックにグラデーション背景を適用できます。
supports: {
color: {
gradients: true,
// グラデーションと一緒にデフォルト値を使いたくない場合は、無効化する必要がある
background: false,
text: false
}
}
グラデーションプリセットは editor-gradient-presets
テーマサポート がソースです。
ブロックが color.gradient
のサポートを宣言すると、属性定義が拡張され、2つの新しい属性 gradient
と style
が含まれます。
gradient
: タイプstring
の属性。デフォルト値なし。
プリセットのリストからユーザーがグラデーションを選択すると、プリセットのスラッグが gradient
属性に保存されます。
ブロックはデフォルトのグラデーションプリセットを適用できます。これには 自身の属性に default で指定します。
attributes: {
gradient: {
type: 'string',
default: 'some-preset-gradient-slug',
}
}
style
: タイプobject
の属性。デフォルト値なし。
カスタムグラデーションピッカーを使用するなどして、カスタムグラデーションを選択すると、カスタムグラデーション値が style.color.gradient
属性に保存されます。
ブロックはデフォルトのカスタムグラデーションを適用できます。これには 自身の属性に default で指定します。
attributes: {
style: {
type: 'object',
default: {
color: {
gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
}
}
}
}
color.link
このプロパティは、ユーザーがブロック内のリンクの色を設定できるブロックコントロールを追加します。デフォルトではリンクの色は無効です。
supports: {
color: true // Enables only background and text
}
リンクの色のサポートを有効にするには、true
に設定します。
supports: {
color: {
link: true
}
}
リンクの色のプリセットは、editor-color-palette
テーマサポートをソースとしています。
ブロックが color.link
のサポートを宣言すると、属性定義が拡張され、style
が追加されます。
style
:object
型の属性で、デフォルトは割り当てられていません。
リンクの色が選択されると、色の値が style.elements.link.color.text
属性に格納されます。
ブロックにデフォルトのリンクの色を適用するには、自身の属性をデフォルトで指定します。
attributes: {
style: {
type: 'object',
default: {
elements: {
link: {
color: {
text: '#ff0000',
}
}
}
}
}
}
color.text
このプロパティはブロックコントロールを追加します。ユーザーはブロックコントロールを使用してブロックのテキスト色を設定できます。
color サポートを宣言すると、text プロパティは background プロパティと共に自動で有効化されます。このため単に color を設定すれば、テキスト色は有効化されます。
supports: {
color: true // background と text を有効化。link は有効化しない。
}
他の color サポートは有効化しながら text サポートを無効化するには、false
を設定します。
supports: {
color: {
// text サポートを無効化。
text: false
}
}
テキスト色プリセットは editor-color-palette
テーマサポート がソースです。
ブロックが color.text
のサポートを宣言すると、属性定義が拡張され、2つの新しい属性 textColor
と style
が含まれます。
textColor
: タイプstring
の属性。デフォルト値なし。
プリセットのリストからユーザーがテキスト色を選択すると、プリセットのスラッグが textColor
属性に保存されます。
ブロックはデフォルトのプリセットテキスト色を適用できます。これには 自身の属性に default で指定します。
attributes: {
textColor: {
type: 'string',
default: 'some-preset-text-color-slug',
}
}
style
: タイプobject
の属性。デフォルト値なし。
カスタムカラーピッカーを使用するなどして、カスタムテキスト色を選択すると、カスタムカラー値が style.color.gradient
属性に保存されます。
ブロックはデフォルトのカスタムテキスト色を適用できます。これには 自身の属性に default で指定します。
attributes: {
style: {
type: 'object',
default: {
color: {
text: '#aabbcc',
}
}
}
}
customClassName
- タイプ:
boolean
- デフォルト値:
true
このプロパティはブロックのラッパーのカスタム classsName を定義するフィールドを追加します。
supports: {
// カスタム className サポートを除去
customClassName: false
}
defaultStylePicker
- タイプ:
boolean
- デフォルト値:
true
スタイルピッカーの表示の際、ブロックの現在のアクティブなスタイルに基づいてブロックタイプのデフォルトのスタイルを設定できます。このオプションを有効にしたくない場合は、false
に設定してください。
supports: {
// デフォルトのスタイルピッカーを除去
defaultStylePicker: false
}
fontSize
- タイプ:
boolean
- デフォルト値:
false
この値はブロックが font-size CSS スタイルプロパティをサポートすることを通知します。サポートする場合、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。
このコントロール内に表示される値は editor-font-sizes
テーマサポート でテーマが宣言したもの、または指定がなければデフォルトのものになります。
supports: {
// 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'
}
}
}
defaultStylePicker: false
}
dimensions
注意: WordPress 6.2以降
- タイプ:
Object
- デフォルト値: null
- サブプロパティ:
minHeight
: タイプboolean
, デフォルト値false
この値は、ブロックが寸法に関連する CSS スタイルプロパティの一部をサポートすることを通知します。通知すると、テーマがサポートを宣言していれば、ブロックエディタはユーザーが値を設定できる UI コントロールを表示します。
supports: {
dimensions: {
minHeight: true // 最小高コントロールを有効化
}
}
ブロックが特定の dimensions プロパティのサポートを宣言すると、その属性定義は style
属性を含むように拡張されます。
style
: デフォルトの割り当てのないobject
タイプの属性。これはminHeight
のサポートが宣言されると追加されます。ユーザーが設定したカスタム値が格納されます。例:
attributes: {
style: {
dimensions: {
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
のサポートを宣言すると、属性定義が拡張され、属性 style
が含まれます。
style
: タイプobject
の属性。デフォルト値なし。
ブロックはデフォルトのデュオトーンカラーを適用できます。これには 自身の属性に default で指定します。
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
}
layout
- タイプ:
boolean
またはObject
- デフォルト値: null
- サブプロパティ:
default
: タイプObject
, デフォルト値 nullallowSwitching
: タイプboolean
, デフォルト値false
allowEditing
: タイプboolean
, デフォルト値true
allowInheriting
: タイプboolean
, デフォルト値true
allowSizingOnChildren
: タイプboolean
, デフォルト値false
allowVerticalAlignment
: タイプboolean
, デフォルト値true
allowJustification
: タイプboolean
, デフォルト値true
allowOrientation
: タイプ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
レイアウトタイプのみ。ブロックツールバーの方向コントロールの表示を決定します。
multiple
- タイプ:
boolean
- デフォルト値:
true
非 multiple ブロックは各投稿に1回だけ挿入できます。たとえば組み込みの「続きを読む」ブロックは、編集中の投稿にすでに存在する場合は挿入できません。非 multiple ブロックのアイコンはクリックできないよう自動的にグレイアウトされ、複数インスタンスの作成を回避します。
supports: {
// ブロックは投稿ごとに1度だけ使用できる
multiple: false
}
reusable
- タイプ:
boolean
- デフォルト値:
true
ブロックを再利用可能なブロックに変換する機能を無効化したい場合があります。デフォルトではすべてのブロックは再利用可能ブロックに変換できます。reusable サポートを false に設定すると、再利用可能ブロックするに変換するオプションが表示されません。
supports: {
// 再利用可能ブロックへの変換を許可しない
reusable: false,
}
lock
- タイプ:
boolean
- デフォルト値:
true
ブロックは、ロック状態を切り替える機能を無効化したい場合があります。デフォルトでは、ブロックの「オプション」ドロップダウンから、ユーザーによるロック、ロック解除が可能です。この動作を無効にするには、lock
を false
に設定します。
supports: {
// ロック UI のサポートを削除。
lock: false
}
position
注意: WordPress 6.2以降
- タイプ:
Object
- デフォルト値: null
- サブプロパティ:
sticky
: タイプboolean
, デフォルト値false
この値は、ブロックが位置に関連する CSS スタイルプロパティの一部をサポートすることを通知します。通知すると、テーマがサポートを宣言していれば、ブロックエディタはユーザーが値を設定できる UI コントロールを表示します。
注意: sticky 位置コントロールは、現在のところ、ドキュメントのルートレベルに設定されたブロックに対してのみ有効です。ブロックを sticky
位置に設定すると、ユーザがページをスクロールしたときに、ブロックは最も近い親に張り付きます。
supports: {
position: {
sticky: true // sticky 位置の選択を有効化
}
}
ブロックが特定の position プロパティのサポートを宣言すると、その属性定義は style
属性を含むように拡張されます。
style
: デフォルトの割り当てのないobject
タイプの属性。これはsticky
サポートが宣言されると追加されます。ユーザーが設定したカスタム値が格納されます。例:
attributes: {
style: {
position: {
type: "sticky",
top: "0px"
}
}
}
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
は obuject
タイプの属性で、デフォルトの割り当てはありません。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の style
属性とデフォルトを指定することで、デフォルトの style を適用できます。
attributes: {
style: {
type: 'object',
default: {
typography: {
lineHeight: 'value'
}
}
}
}
最終更新日: