anchor

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

アンカーを使用すると、ページ上の特定のブロックに直接リンクできます。このプロパティは、ブロックのIDを定義するフィールドと、直接リンクをコピーするボタンを追加します。重要: 現在、動的ブロックでは機能しません。 

  1. // Declare support for anchor links.
  2. supports: {
  3.    anchor: true
  4. }

align

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

このプロパティは、ブロックの整列を変更するためのブロックコントロールを追加します。 

  1. supports: {
  2.    // Declare support for block's alignment.
  3.    // This adds support for all the options:
  4.    // left, center, right, wide, and full.
  5.    align: true
  6. }
  1. supports: {
  2.    // Declare support for specific alignment options.
  3.    align: [ 'left', 'right', 'full' ]
  4. }

ブロックが align をサポートすることを宣言すると、属性定義は string タイプの align 属性を含むように拡張されます。デフォルトでは、整列は割り当てられません。ブロックは、デフォルトを持つ独自の align 属性を指定することで、デフォルトの整列を適用できます。例えば: 

  1. attributes: {
  2.    align: {
  3.    type: 'string',
  4.    default: 'right'
  5.    }
  6. }

alignWide

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

このプロパティは、テーマのために ワイド整列 を有効にします。特定のブロックに対してこの動作を無効にするには、このフラグを false に設定します。 

  1. supports: {
  2.    // Remove the support for wide alignment.
  3.    alignWide: false
  4. }

ariaLabel

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

ARIAラベルを使用すると、要素のアクセシブルなラベルを定義できます。このプロパティは、UIフィールドを公開せずにブロックのための aria-label の定義を有効にします。 

  1. supports: {
  2.    // Add support for an aria label.
  3.    ariaLabel: true
  4. }

background

*注意: WordPress 6.5 以降.*

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

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

backgroundImage は、ユーザーが背景画像を選択できるUIコントロールを追加します。

backgroundSize は、背景画像の位置を選択するための FocalPointPicker を追加し、ユーザーが背景サイズ（カバー、含む、固定）を選択できるようにします。 

  1. supports: {
  2.    background: {
  3.    backgroundImage: true // Enable background image control.
  4.    backgroundSize: true // Enable background image + size control.
  5.    }
  6. }

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

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

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

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

ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトの背景画像、位置、サイズを適用できます。例えば: 

  1. attributes: {
  2.    style: {
  3.    background: {
  4.    backgroundImage: {
  5.    "url":"IMAGE_URL"
  6.    }
  7.    backgroundPosition:"50% 50%",
  8.    backgroundSize: "cover"
  9.    }
  10.    }
  11. }

className

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

デフォルトでは、クラス .wp-block-your-block-name が保存されたマークアップのルート要素に追加されます。これにより、テーマやプラグインが依存できる一貫したスタイリングメカニズムが提供されます。何らかの理由で、マークアップにクラスが不要な場合、この機能は無効にできます。 

  1. supports: {
  2.    // Remove the support for the generated className.
  3.    className: false
  4. }

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 プロパティが存在する場合、それらも有効と見なされます: 

  1. supports: {
  2.    color: {
  3.    // This also enables text and background UI controls.
  4.    gradients: true // Enables the gradients UI control.
  5.    }
  6. }

個別に無効にすることも可能です: 

  1. supports: {
  2.    color: { // Text UI control is enabled.
  3.    background: false, // Disables the background UI control.
  4.    gradients: true // Enables the gradients UI control.
  5.    }
  6. }

color.background

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

色のサポートが宣言されると、このプロパティはデフォルトで有効になります（テキストとともに）、したがって単に色を設定することで背景色が有効になります。 

  1. supports: {
  2.    color: true // Enables background and text color support.
  3. }

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

  1. supports: {
  2.    color: {
  3.    // Disables background support. Text color support is still enabled.
  4.    background: false
  5.    }
  6. }

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

  • backgroundColor: デフォルトが割り当てられていない string タイプの属性。
    ユーザーがプリセット背景色のリストから選択すると、プリセットスラッグが backgroundColor 属性に保存されます。
    背景色のプリセットは editor-color-palette テーマサポート から取得されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのプリセット背景色を適用できます。例えば:
    1. attributes: {
    2.  backgroundColor: {
    3.  type: 'string',
    4.  default: 'some-preset-background-slug',
    5.  }
    6. }

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

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  color: {
    6.  background: '#aabbcc',
    7.  }
    8.  }
    9.  }
    10. }

color.button

*注意: WordPress 6.5 以降.*

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

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

  1. supports: {
  2.    color: {
  3.    button: true
  4.    }
  5. }

ボタンの色のプリセットは editor-color-palette テーマサポート から取得されます。

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

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

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  elements: {
    6.  button: {
    7.  color: {
    8.  text: 'var:preset|color|contrast',
    9.  background: '#000000',
    10.  }
    11.  }
    12.  }
    13.  }
    14.  }
    15. }

color.enableContrastChecker

*注意: WordPress 6.5 以降.*

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

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

  1. supports: {
  2.    color: {
  3.    enableContrastChecker: false
  4.    }
  5. }

color.__experimentalDuotone

*注意: WordPress 6.3 以降、非推奨.*

このプロパティは filter.duotone に置き換えられました。

color.gradients

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

  1. supports: {
  2.    color: {
  3.    gradients: true,
  4.    // Default values must be disabled if you don't want to use them with gradients.
  5.    background: false,
  6.    text: false
  7.    }
  8. }

グラデーションのプリセットは editor-gradient-presets テーマサポート から取得されます。

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

  • gradient: デフォルトが割り当てられていない string タイプの属性。
    ユーザーがプリセットグラデーションのリストから選択すると、プリセットスラッグが gradient 属性に保存されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのプリセットグラデーションを適用できます。例えば:
    1. attributes: {
    2.  gradient: {
    3.  type: 'string',
    4.  default: 'some-preset-gradient-slug',
    5.  }
    6. }

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

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  color: {
    6.  gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
    7.  }
    8.  }
    9.  }
    10. }

color.heading

*注意: WordPress 6.5 以降.*

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

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

  1. supports: {
  2.    color: {
  3.    // Enable heading color support.
  4.    heading: true
  5.    }
  6. }

見出しの色のプリセットは editor-color-palette テーマサポート から取得されます。

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

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

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  elements: {
    6.  heading: {
    7.  color: {
    8.  text: 'var:preset|color|contrast',
    9.  background: '#000000',
    10.  }
    11.  }
    12.  }
    13.  }
    14.  }
    15. }

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

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

  1. supports: {
  2.    color: {
  3.    link: true
  4.    }
  5. }

リンクの色のプリセットは editor-color-palette テーマサポート から取得されます。

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

  • style: デフォルトが割り当てられていない object タイプの属性。
    リンクの色が選択されると、色の値が style.elements.link.color.text と style.elements.link.:hover.color.text 属性に保存されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのリンクの色を適用できます。例えば:

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  elements: {
    6.  link: {
    7.  color: {
    8.  text: 'var:preset|color|contrast',
    9.  },
    10.  ":hover": {
    11.  color: {
    12.  text: "#000000"
    13.  }
    14.  }
    15.  }
    16.  }
    17.  }
    18.  }
    19. }

color.text

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

色のサポートが宣言されると、このプロパティはデフォルトで有効になります（背景とともに）、したがって単に色を設定することでテキストの色が有効になります。 

  1. supports: {
  2.    color: true // Enables background and text, but not link.
  3. }

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

  1. supports: {
  2.    color: {
  3.    // Disable text color support.
  4.    text: false
  5.    }
  6. }

テキストの色のプリセットは editor-color-palette テーマサポート から取得されます。

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

  • textColor: デフォルトが割り当てられていない string タイプの属性。
    ユーザーがプリセットテキスト色のリストから選択すると、プリセットスラッグが textColor 属性に保存されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのプリセットテキスト色を適用できます。例えば:
    1. attributes: {
    2.  textColor: {
    3.  type: 'string',
    4.  default: 'some-preset-text-color-slug',
    5.  }
    6. }

  • style: デフォルトが割り当てられていない object タイプの属性。
    カスタムテキスト色が選択されると（つまり、カスタムカラーピッカーを使用して）、カスタム色の値が style.color.text 属性に保存されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのカスタムテキスト色を適用できます。例えば:

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  color: {
    6.  text: '#aabbcc',
    7.  }
    8.  }
    9.  }
    10. }

customClassName

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

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

  1. supports: {
  2.    // Remove the support for the custom className.
  3.    customClassName: false
  4. }

dimensions

*注意: WordPress 6.2 以降.*

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

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

  1. supports: {
  2.    dimensions: {
  3.    aspectRatio: true // Enable aspect ratio control.
  4.    minHeight: true // Enable min height control.
  5.    }
  6. }

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

  • style: デフォルトが割り当てられていない object タイプの属性。これは aspectRatio または minHeight サポートが宣言されたときに追加されます。ユーザーによって設定されたカスタム値を保存します。例えば:
  1. attributes: {
  2.    style: {
  3.    dimensions: {
  4.    aspectRatio: "16/9",
  5.    minHeight: "50vh"
  6.    }
  7.    }
  8. }

filter

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

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

filter.duotone

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

  1. supports: {
  2.    filter: {
  3.    // Enable duotone support
  4.    duotone: true
  5.    }
  6. },
  7. selectors: {
  8.    filter: {
  9.    // Apply the filter to img elements inside the image block
  10.    duotone: '.wp-block-image img'
  11.    }
  12. }

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

デュオトーンプリセットは、theme.json の color.duotone から取得されます。

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

  • style: デフォルトが割り当てられていない object タイプの属性。
    ブロックは、デフォルトのデュオトーンカラーを適用するために独自の属性を指定できます。例えば:

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  color: {
    6.  duotone: [
    7.  '#FFF',
    8.  '#000'
    9.  ]
    10.  }
    11.  }
    12.  }
    13. }

html

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

デフォルトでは、ブロックのマークアップは個別に編集できます。この動作を無効にするには、html を false に設定します。 

  1. supports: {
  2.    // Remove support for an HTML mode.
  3.    html: false
  4. }

inserter

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

デフォルトでは、すべてのブロックはインサータ、ブロック変換メニュー、スタイルブックなどに表示されます。ユーザーインターフェースのすべての部分からブロックを非表示にし、プログラム的にのみ挿入できるようにするには、inserter を false に設定します。 

  1. supports: {
  2.    // Hide this block from the inserter.
  3.    inserter: false
  4. }

interactivity

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

ブロックがインタラクティビティAPI機能を使用しているかどうかを示します。

clientNavigation サブプロパティは、ブロックがインタラクティビティAPIのクライアントサイドナビゲーションと互換性があるかどうかを示します。

ブロックがインタラクティビティAPIを使用していない場合、またはインタラクティビティAPIを使用してインタラクティブな場合にのみ、true に設定します。ブロックがインタラクティブであるが、バニラJS、jQuery、またはインタラクティビティAPI以外の他のJSフレームワーク/ライブラリを使用している場合は、false に設定します。

interactive サブプロパティは、ブロックがインタラクティビティ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 になります。他のレイアウトタイプの場合は、type を default オブジェクト内で明示的に設定する必要があります。

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 レイアウトタイプのみ、フレックスブロックのすべての子ブロックに対してサイズ調整コントロール（フィット/フィル/固定）の表示を決定します。

layout.allowVerticalAlignment

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

flex レイアウトタイプのみ、ブロックツールバーに垂直整列コントロールの表示を決定します。

layout.allowJustification

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

flex レイアウトタイプに対して、ブロックツールバーとブロックサイドバーにおける整列コントロールの表示を決定します。constrained レイアウトタイプに対して、ブロックサイドバーにおける整列コントロールの表示を決定します。

layout.allowOrientation

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

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

layout.allowCustomContentAndWideSize

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

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

lock

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

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

  1. supports: {
  2.    // Remove support for locking UI.
  3.    lock: false
  4. }

multiple

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

非複数ブロックは、各投稿に1回のみ挿入できます。例えば、組み込みの「もっと見る」ブロックは、編集中の投稿に既に存在する場合、再度挿入することはできません。非複数ブロックのアイコンは、自動的に薄暗く（クリック不可）され、複数のインスタンスを防ぎます。 

  1. supports: {
  2.    // Use the block just once per post
  3.    multiple: false
  4. }

position

*注意: WordPress 6.2 以降.*

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

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

注意: スティッキーポジションコントロールは、現在、ドキュメントのルートレベルに設定されたブロックにのみ利用可能です。ブロックを sticky ポジションに設定すると、ユーザーがページをスクロールすると、ブロックは最も近い親に固定されます。 

  1. supports: {
  2.    position: {
  3.    sticky: true // Enable selecting sticky position.
  4.    }
  5. }

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

  • style: デフォルトが割り当てられていない object タイプの属性。これは sticky サポートが宣言されたときに追加されます。ユーザーによって設定されたカスタム値を保存します。例えば:
  1. attributes: {
  2.    style: {
  3.    position: {
  4.    type: "sticky",
  5.    top: "0px"
  6.    }
  7.    }
  8. }

renaming

*注意: WordPress 6.5 以降.*

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

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

  1. supports: {
  2.    // Don't allow the block to be renamed in the editor.
  3.    renaming: false,
  4. }

reusable

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

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

  1. supports: {
  2.    // Don't allow the block to be converted into a reusable block.
  3.    reusable: false,
  4. }

shadow

*注意: WordPress 6.5 以降.*

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

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

  1. supports: {
  2.    shadow: true // Enable the box-shadow picker.
  3. }

シャドウのプリセットは theme.json で定義されたシャドウプリセットから取得されます。

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

  • style: デフォルトが割り当てられていない object タイプの属性。
    シャドウが選択されると、色の値が style.shadow に保存されます。
    ブロックは、デフォルトを持つ独自の属性を指定することで、デフォルトのシャドウを適用できます。例えば:

    1. attributes: {
    2.  style: {
    3.  type: 'object',
    4.  default: {
    5.  shadow: "var:preset|shadow|deep"
    6.  }
    7.  }
    8. }

spacing

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

この値は、ブロックが間隔に関連するいくつかのCSSスタイルプロパティをサポートしていることを示します。サポートしている場合、ブロックエディタはユーザーが値を設定するためのUIコントロールを表示します。テーマがサポートを宣言している場合。 

  1. supports: {
  2.    spacing: {
  3.    margin: true,  // Enable margin UI control.
  4.    padding: true, // Enable padding UI control.
  5.    blockGap: true,  // Enables block spacing UI control for blocks that also use `layout`.
  6.    }
  7. }

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

  • style: デフォルトが割り当てられていない object タイプの属性。これは margin または padding サポートが宣言されたときに追加されます。ユーザーによって設定されたカスタム値を保存します。例えば:
  1. attributes: {
  2.    style: {
  3.    margin: 'value',
  4.    padding: {
  5.    top: 'value',
  6.    }
  7.    }
  8. }

間隔プロパティは、構成可能な許可される側の配列 - ‘上’, ‘右’, ‘下’, ‘左’ - を定義できます。このような任意の側が定義されると、その側のためのUIコントロールのみが表示されます。

軸側は vertical と horizontal 用語で定義され、各軸ペアに対して単一のUIコントロールを表示します（例えば、vertical は上側と下側の両方を制御します）。間隔プロパティは、任意の個別の側 または 軸側をサポートできますが、両方の混合はサポートされません。

注意: blockGap は vertical と horizontal 軸側を受け入れ、ギャップの列と行の値を調整します。 blockGap は任意の側をサポートしません。 

  1. supports: {
  2.    spacing: {
  3.    margin: [ 'top', 'bottom' ],             // Enable margin for arbitrary sides.
  4.    padding: true,                           // Enable padding for all sides.
  5.    blockGap: [ 'horizontal', 'vertical' ],  // Enables axial (column/row) block spacing controls
  6.    }
  7. }

タイポグラフィ

  • タイプ: Object
  • デフォルト値: null
  • サブプロパティ:
    • fontSize: タイプ boolean, デフォルト値 false
    • lineHeight: タイプ boolean, デフォルト値 false
    • textAlign: タイプ boolean または array, デフォルト値 false

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

  1. supports: {
  2.    typography: {
  3.    // Enable support and UI control for font-size.
  4.    fontSize: true,
  5.    // Enable support and UI control for line-height.
  6.    lineHeight: true,
  7.    // Enable support and UI control for text alignment.
  8.    textAlign: true,
  9.    },
  10. }

タイポグラフィ.フォントサイズ

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

この値は、ブロックがフォントサイズのCSSスタイルプロパティをサポートしていることを示します。サポートしている場合、ブロックエディタはユーザーがその値を設定するためのUIコントロールを表示します。

このコントロールに表示される値は、テーマがeditor-font-sizes テーマサポートを介して宣言したもの、または提供されていない場合はデフォルトのものです。 

  1. supports: {
  2.    typography: {
  3.    // Enable support and UI control for font-size.
  4.    fontSize: true,
  5.    },
  6. }

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

  • fontSize: デフォルトが割り当てられていないstringタイプの属性。ユーザーが選択したプリセット値を保存します。ブロックは、デフォルトを持つ独自のfontSize属性を指定することでデフォルトのフォントサイズを適用できます。例えば:
  1. attributes: {
  2.    fontSize: {
  3.    type: 'string',
  4.    default: 'some-value',
  5.    }
  6. }
  • style: デフォルトが割り当てられていないobjectタイプの属性。ユーザーが設定したカスタム値を保存し、色などの他のブロックサポートと共有されます。ブロックは、デフォルトを持つ独自のstyle属性を指定することでデフォルトスタイルを適用できます。例えば:
  1. attributes: {
  2.    style: {
  3.    type: 'object',
  4.    default: {
  5.    typography: {
  6.    fontSize: 'value'
  7.    }
  8.    }
  9.    }
  10. }

タイポグラフィ.行の高さ

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

この値は、ブロックが行の高さのCSSスタイルプロパティをサポートしていることを示します。サポートしている場合、ブロックエディタはテーマがサポートを宣言した場合、ユーザーがその値を設定するためのUIコントロールを表示します。 

  1. supports: {
  2.    typography: {
  3.    // Enable support and UI control for line-height.
  4.    lineHeight: true,
  5.    },
  6. }

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

  1. attributes: {
  2.    style: {
  3.    type: 'object',
  4.    default: {
  5.    typography: {
  6.    lineHeight: 'value'
  7.    }
  8.    }
  9.    }
  10. }

タイポグラフィ.テキストの整列

*注意: WordPress 6.6以降*

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

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

  1. supports: {
  2.    typography: {
  3.    // Declare support for block's text alignment.
  4.    // This adds support for all the options:
  5.    // left, center, right.
  6.    textAlign: true
  7.    }
  8. }
  1. supports: {
  2.    typography: {
  3.    // Declare support for specific text alignment options.
  4.    textAlign: [ 'left', 'right' ]
  5.    }
  6. }

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

  1. attributes: {
  2.    style: {
  3.    type: 'object',
  4.    default: {
  5.    typography: {
  6.    textAlign: 'value'
  7.    }
  8.    }
  9.    }
  10. }

分割

trueに設定されている場合、Enterはブロックを2つのブロックに分割します。これは、単一のRichTextフィールドを持つ段落や見出しなどのシンプルなテキストブロックのみに適しています。edit関数内のRichTextは、テキストの属性キーと一致するidentifierプロパティを持つ必要があり、選択を正しく更新し、どこで分割するかを知る必要があります。