ソリッドシード株式会社

WordPress 5.8で導入されたtheme.jsonとは？

2021年7月20日にWordPress 5.8がリリースされ、新たにテーマの機能として「theme.json」というのが導入されました。
詳細な仕様は公式ドキュメントに記載してますが、どのような事ができるのかなどまとめて行こうと思います。

なぜ導入されたのか？

公式ドキュメントから解釈すると、ブロックエディターの進化が急速に進む中でテーマの設定が複雑になり管理するのが大変になったため簡単に制御できる仕組みが必要と判断したようです。

theme.jsonで何ができる？

theme.jsonでは主に下記ができます。

• ブロックエディターの設定
  管理画面で登録する時のオプションの表示・非表示やデフォルトカラーやデフォルトフォントサイズなどの設定ができます。
  エディターの幅や配置のデフォルトレイアウトを定義できます。
• 設定をブロックごとに制御
  特定のブロックのみプリセットを使用し、他のブロックはデフォルトのプリセットを使用する設定ができます。
• スタイル管理
  ユーザー、テーマ、コアの異なるCSSを全て読み込んでいるのを管理できます。
  無駄に読み込んでいた詳細度の低いCSSが読み込まなくなります。
• CSSカスタムプロパティの設定
  サイト内で共通で使用する値をカスタムプロパティとして設定でき、フロントエンドとエディターの両方にエンキューされます。

下記のtheme.jsonを設定すると

{
    "version": 1,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Black",
                    "slug": "black",
                    "color": "#000000"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#ffffff"
                }
            ]
        }
    }
}

下記のCSSカスタムプロパティが出力されます。

body {
    --wp--preset--color--black: #000000;
    --wp--preset--color--white: #ffffff;
}

今後の進化に期待！

公式ドキュメントに「将来の WordPress リリースでのスタイル管理の、最初のステップとなる theme.json ファイルを導入します。」と記述しているのでスタイル管理に関してはもっと進化するようです。

新しく導入された機能なので、どのように活用していくかを模索して行こうと思います。