WordPress Block Editor でデザインシステムを使用する Pt. 1: テーマ.json

公開: 2022-12-15

以前のブログ投稿では、デザインシステムを Figma から WordPress テーマの theme.json にインポートする方法を紹介しました。そうすることで、デジタル資産全体で継続的な一貫性を確保できます。

新しい 2 部構成のシリーズは、ブロックエディターで theme.json からインポートされたデザイントークンを使用する方法を示すことで、その基礎の上に構築されています。これにより、WordPress サイトをより適切に整理して、デザインシステムを反映させることができます。主な目標は 2 つあります。

デザインシステムに関連する theme.json の部分を理解する
インポートしたデザインシステムを利用するために、theme.json を変更および拡張します。

theme.json について

theme.json は、ブロックエディターの構成とテーマ設定、ブロック設定の変更、およびブロックテーマ全体を開発するための基盤の構築を可能にする構成ファイルです。

WordPress サイトのグローバル設定とスタイルを制御できるようにするためのものです。すべての新しい WordPress VIP サイトには、ブロックテーマである Twenty Twenty-Three テーマがデフォルトで付属しています。このテーマは、軽量のブロックテーマを試して、theme.json で利用できるいくつかの強力なコントロールを理解するための優れた出発点です。

theme.json の変更

前回のブログ投稿で使用した theme.json から始めましょう。ブリッジツールが Figma からデザインシステムを挿入および更新できるカスタムセクションに注目してください。これは、実際に theme.json を効果的に使用するために、デザインシステムのさまざまなコンポーネント (デザイントークン) を参照する重要なセクションです。

以下では、theme.json が提供するすべてのものを活用できるように、ヒントと戦略について説明します。

デザイントークンの保存

デザイントークンの場所はブリッジツールを使用してカスタマイズできますが、常に設定のカスタムセクションに保持する必要があります。これはブリッジツールのデフォルトの場所であり、変更しないでください。これにより、それらが 1 つの場所に適切に整理され、既存のカスタムテーマセクションとの競合を回避するのに役立つ場合があります。

デザイントークンの使用

theme.json の custom セクションの使用例を見てみましょう。ここに、テキストの基本色を緑、背景を黒として定義したスニペットがあります。

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

これにより、次を使用して、theme.json 内の任意の場所でこれら 2 つの色を参照できます。

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

次のスニペットでは、特に指定がない限り、デフォルトですべてのブロックが黒の背景に緑のテキストで表示されます。

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

カスタム設定から参照するキーのスキーマは次のとおりです。

 var(--wp--custom–<location to the value with -- as a separator between each key>)

利点は、これらのキーを使用してすべてのデザイントークンを参照できる一方で、実際の値が管理される中央の場所が 1 か所あることです。

ベストプラクティス

WordPress で生成されたデザイントークン変数 (例: var(--wp--custom--text--primary) ) を使用して、あらゆる場所でトークンを参照します。上記のスニペットに注意してください。ここでは、実際の値自体を使用するのではなく、プライマリおよび背景のカスタムカラーを参照しています。これにより、テキストの色などのプロパティを更新する場合、他の場所は単なる参照であるため、1 つの場所のみを変更する必要があります。
theme.json に挿入されたデザイントークンは、上記と同じキー参照を使用して、theme.json 外の CSS でもアクセスできます。これは、テーマで使用されるブロック開発およびその他のコンポーネントに適用されます。これらは、theme.json 内でのみ使用するためのものではなく、カスタム CSS で再利用する必要があります。

これらの両方のベストプラクティスに従って、theme.json を信頼できる唯一の情報源として維持することをお勧めします。これにより、特に Figma に接続する WordPress VIP のブリッジツールなどの自動化ツールを使用する場合に、デザイントークンを簡単に更新できます。

エディターとブロックのスタイルを変更する

上記のスニペットは、ブロックのスタイルをカスタマイズするための優れた方法です。たとえば、ブロックの既定のスタイルを変更したり、ブロックエディターから選択できるプリセットを変更したりできます。これは、よりきめ細かく、サイトで使用される組み込みブロックがどのように見えるかを正確に指定したい場合に役立ちます。

theme.json には 2 つの重要な場所があります。

Settings および settings.blocks — ブロックエディターで一般的に利用可能な設定のカスタマイズ、および個々のブロックタイプに合わせた設定を可能にします。
Styles および styles.blocks — ブロックエディター全体のプリセットスタイルの定義、およびブロックごとのカスタマイズを可能にします。

たとえば、すべての見出しに既定の緑色 (プライマリ) の色とセカンダリの色のオプションがあることを確認する方法は次のとおりです。

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

これにより、各ヘッダーブロックがメインの緑のテキストカラーを持つように構成され、2 つ目のブロックエディターオプションが追加されて、色を赤のサブカラーに変更できます。注: これには繰り返しが必要です。スタイリングはデフォルトのプライマリカラーを指定し、パレットは同じカラーをセカンダリカラーと組み合わせて、ブロックエディタで両方のオプションを提供します。

スタイリングの警告

ブロックのスタイル設定には、可能な限り、theme.json の styles セクションと styles.blocks セクションのみを使用してください。どうしても必要な場合を除き、コアブロックスタイルをオーバーライドするために CSS スタイルを使用しないでください。一般に、ブロックスタイルの CSS オーバーライドは安定していません。ブロックエディターの更新により、スタイルと構造が変更され、それらのスタイルが壊れる可能性があります。

ブロックごとのカスタマイズ

上記の例は、ブロックの設定とスタイルをカスタマイズする方法を示していますが、カスタマイズを完全に無効にして、ブロックエディターのオプションを特定のブロックに制限することもできます。これは、コンテンツの作成に使用できるオプションを厳密に制御し、デザインシステムのルックアンドフィールを維持するのに役立ちます。

色、タイポグラフィ、間隔などの他の構成可能なプロパティに同じ原則が適用される別の色設定の例を続けましょう。見出しブロックを除くすべての場所で既定のテキストの色を変更する機能を無効にするには、次のように theme.json を構成します。

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

この例では、設定を介してグローバル設定を構成し、設定の下のブロックセクションを介してブロック固有の設定を構成することを示しています。これは、グローバルスタイル (ルートスタイルプロパティで利用可能) とブロック固有のスタイル (styles.blocks の下) にも適用されます。

シンプルなプリセットテンプレート

デザインシステムの作成を開始する良い方法は、ブロックエディターの設定をグローバルにロックダウンすることです。その後、個々のブロックの設定を段階的に有効にし、カスタマイズオプションに圧倒されることなく、デザインシステムのルックアンドフィールを制御できます. まず、WordPress VIP のデザインシステムがすべての境界線、色をグローバルに無効にするために使用する簡単な設定セットを次に示します。、タイポグラフィ、およびスペーシングコントロールは、デフォルトでエディタに表示されます。

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

これらのロックダウンされたデフォルトを使用すると、settings.blocks を使用してエディター内の特定のブロックのオプションを公開し、カスタマイズを適切に定義された設定に制限できます。

結論は

Theme.json は、グローバルデザイントークンを整理し、グローバルテーマスタイルを設定し、個々のブロックをカスタマイズするための強力なツールです。ブロックエディターがカスタマイズのために公開しているすべての機能を活用することで、デザインシステムの実装が一元化され、組み込みのブロックエディターと互換性があります。

シリーズのパート 2 では、デザインシステムで組み込みのブロックタイプとスタイルを管理するための、theme.json 以外の高度なヒントについて説明します。

便利なリンク

Theme.json とは何ですか?
グローバル設定とスタイル (theme.json)

著者

Automattic のシニアソフトウェア開発者、Alec Geatches 氏

エンタープライズ WordPress 開発者であり、台湾の台北に住むデザインシステム愛好家です。

Automattic のシニアソフトウェア開発者、Gopal Krishnan 氏

Gopal は、デザインシステムと Gutenberg に関心を持ち、WordPress VIP の分離された WordPress サービスに取り組んでいます。彼はオーストラリアのシドニーを拠点とし、最近カナダから引っ越してきました。

WordPress Block Editor でデザイン システムを使用する Pt. 1: テーマ.json