以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #8: Thrive with Theme.json」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください。

---

このテスト募集記事の作成と完成に多大な貢献をした @daisyo と @jffng に感謝します。

重要なお知らせ: これまでの FSE アウトリーチプログラムのテストではサイトの制作者やエンドユーザーを対象としてきましたが、今回のテストは意図的に開発者をメインの対象としています。これは、新しい拡張用のツールである「theme.json」に対してインパクトのあるフィードバックを行うためです。今後の取り組みについては、こちらをご覧ください。

機能の概要

theme.json はウェブサイトやブロックの機能を有効または無効にしたり、デフォルトのスタイルを設定するために使用される最高レベルの設定ファイルです。大量のテーマサポートフラグや代替手段を扱うのではなく、theme.json はすべてを管理するための統合された標準的な方法を提供します。これらの設定には、次のようなオプションが含まれます。

• どのようなカスタマイズオプションをユーザーに提供するか、あるいは隠すか。
• ユーザーが利用できるデフォルトの色やフォントサイズなどはどのようになっているか。
• エディタのデフォルトのレイアウト (幅や使用可能な位置) の定義

この設定ファイルは、ブロックテーマをより細かく制御できるようにし、今後リリースされる WordPress の「スタイル管理」の第一歩となるもので、ブロックテーマを強力にサポートします。ここでは、この新しい仕組みを使うことで得られる主なメリットをご紹介します。

• テーマはブロックごとの設定を提供できるようになります。これまでは、add_theme_support がエディタ全体の設定を対象としていたため、不可能でした。
• theme.json を使用しているテーマは、宣言したプリセットのクラスや CSS カスタムプロパティが自動的に確保されるため、自分で処理する必要はありません。さらに、プリセット名の翻訳も管理されます。
• theme.json は、コア、テーマ、ユーザーのスタイルを調整することで、出力する必要のある CSS の量を減らし、特異性の問題を解決するのに役立ちます。

ブロックテーマは、Gutenberg プラグインがなければ WordPress 5.8で動作しません。これはリリース時にはまだいくつかのテーマブロックが出せる状態にないためです。それでもブロックテーマは、5.8に搭載される重要な機能であるため、テストや調査が必要です。ブロックテーマの世界に興味をお持ちの方、ご自身でブロックテーマを作り始めた方は、今回のテストを参考にしていただき、今後も theme.json で何ができるかを探っていただきたいと思います。

theme.json の機能については、ドキュメント「グローバル設定とスタイル (theme.json)」で詳しく説明されています。

初心者向けのテスト方法

このセクションは theme.json で何をコントロールでき、どんなアウトプットを得られるのかを知りたい方向けのセクションです。

1. https://gutenberg-theme.xyz/ にアクセスしてください。このツールは、theme.json ファイルの settings セクションの生成を支援します。
2. テーマがサポートする様々な機能をオン、オフしてみてください。theme.json でコントロール可能な設定の中から一部を選択して試すことができます。例えば、カスタムカラーやカスタムリンクの設定をオン、オフしてみてください。選択した内容に応じて、ブラウザの出力が変化することに注目してください。
3. パレット、グラデーション、フォントサイズの隣にある「+」ボタンを使って、追加のカスタマイズを探索してみてください。色の名前やフォントサイズなど、スラッグと特定の変数の両方を編集できる点に注意してください。
4. いくつかのカスタマイズを行い、出力をレビューしましょう ! 更に深く知るには、また、作成した theme.json を動かすには次の中級者向けのステップに進んでください。

中級者向けのテスト方法

このセクションは、theme.json についてもっと深く知りたいと思う方向けのセクションです。自身の theme.json ファイルを書き、theme.json がコントロールする様々な設定を探ります。

注意: ここでは、全体のスタイルではなく、主に theme.json の settings セクションにある、ブロックのテーマサポートとプリセットに焦点を当てています。

テスト環境の設定

• WordPress を新規にインストールします。
• 最新 (本稿執筆時点では10.9.0)の Gutenberg プラグインをインストールして、有効化します。
• TT1 Blocks をテーマディレクトリからダウンロードして、インストールします。
• TT1 Blocks テーマのディレクトリに移動し、テキストエディタや IDE で theme.json ファイルを開いてください。

セットアップのそれぞれのステップにおいて、最新のバージョンを使用してください。この投稿がシェアされてから、バージョンが更新された可能性も念頭に置いてください。

レイアウト

1. 新しい投稿を作成してください。
2. 無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。
3. 別の無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。このブロックを「幅広」に設定します。
4. 3つの無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れ、このブロックを「全幅」に設定します。
5. 投稿を公開します。
6. フロントエンドで投稿を表示し、これらのカバーブロックの幅を記録しておきます。
7. theme.json の layout セクションで、ｃontentSize の値を、違うピクセル値に変更します。
8. theme.json の layout セクションで、wideSize の値を、違うピクセル値に変更します。
9. 先に作成した投稿の編集画面を開き、新しい幅が編集画面で反映されていることを確認します。
10. ブラウザで投稿を表示し、新しい幅がフロントエンドでも反映されていることを確認します。
11. (ボーナス手順) 幅の値を「px」以外の、「em」、「rem」、「vh」、「vw」、「%」などで設定する事を試してみましょう。

タイポグラフィ

1. theme.json で以下の typography 設定を true に設定してください。
   • customFontWeight (見出しブロック)
   • customFontSize (段落ブロック)
   • customLineHeight (段落ブロック)
   • dropCap (段落ブロック)
