ブロックサポート

ブロックは「ブロックサポート」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
}

customClassName

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

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

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

defaultStylePicker

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

スタイルピッカーの表示の際、ユーザーがブロックタイプのデフォルトスタイルを選択できるようドロップダウンが表示されます。ドロップダウンを表示したくない場合にはこのプロパティを false に設定してください。

supports: {
    // デフォルトのスタイルピッカーを除去
    defaultStylePicker: false
}

html

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

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

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

inserter

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

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

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

multiple

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

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

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

reusable

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

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

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

原文

最終更新日: