theme.jsonでブロックエディタの設定

WordPress 5.8で実装されたtheme.jsonを利用してブロックエディタの設定を変更する方法をメモ

概要

・テーマの最上位ディレクトリ内にtheme.jsonファイルを設置することで認識される
・add_theme_support関数で設定していた箇所を移行する事が出来る
・設定は、theme.jsonの値が優先され、functions.phpのadd_theme_support関数をオーバーライドする
・カラーパレット、フォントサイズ、グラデーションを設定した場合、CSS カスタムプロパティ（変数）が自動で作成され、フロントエンドとエディターの両方に設定される

<style id='global-styles-inline-css'>
body{--wp--preset--color--glay: #5a5e5a;--wp--preset--color--pink: #fb3ba1;}
</style>

色の設定

{
 "version": 1,
 "settings": {
   "color": {
     "palette": [ // 配列で指定 : add_theme_support('editor-color-palette')
       {
         "slug": "glay", 
         "color": "#5a5e5a",
         "name": "Glay"
       },
       {
         "slug": "pink", 
         "color": "#fb3ba1",
         "name": "Pink"
       }
     ],
     "custom": false // true or false : add_theme_support('disable-custom-colors')
   }
 }
}

タイポグラフィの設定

{
 "version": 1,
 "settings": {
   "typography": {
     "customFontSize": true, // true or false : add_theme_support('disable-custom-font-sizes')
     "customLineHeight": false, // true or false : add_theme_support('custom-line-height')
     "dropCap": true, // true or false : $editor_settings['__experimentalFeatures']['typography']['dropCap'] = false
     "fontSizes": [ // 配列で指定 : add_theme_support('editor-font-sizes')
       {
         "slug": "small", // .has-{slug}-font-sizeが付与される
         "size": 16, // カスタムサイズに表示される数値
         "name": "小サイズ" // プルダウンに表示されるラベル名
       },
       {
         "slug": "middle",
         "size": 20,
         "name": "中サイズ"
       }
     ],
     or
     "fontSizes": [] // 空配列の場合はプルダウンメニューが非表示
   }
 }
}