ブロックサポート
ブロックは「ブロックサポート」API を使用してエディター内で使用する機能を宣言できます。
anchor
や className
などいくつかのブロックサポートは属性を適用する場合に save
から返される要素に追加の props を加えます。div
などのデフォルトの HTML タグ要素であればこれは自動的に動作しますが、save
の戻り値がカスタムコンポーネント要素の場合、属性が永続化されるようカスタムコンポーネントがこれらの props を処理する必要があります。
anchor
- タイプ:
boolean
- デフォルト値:
false
アンカーを使用するとページ上の特定のブロックに直接リンクできます。このプロパティはブロックの ID を定義するフィールドと、ダイレクトリンクをコピーするボタンをを追加します。
// アンカーリンクのサポートを宣言
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
}
className
- タイプ:
boolean
- デフォルト値:
true
デフォルトでは保存したマークアップの root 要素にクラス .wp-block-your-block-name
が追加されます。この結果、テーマやプラグインがブロックをスタイリングする際に利用可能な一貫した機構が実現します。何らかの理由によりこのクラスをマークアップに付加したくない場合、この機能を無効化できます。
supports: {
// className 生成サポートを除去
className: false
}
color
- タイプ:
Object
- デフォルト値: null
- サブプロパティ:
background
: タイプboolean
, デフォルト値true
gradients
: タイプboolean
, デフォルト値false
text
: タイプboolean
, デフォルト値true
この値はブロックが色に関連する CSS スタイルプロパティをサポートすることを通知します。サポートする場合、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。
背景とテキストのコントロールは色を editor-color-palette
テーマサポート から、グラデーションは editor-gradient-presets
テーマサポート から取得します。
注意: text
キーと background
キーのデフォルト値は true
です。color
プロパティを宣言するとこれらも有効化されます。
supports: {
color: { // 同時にテキスト UI コントロールと背景 UI コントロールも有効化
gradients: true // グラデーション UI コントロールを有効化
}
}
これらは個別に無効化できます。
supports: {
color: { // テキスト UI コントロールは有効
background: false, // 背景 UI コントロールを無効化
gradients: true // グラデーション UI コントロールを有効化
}
}
ブロックが color プロパティをサポートすると、attributes の定義もいくつかの属性を含むよう拡張されます。
style
: デフォルトの割り当てのないobject
タイプの属性。任意の color プロパティのサポートを宣言すると追加されます。ユーザーによるカスタム値のセットを保存します。ブロックは自身のstyle
属性とデフォルトを指定することで、デフォルトスタイルを適用できます。
attributes: {
style: {
type: 'object',
default: {
color: {
background: 'value',
gradient: 'value',
text: 'value'
}
}
}
}
background
サポートを宣言すると、新しくstring
タイプのbackgroundColor
属性がデフォルトの割り当てなしで追加されます。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の属性とデフォルトを指定することで、デフォルトの背景色を適用できます。
attributes: {
backgroundColor: {
type: 'string',
default: 'some-value',
}
}
gradients
サポートを宣言すると、新しくstring
タイプのgradients
属性がデフォルトの割り当てなしで追加されます。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の属性とデフォルトを指定することで、デフォルトのグラデーションを適用できます。
attributes: {
gradient: {
type: 'string',
default: 'some-value',
}
}
text
サポートを宣言すると、新しくstring
タイプのtextColor
属性がデフォルトの割り当てなしで追加されます。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の属性とデフォルトを指定することで、デフォルトのテキスト色を適用できます。
attributes: {
textColor: {
type: 'string',
default: 'some-value',
}
}
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'
}
}
}
}
html
- タイプ:
boolean
- デフォルト値:
true
デフォルトではブロックのマークアップは個別に編集できます。この動きを止めるには html
に false
を設定してください。
supports: {
// HTML モードサポートを除去
html: false
}
inserter
- タイプ:
boolean
- デフォルト値:
true
デフォルトではすべてのブロックはインサーターに表示されます。ブロックをインサーターには表示せず、プログラム的にのみ挿入可能にするには inserter
に false
を設定してください。
supports: {
// このブロックをインサーターに表示しない
inserter: false
}
lineHeight
- タイプ:
boolean
- デフォルト値:
false
この値はブロックが line-height CSS スタイルプロパティをサポートすることを通知します。サポートする場合、テーマがサポートを宣言するなら、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。
supports: {
// line-height の UI コントロールを有効化
lineHeight: true,
}
When the block declares support for lineHeight
, the attributes definition is extended to include a new attribute style
of object
type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own style
attribute with a default e.g.:
ブロックが lineHeight
プロパティのサポートを宣言すると、attributes の定義も新しい属性 style
を含むよう拡張されます。style
は obuject
タイプの属性で、デフォルトの割り当てはありません。ユーザーによるプリセットした値のセットを保存します。ブロックは自身の style
属性とデフォルトを指定することで、デフォルトの style を適用できます。
attributes: {
style: {
type: 'object',
default: {
typography: {
lineHeight: 'value'
}
}
}
}
multiple
- タイプ:
boolean
- デフォルト値:
true
非 multiple ブロックは各投稿に1回だけ挿入できます。たとえば組み込みの「続きを読む」ブロックは、編集中の投稿にすでに存在する場合は挿入できません。非 multiple ブロックのアイコンはクリックできないよう自動的にグレイアウトされ、複数インスタンスの作成を回避します。
supports: {
// ブロックは投稿ごとに1度だけ使用できる
multiple: false
}
reusable
- タイプ:
boolean
- デフォルト値:
true
ブロックを再利用可能なブロックに変換する機能を無効化したい場合があります。デフォルトではすべてのブロックは再利用可能ブロックに変換できます。reusable サポートを false に設定すると、再利用可能ブロックするに変換するオプションが表示されません。
supports: {
// 再利用可能ブロックへの変換を許可しない
reusable: false
}
spacing
- タイプ:
Object
- デフォルト値: null
- サブプロパティ:
padding
: タイプboolean
, デフォルト値false
この値はブロックがスペースに関連する CSS スタイルプロパティをサポートすることを通知します。テーマがサポートを宣言するなら、ブロックエディターはユーザーがプロパティ値を設定できる UI コントロールを表示します。
supports: {
spacing: {
padding: true, // padding 色 UI コントロールを有効化
}
ブロックが spacing プロパティのサポートを宣言すると、attributes の定義も style
属性を含むよう拡張されます。
style
: デフォルトの割り当てのないobject
タイプの属性。padding
サポートを宣言すると追加されます。ユーザーによるカスタム値のセットを保存します。
最終更新日: