ブロックサポート
ブロックは「ブロックサポート」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, デフォルト値truegradients: タイプboolean, デフォルト値falsetext: タイプ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サポートを宣言すると追加されます。ユーザーによるカスタム値のセットを保存します。
最終更新日: