# 翻訳用原稿：FSE Program Testing Call #8: Thrive with Theme.json

<!--
[FSE Program Testing Call #8: Thrive with Theme.json]-->
[FSE プログラムのテスト募集 #8: theme.json の活用](https://make.wordpress.org/test/2021/06/24/call-for-testing-thrive-with-theme-json/)
==========================================================================================================================================

以下は、[annezazu](https://profiles.wordpress.org/annezazu/) が書いた Make WordPress.org Test チームブログの記事「[FSE Program Testing Call #8: Thrive with Theme.json](https://make.wordpress.org/test/2021/06/24/call-for-testing-thrive-with-theme-json/)」を訳したものです。

誤字脱字誤訳などありましたら[フォーラムまでお知らせください](https://ja.wordpress.org/support/forum/alphabeta/)。

--

<!--
_Props to [@daisyo](https://profiles.wordpress.org/daisyo/) and [@jffng](https://profiles.wordpress.org/jffng/) for the massive amount of help in writing and perfecting this call for testing._
-->
_このテスト募集記事の作成と完成に多大な貢献をした [@daisyo](https://profiles.wordpress.org/daisyo/) と [@jffng](https://profiles.wordpress.org/jffng/) に感謝します。_

<!--
**Important note:** Compared to previous calls for testing for the FSE Outreach program, this is intentionally targeting a more developer-centric audience compared to site builders or end users in order to bring high impact feedback for theme.json, a new tool for extenders. You can read more about what to expect with [upcoming efforts here](https://make.wordpress.org/test/2021/06/09/upcoming-fse-outreach-program-schedule-june-july/).
-->
**重要なお知らせ**: これまでの FSE アウトリーチプログラムのテストではサイトの制作者やエンドユーザーを対象としてきましたが、今回のテストは意図的に開発者をメインの対象としています。これは、新しい拡張用のツールである「theme.json」に対してインパクトのあるフィードバックを行うためです。今後の取り組みについては、[こちら](https://make.wordpress.org/test/2021/06/09/upcoming-fse-outreach-program-schedule-june-july/)をご覧ください。

<!--
Feature Overview
-->
機能の概要
----------------

<!--
At the highest level, theme.json is a configuration file used to enable or disable features and set default styles for both a website and blocks. Rather than dealing with a ton of theme support flags or alternative methods, theme.json provides a consolidated and canonical way to manage it all. These settings include options like:
-->
theme.json　はウェブサイトやブロックの機能を有効または無効にしたり、デフォルトのスタイルを設定するために使用される最高レベルの設定ファイルです。大量のテーマサポートフラグや代替手段を扱うのではなく、theme.json はすべてを管理するための統合された標準的な方法を提供します。これらの設定には、次のようなオプションが含まれます。

<!--
* What customization options should be made available or hidden from the user.
* What are the default colors, font sizes, etc available to the user.
* Defines the default layout of the editor (widths and available alignments).
-->
* どのようなカスタマイズオプションをユーザーに提供するか、あるいは隠すか。
* ユーザーが利用できるデフォルトの色やフォントサイズなどはどのようになっているか。
* エディタのデフォルトのレイアウト (幅や使用可能な位置) の定義

<!--
This configuration file is a big part of what makes block themes so powerful as it allows for finer-grained control, and introduces the first step in “managing styles” for future WordPress releases. Here are a few of the top benefits of using this new mechanism: 
-->
この設定ファイルは、ブロックテーマをより細かく制御できるようにし、今後リリースされる WordPress の「スタイル管理」の第一歩となるもので、ブロックテーマを強力にサポートします。ここでは、この新しい仕組みを使うことで得られる主なメリットをご紹介します。

<!--
* It allows themes to provide settings per block which wasn’t possible before since add\_theme\_support targets settings for the entire editor. 
* Themes using theme.json will automatically get classes and CSS Custom Properties enqueued for the presets they declare instead of needing to handle this themselves. Plus, this means translations of preset names are also managed for them!
* Theme.json will coordinate core, theme, and user styles in a way that reduces the amount of CSS that needs to ship as well as help resolve specificity problems.
-->
* テーマはブロックごとの設定を提供できるようになります。これまでは、add\_theme\_support がエディタ全体の設定を対象としていたため、不可能でした。 
* theme.json を使用しているテーマは、宣言したプリセットのクラスや CSS カスタムプロパティが自動的に確保されるため、自分で処理する必要はありません。さらに、プリセット名の翻訳も管理されます。
* theme.json は、コア、テーマ、ユーザーのスタイルを調整することで、出力する必要のある CSS の量を減らし、特異性の問題を解決するのに役立ちます。

<!--
While block themes won’t work with WordPress 5.8 without the Gutenberg plugin due to some theme blocks being left out of the release that weren’t quite ready to ship, it’s still an important feature coming to 5.8 that needs testing and exploration. If you’ve been curious about the world of block themes or have started building your own, this call for testing is for you and should help you to continue to explore what’s possible with theme.json while giving you a chance to share what else you’d like to see.
-->
ブロックテーマは、Gutenberg プラグインがなければ WordPress 5.8で動作しません。これはリリース時にいくつかのテーマブロックがまだ出荷できる状態にないためです。それでもブロックテーマは、5.8に搭載される重要な機能であるため、テストや調査が必要です。ブロックテーマの世界に興味をお持ちの方、ご自身でブロックテーマを作り始めた方は、今回のテストを参考にしていただき、今後も theme.json で何ができるかを探っていただきたいと思います。

<!--
_You can read more about_ [_this feature in the documentation here_](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/)_._
-->
theme.json の機能については、ドキュメント「[グローバル設定とスタイル (theme.json)](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/theme-json/)」で詳しく説明されています。

<!--
Beginner Testing Steps
-->
初心者向けのテスト方法
----------------------

<!--
_This section is for those wanting to get a sense of what theme.json can control and what the output will look like._
-->
_このセクションは theme.json で何をコントロールでき、どんなアウトプットを得られるのかを知りたい方向けのセクションです。_

<!--
1. Head to [https://gutenberg-theme.xyz/](https://gutenberg-theme.xyz/). This is a tool that can help generate the settings section of the theme.json file. 
2. From there, try toggling on and off various theme supports. This will help you explore just a few settings that are possible to control with theme.json. For example, you can toggle on and off Custom Colors or Custom Link controls. Notice that the output in the browser changes based on your selection.
3. Use the + button next to Palette, Gradients, or Font Sizes to explore adding customizations. Keep in mind that you can edit both the slug and specific variables, like color name or font size. 
4. Add a few customizations and review the output! If you want to go a step further and use what you’ve created, check out the intermediate steps. 
-->
1. [https://gutenberg-theme.xyz/](https://gutenberg-theme.xyz/) にアクセスしてください。このツールは、theme.json ファイルの settings セクションの生成を支援します。
2. テーマがサポートする様々な機能をオン、オフしてみてください。theme.json でコントロール可能な設定の中から一部を選択して試すことができます。例えば、カスタムカラーやカスタムリンクの設定をオン、オフしてみてください。選択した内容に応じて、ブラウザの出力が変化することに注目してください。
3. パレット、グラデーション、フォントサイズの隣にある「+」ボタンを使って、追加のカスタマイズを探索してみてください。色の名前やフォントサイズなど、スラッグと特定の変数の両方を編集できる点に注意してください。
4. いくつかのカスタマイズを行い、出力をレビューしましょう ! 更に深く知るには、また、作成した theme.json を動かすには次の中級者向けのステップに進んでください。

<!--
Intermediate Testing Steps
-->
中級者向けのテスト方法
--------------------------

<!--
_This section is for those wanting to dig deeper into theme.json by writing their own file and exploring the various settings it can control._
-->
_このセクションは、theme.json についてもっと深く知りたいと思う方向けのセクションです。自身の theme.json ファイルを書き、theme.json がコントロールする様々な設定を探ります。_

<!--
Note: this mainly focuses on just theme supports and presets for blocks in the settings section of theme.json rather than Global Styles. 
-->
注意: ここでは、全体のスタイルではなく、主に theme.json の settings セクションにある、ブロックのテーマサポートとプリセットに焦点を当てています。

<!--
**Set up your testing environment**
-->
**テスト環境の設定**

<!--
* Create a Fresh WordPress Install.
* Install and Activate Gutenberg Plugin while using the latest version ([10.9.0 as of writing this](https://github.com/WordPress/gutenberg/releases/tag/v10.9.0)).
* Download and Install [TT1 Blocks from the Theme Directory](https://wordpress.org/themes/tt1-blocks/). 
* Navigate to the TT1 Blocks Theme directory and open the theme.json file in a text editor or IDE
-->
* WordPress を新規にインストールします。
* 最新 ([本稿執筆時点では10.9.0](https://github.com/WordPress/gutenberg/releases/tag/v10.9.0))の Gutenberg プラグインをインストールして、有効化します。
* [TT1 Blocks](https://wordpress.org/themes/tt1-blocks/) をテーマディレクトリからダウンロードして、インストールします。
* TT1 Blocks テーマのディレクトリに移動し、テキストエディタや IDE で theme.json ファイルを開いてください。

<!--
Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.
-->
セットアップのそれぞれのステップにおいて、最新のバージョンを使用してください。この投稿がシェアされてから、バージョンが更新された可能性も念頭に置いてください。

<!--
**Layout**
-->
**レイアウト**

<!--
1. Create a new post.
2. Add a cover block with a solid colored background and several lines of content in an inner paragraph block to the post.
3. Add another cover block with a solid colored background and several lines of content in an inner paragraph block. Set this block to “Wide Width”.
4. Add a third cover block with a solid colored background and several lines of content to the post and set the block to “Full Width”.
5. Publish Post.
6. Load the post on the front end and note the width of the cover blocks.
7. Change the `contentSize` value to a different pixel value in the layout section of theme.json.
8. Change `wideSize` value to a different pixel value in the Layout section of theme.json.
9. Load the edit view of the previously created post and confirm that new widths are reflected in the editor
10. Load the post on the front end and confirm that the new widths are reflected on the front end of the site
11. **Extra Credit:** Try setting the width values to something other than “px” such as “em”, “rem”, “vh”, “vw”, or “%”
-->
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」、「%」などで設定する事を試してみましょう。

<!--
**Typography**
-->
**タイポグラフィ**
<!--
1. Set the following typography settings to `true` in `theme.json`: 
* customFontWeight (Heading Block)
* customFontSize (Paragraph Block)
* customLineHeight (Paragraph Block)
* dropCap (Paragraph Block)
2. Test visibility of typography settings in a paragraph block (font size, font weight, line height and drop cap)
3. Test visibility of typography settings in a Heading block (font size, font weight, line Height)
4. Test that each of settings apply to the block on the front end
5. Change the typography settings to false in theme.json
6. Confirm that each of the custom typography settings in the paragraph block are no longer present in the block editor (Note the typography settings applied previously may still apply to existing blocks)
7. **Extra credit:** Add one or more font families and font sizes to the typography section of the theme.json file. Test your custom font families and sizes using a Button block.
-->
1. `theme.json` で以下の typography 設定を `true` に設定してください。 
* customFontWeight (見出しブロック)
* customFontSize (段落ブロック)
* customLineHeight (段落ブロック)
* dropCap (段落ブロック)
2. 段落ブロック内のタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さ、ドロップキャップの見え方を確認してください。
3. 見出しブロックのタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さの見え方を確認してください。
4. フロントエンドのブロックに各設定が適用されていることを確認してください。
5. theme.json の typography 設定を false に変更してください。
6. 段落ブロックの各カスタムタイポグラフィ設定が、ブロックエディターに表示されないことを確認します。ただし、以前に適用したタイポグラフィ設定が既存のブロックに適用されている場合があります。
7. **追加クレジット** theme.jsonファイルのtypographyセクションに、1つまたは複数のフォントファミリーとフォントサイズを追加します。 ボタンブロックを使用して、カスタムフォントファミリーとサイズをテストします。

<!--
**Border**
-->
**枠**
<!--
1. Set the following border settings to `true` in `theme.json`:
* `"customColor": true`
* `"customRadius": true`
* `"customStyle": true`
* `"customWidth": true`
2. Create a group block with an inner paragraph block with several lines of text.
3. Test visibility of border settings in a group block (Style, Width, Radius, Custom Color).
4. Test that settings apply to the block on the front end.
5. Change the border settings to False in theme.json.
6. Confirm that border settings in group block are no longer present in the block editor.
-->
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](https://css-tricks.com/css3-gradients/) と [CSS Gradient](https://cssgradient.io/) のリソースをご確認ください。

参考までに、[@daisyo](https://profiles.wordpress.org/daisyo/) の[例](https://gist.github.com/DaisyOlsen/3a3d2c56e5fd502db9591e4e9c7067aa)で、最終的にどのような出力が得られるかを示しています。

<!--
(Very) Advanced Testing Steps
-->
(超) 上級者向けのテスト方法
-----------------------------

<!--
_This section is for those looking to create a more robust block theme using theme.json and who are experienced theme developers. This isn’t for everyone!_
-->
_このセクションは、theme.json を使用してより強固なブロックテーマを作成したいと考えている人や、テーマ開発経験者向けのセクションです。一般ユーザー向けではありません。_

<!--
If you feel more comfortable with block themes and have ample time to dig into theme.json, try replicating a classic theme. Here are two options that should be fun to dig into but keep in mind any default theme should work well:
-->
ブロックテーマに慣れ、theme.json を調べる時間も十分にある場合は、クラシックテーマの再現はいかがでしょう。ここでは2つのオプションを紹介しますが、デフォルトテーマでも問題ありません。

* [Twenty Twenty](https://ja.wordpress.org/themes/twentytwenty/)
* [Storefront](https://ja.wordpress.org/themes/storefront/)

<!--
As you try to do this, write down what gaps remain, what proves to be the most difficult to do, and what feels surprisingly easy! Share in the comments below so we can learn from your experience. This is intentionally extremely open ended and advanced so don’t worry if you don’t feel up for the challenge. If you want to follow along while someone else explores doing this, check out [@mkaz](https://profiles.wordpress.org/mkaz/)‘s exploration video on [learning to create a block theme](https://www.youtube.com/watch?v=ClvB5wzyFzo&t=210s).
-->
実際に試してみて、どんなギャップがあったか、何が一番難しかったか、何が意外と簡単だったかをメモしておき、以下のコメント欄で共有してください。あなたの経験から学べることが多くあります。なお、この手順は、意図的に非常に自由で高度なテストに設定していますので、試す気にならなくても安心してください。誰か他の人がテストしているのを見ながらテストしたい場合は、[@mkaz](https://profiles.wordpress.org/mkaz/)の動画「[ブロックテーマ作成を学ぶ](https://www.youtube.com/watch?v=ClvB5wzyFzo&t=210s)」をチェックしてみてください。

注目すること:
---------------

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

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

<!--
Leave Feedback by July 14th
-->
フィードバックをお願いします(2021年7月14日まで)
---------------------------

<!--
Please leave feedback (questions, comments, concerns) in the comments of this post and be sure to note which section you followed. If you’d prefer, you’re always welcome to create issues [in this GitHub repo directly for Gutenberg](https://github.com/WordPress/gutenberg/issues) but, for this test, it’s unlikely you’ll need to. However, if you do leave feedback in GitHub, please comment below with the link.
-->
この記事のコメント欄に質問、コメント、懸念事項などのフィードバックをお願いします。その際、必ずどのセクションの手順に従ったかを明記してください。必要であれば、[GutenbergのGitHubリポジトリ](https://github.com/WordPress/gutenberg/issues) に直接 issue を作成いただいても構いませんが、このテストに関しては恐らくその必要はないでしょう。ただ、もしも GitHub にフィードバックを残す場合は、以下のコメント欄にリンクを貼ってください。

<!--
**Join a hallway hangout for theme.json testing on July 7th**
-->
**7月7日開催予定の theme.jsonテストのハングアウトに参加しましょう。**
<!--
To help those who might want to explore this test and theme.json in a group, [@daisyolsen](https://profiles.wordpress.org/daisyolsen/) will be hosting a hallway hangout specifically for this exercise. If you have never attended a hallway hangout, [you can read more about them here](https://make.wordpress.org/community/handbook/virtual-events/online-meetup-guidelines/overview-of-casual-online-gatherings/). Ultimately, they are meant to be casual and collaborative sessions to bring like minds together.
-->
FSE のテストや theme.json を誰か他の人と一緒に検討したいという方のために、[@daisyolsen](https://profiles.wordpress.org/daisyolsen/)が、今回のシナリオをメインとするハングアウトを開催します。ハングアウトに参加したことがない方は、[こちら](https://make.wordpress.org/community/handbook/virtual-events/online-meetup-guidelines/overview-of-casual-online-gatherings/) で詳細を確認できます。同じ考え方を持つメンバーによる、カジュアルで協力的なセッションを意味します。 

<!--
* Time: 5pm UTC
* Date: July 7th
* [Zoom link can be found here](https://us02web.zoom.us/j/88136786501?pwd=a21zL2Y2TjZqMkNYUHl6c2pjSjBtUT09) with the meeting ID of 881 3678 6501 and password 600875. 
* This will be announced and wrangled further in the [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) channel.
-->
* 日時: 7月7日 午後5時 UTC / 日本時間 7月8日 午前2時
* [Zoom リンク](https://us02web.zoom.us/j/88136786501?pwd=a21zL2Y2TjZqMkNYUHl6c2pjSjBtUT09) meeting ID 881 3678 6501 / password 600875 
* 追加情報は [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) チャンネルで発表されます。

<!--
Hope to see you there. 
-->
ハングアウトでお会いしましょう !

[#fse-outreach-program](https://make.wordpress.org/test/tag/fse-outreach-program/), [#fse-testing-call](https://make.wordpress.org/test/tag/fse-testing-call/), [#full-site-editing](https://make.wordpress.org/test/tag/full-site-editing/)

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