2. 段落ブロック内のタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さ、ドロップキャップの見え方を確認してください。
3. 見出しブロックのタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さの見え方を確認してください。
4. フロントエンドのブロックに各設定が適用されていることを確認してください。
5. theme.json の typography 設定を false に変更してください。
6. 段落ブロックの各カスタムタイポグラフィ設定が、ブロックエディターに表示されないことを確認します。ただし、以前に適用したタイポグラフィ設定が既存のブロックに適用されている場合があります。
7. (ボーナス手順) theme.jsonファイルのtypographyセクションに、1つまたは複数のフォントファミリーとフォントサイズを追加します。 ボタンブロックを使用して、カスタムフォントファミリーとサイズをテストします。

枠

1. theme.json で以下の border 設定を true に設定してください。
   • "customColor": true
   • "customRadius": true
   • "customStyle": true
   • "customWidth": true
2. 数行のテキストを含む内部段落ブロックを持つグループブロックを作成します。
3. グループブロックの枠設定、スタイル、幅、角丸、カスタムカラーの見え方を確認します。
4. フロントエンドのブロックに設定が適用されていることを確認してください。
5. theme.json の border 設定を false に変更してください。
6. グループブロックの枠設定が、ブロックエディターに表示されないことを確認します。

色

1. theme.json で、custom と customGradient の以下の色設定をtrue に設定してください。
   • "custom": true
   • "customGradient": true
   • "link": true
2. カスタムグラデーションの背景を持つカバーブロックと、内側の段落ブロックに数行のコンテンツを追加します。
3. 段落ブロックにリンクを追加し、リンクの色をカスタムカラーに設定します。
4. 画像を背景にした別のカバーブロックと、内側の段落ブロックにある数行のコンテンツを記事に追加します。表紙の背景には、デュオトーンのプリセットを使用するように設定します。
5. 背景画像のデュオトーンカラーを変更し、デュオトーンのシャドウとハイライトの設定にカスタムカラーを使用する。
6. (ボーナス手順) パレットとデュオトーンまたはグラデーションのプリセットに1つまたは複数の追加カラーを追加します。CSS グラデーションの詳細については、CSS Tricks と CSS Gradient のリソースをご確認ください。

参考までに、@daisyo の例で、最終的にどのような出力が得られるかを示しています。

(超) 上級者向けのテスト方法

このセクションは、theme.json を使用してより強固なブロックテーマを作成したいと考えている人や、テーマ開発経験者向けのセクションです。一般ユーザー向けではありません。

ブロックテーマに慣れ、theme.json を調べる時間も十分にある場合は、クラシックテーマの再現はいかがでしょう。ここでは2つのオプションを紹介しますが、デフォルトテーマでも問題ありません。

• Twenty Twenty
• Storefront

実際に試してみて、どんなギャップがあったか、何が一番難しかったか、何が意外と簡単だったかをメモしておき、以下のコメント欄で共有してください。あなたの経験から学べることが多くあります。なお、この手順は、意図的に非常に自由で高度なテストに設定していますので、試す気にならなくても安心してください。誰か他の人がテストしているのを見ながらテストしたい場合は、@mkazの動画「ブロックテーマ作成を学ぶ」をチェックしてみてください。

注目すること:

これらの質問は、中級編と上級編に特化したものです。

• theme.json ファイルに追加された色は、各種ブロックのカラーパレットにカーソルを置いたときに、割り当てられた名前で表示されますか ?
• theme.json ファイルに追加されたフォントサイズは、ブロックのフォントサイズのドロップダウンに割り当てられた名前とサイズで表示されますか ?
• エディターでブロックを使用したときに、色やフォントサイズが正しく表示されますか ?
• フロントエンドでブロックを使用したときに、色やフォントサイズが正しく表示されますか ?
• 今回の体験で、特に戸惑いや不満を感じたことは何ですか ?
• 特に楽しかったこと、感謝したことは何ですか ?

フィードバックをお願いします(2021年7月14日まで)

この記事のコメント欄に質問、コメント、懸念事項などのフィードバックをお願いします。その際、必ずどのセクションの手順に従ったかを明記してください。必要であれば、GutenbergのGitHubリポジトリ に直接 issue を作成いただいても構いませんが、このテストに関しては恐らくその必要はないでしょう。ただ、もしも GitHub にフィードバックを残す場合は、以下のコメント欄にリンクを貼ってください。

7月7日開催予定の theme.jsonテストのハングアウトに参加しましょう。

FSE のテストや theme.json を誰か他の人と一緒に検討したいという方のために、@daisyolsenが、今回のシナリオをメインとするハングアウトを開催します。ハングアウトに参加したことがない方は、こちら で詳細を確認できます。同じ考え方を持つメンバーによる、カジュアルで協力的なセッションを意味します。

• 日時: 7月7日 午後5時 UTC / 日本時間 7月8日 午前2時
• Zoom リンク meeting ID 881 3678 6501 / password 600875
• 追加情報は #fse-outreach-experiment チャンネルで発表されます。

ハングアウトでお会いしましょう !

#fse-outreach-program, #fse-testing-call, #full-site-editing

---

この記事は @umikoh, @nao, @atachibana, @mimitips で翻訳しました。

#fse-testing-call, #fse-outreach-experiment, #fse-outreach-program, #full-site-editing