owned this note
owned this note
Published
Linked with GitHub
<!--
FSE Program Testing Call #11: Site Editing Safari
-->
FSE プログラムのテスト募集 #11: サイト編集の旅
===================
以下は、[annezazu](https://profiles.wordpress.org/annezazu/) が書いた Make [WordPress.org](https://wordpress.org/) Test チームブログの記事「[FSE Program Testing Call #11: Site Editing Safari](https://make.wordpress.org/test/2021/11/08/fse-program-testing-call-11-site-editing-safari/)」を訳したものです。
誤字脱字誤訳などありましたら[フォーラムまでお知らせください](https://ja.wordpress.org/support/forum/alphabeta/)。
---
<!--
This is the eleventh call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more.
-->
これは[フルサイト編集アウトリーチプログラム](https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/)の11回目の募集です ! この実験的なプログラムについての詳細情報は [FAQ をご覧ください](https://ja.wordpress.org/team/handbook/test/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/)。程よく楽しんで参加するために、[Make Slack](https://make.wordpress.org/chat/) の [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
<!--
As a reminder, if you’d like to suggest an idea for a call for testing, it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the slack channel or via DM to me (@annezazu).
-->
フルサイト編集テストのアイデアの提案を歓迎します。すべてのアイデアは、現在のプロジェクトの優先順位と照らし合わせ、もっとも効果的と判断されたものが実行されます。アイデアは、Slack チャンネルで直接共有するか、私 ([@annezazu](https://profiles.wordpress.org/annezazu/)) にメッセージを送ってください。
<!--
Overview
-->
概要
--------
<!--
Feel free to jump straight to the testing steps if you’d prefer to get started right away.
-->
すぐにテストを始めたい方は、次章の「テスト手順」に進んでください。
<!--
This is the final call for testing before WordPress 5.9, which makes it a wonderful and high impact one to be involved in as it’ll help improve the experience for a large portion of the web before it ever launches. In order to get the most out of this call for testing, the instructions are going to change as the test goes on and as we move forward in the release cycle. For example, at the start of this test, folks will be encouraged to use TT1 and, by the end of the test, Twenty Twenty-Two will be recommended. For now, here’s a high level overview of what is going to be tested:
-->
今回のテスト募集は、WordPress 5.9 のリリース前に行われる最後のテスト募集です。このテストに参加することは、リリース前にウェブ上の多くの人々のエクスペリエンスを向上できるため、素晴らしく、そして、非常にインパクトのあるものです。このテスト募集の最大限の活用を目的として、以下のテスト手順は、テストが進むにつれ、またリリースサイクルが進むにつれ、変更される予定です。例えば、テスト開始時には TT1 の使用を推奨しますが、テスト終了時には Twenty Twenty-Two を推奨する予定です。現時点でのテストの概要を紹介します。
<!--
**Block theme template and template part editing UI**
-->
**ブロックテーマテンプレートとテンプレートパーツ編集 UI**
<!--
While certain calls for testing have ventured into the Site Editor, that experience as you’ve known it is shifting for 5.9 in order to offer a more refined and scaled down experience to manage templates and template parts within a block theme. With a condensed browsing tool and a new placement in wp-admin under Appearance, this might feel more like a taste than the full experience of the Site Editor as you’ve come to know it.
-->
これまでサイトエディターのテスト募集を何度か行ってきましたが、ご存知のように、より洗練され、スケールダウンした形でブロックテーマ内のテンプレートやテンプレートパーツを管理するため、WordPress 5.9 まで延期されました。凝縮された閲覧ツールと管理画面の「外観」の下の新しい配置は、これまでのサイトエディターの完全なエクスペリエンスとは異なって感じられるでしょう。
<!--
**Styles Interface**
-->
**スタイルインターフェース**
<!--
While 5.8 laid the groundwork for a cohesive style system, 5.9 sees the introduction of a beautiful user interface that allows folks to interact directly with various style properties. You might have heard of this work under the project name “global styles”! While we’ve had calls for testing around theme.json, one of the mechanisms related to the overall Global Styles project, this is the first time Styling itself is being explored. Currently, this interface displays two large groups of design focuses: blocks and elements. Elements represent things that can be styled globally and across blocks (such as “text”, “links”, “captions”, etc). This is a fancy way of saying you can easily change the typography of your entire site or the unique coloring of your buttons block all from the same interface.
-->
WordPress 5.8 では一貫したスタイルシステムの基礎が築かれましたが、WordPress 5.9 では、様々なスタイルプロパティを直接操作できる美しいユーザーインターフェースを導入します。この作業に関して、「グローバルスタイル」というプロジェクト名を聞いたことがあるかもしれません。これまでも、グローバルスタイルプロジェクトに関連する仕組みのひとつである「theme.json」のテスト募集を行ってきましたが、スタイリングそのものを取り上げるのは今回が初めてです。現在、このインターフェースでは、2つの大きなデザイングループ「ブロック」と「要素」が表示されます。「要素」は、グローバルに、あるいは複数ブロックに渡ってスタイリング可能なものを表しています (「テキスト」、「リンク」、「キャプション」など)。つまり、サイト全体のタイポグラフィや、ボタンブロックのユニークな配色を同じインターフェイスで簡単に変更できます。
<!--
**Patterns Explorer**
-->
**パターンエクスプローラー**
<!--
With block patterns on the rise, a new explorer modal has been shipped to make it easier to navigate between patterns and find the exact one you want to use. This sets the groundwork for future integration with the Pattern Directory. This test will briefly explore this new experience.
-->
ブロックパターンが増えてきている中、パターン間の移動を容易にし、希望のパターンをすぐに見つけられるよう、[新しいエクスプローラーモーダルがリリースされました](https://github.com/WordPress/gutenberg/pull/35773)。この機能は、将来的にパターンディレクトリと統合するための基礎となります。テスト手順では、この新しい体験を簡単に探索します。
**Twenty Twenty-Two**
<!--
Twenty Twenty-Two is the latest in a long line of default themes with a twist — it’s a block theme first and foremost built for the various site editing tools. As a result, midway through this call for testing, folks will be encouraged to test using this theme and report back their findings. Read more about this groundbreaking default theme here.
-->
Twenty-Twenty-Two は、長い歴史を持つデフォルトテーマの中でも、特徴ある最新のテーマです。初めてのブロックテーマであり、さまざまなサイト編集ツール用に作られています。そのため、今回のテスト募集では、このテーマを使用してテストし、結果を報告することが推奨されています。この革新的なデフォルトテーマについては[こちら](https://make.wordpress.org/core/2021/10/06/introducing-twenty-twenty-two/)をご覧ください。
<!--
Testing Environment
-->
テスト環境
----
<!--
This will adjust as the test goes on and the release cycle progresses to ensure folks are testing the latest and greatest.
-->
このテスト募集は、最新かつ最高のプログラムでのテストを目的としているため、テストが進み、リリースサイクルが進むにつれて、調整されます。
<!--
Here are the steps to follow to properly set up your testing environment for this specific all for testing. If you’re already ready to go, jump to the testing steps below.
-->
以下は、この文書で紹介するすべてのテストを実行するために必要な、テスト環境の設定手順です。すでに準備できている場合は、次章の「テスト手順」に進んでください。
<!--
1. Use a test site with the latest version of WordPress. Right now, that’s 5.8.1. It’s important this is not a production/live site. / WordPress の最新バージョンをインストールしたテストサイトを使用してください。執筆時点では 5.8.1 です。決して本番サイトは使用しないでください。
2. Go to the Gutenberg 11.9 RC3 release page on GitHub, scroll to the very bottom, and download the Gutenberg zip by clicking on it. / GitHub の [Gutenberg 11.9 RC4 リリースページ](https://github.com/WordPress/gutenberg/releases/tag/v11.9.0-rc.4) に移動し、一番下までスクロールし、クリックして Gutenberg zip をダウンロードします。
3. Install and activate the Gutenberg 11.9 RC3 plugin from Plugins > Add New > Upload Plugin. / 「プラグイン」 > 「新規追加」 > 「プラグインのアップロード」で、Gutenberg 11.9 RC4 プラグインをインストールし、有効化します。
4. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. / 「外観」 > 「テーマ」 > 「新規追加」で TT1 Blocks テーマをインストールし、有効化します。
5. Create a few posts with featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created previously for these kinds of tests via the WordPress importer under Tools > Import. You can also follow this lesson for how to use demo content. / 好きな画像をアイキャッチ画像にした記事をいくつか作成します。または、以前に別のテスト用に作成された [Gutenberg のデモコンテンツ](https://cloudup.com/cARY6x8T1Dc) をダウンロードし、「ツール」 > 「インポート」にあるWordPress Importeｒを使ってインポートします。デモコンテンツの使用方法については、[こちらのレッスン](https://learn.wordpress.org/lesson-plan/how-to-add-demo-content-in-wordpress/) も参考にしてください。
6. Go to the website’s admin. / サイトの管理画面に移動します。
7. You should now see a navigation item under Appearance titled “Editor (beta)”. If you don’t see that, your environment isn’t correctly set up. If you get stuck here, just comment on this post or ask in #fse-outreach-experiment for help! / これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、正しく設定されていません。ここで詰まった場合は、この投稿にコメントするか、[#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) で助けを求めてください。
-->
1. WordPress の最新バージョンをインストールしたテストサイトを使用してください。執筆時点では 5.8.2 です。本番サイトは使用しないでください。
2. GitHub の [Gutenberg 11.9 RC4 リリースページ](https://github.com/WordPress/gutenberg/releases/tag/v11.9.0-rc.4) に移動し、一番下までスクロールし、クリックして Gutenberg.zip をダウンロードします。
3. 「プラグイン」 > 「新規追加」 > 「プラグインのアップロード」で、Gutenberg 11.9 RC4 プラグインをインストールし、有効化します。
4. 「外観」 > 「テーマ」 > 「新規追加」で TT1 Blocks テーマをインストールし、有効化します。
5. 好きな画像をアイキャッチ画像にした記事をいくつか作成します。または、別のテスト用に作成された [Gutenberg のデモコンテンツ](https://cloudup.com/cARY6x8T1Dc) をダウンロードし、「ツール」 > 「インポート」にあるWordPress インポーターを使ってインポートします。デモコンテンツの使用方法については、[こちらのレッスン](https://learn.wordpress.org/lesson-plan/how-to-add-demo-content-in-wordpress/) も参考にしてください。
6. サイトの管理画面に移動します。
7. 「外観」の下に「Editor (ベータ)」というタイトルのナビゲーション項目が表示されているはずです。表示されていない場合は、正しく設定されていません。ここで詰まった場合は、この投稿にコメントするか、[#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) で助けを求めてください。
<!--
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.
-->
原則として、各手順では最新バージョンを使用してください。また、この記事が公開された後にバージョンが変更されている可能性があることにも注意してください。
<!--
Testing steps
-->
テスト手順
---
<!--
Personalize your homepage
-->
ホームページのカスタマイズ
<!--
1. Go to Settings > Reading and set “Your homepage displays” to show “Your latest posts”. / 管理画面で「設定」 > 「表示設定」に移動し、「ホームページの表示」で「最新の投稿」を選択します。
2. Once set, go to Appearance > “Editor (beta)”. This will open up to show a template that displays your homepage. / 「外観」 > 「Editor (ベータ)」を選択します。ホームページを表示するテンプレートが開かれます。
3. From there, change your homepage to your liking! This could mean adding in a navigation block, changing the font size of your Post Title Blocks, adding a duotone filter to your Featured Image blocks, removing blocks, adding blocks, and more. / そこから、ホームページを好みに合わせて自由に変更してください。ナビゲーションブロックを追加したり、投稿タイトルブロックのフォントサイズを変更したり、投稿のアイキャッチ画像ブロックにデュオトーンフィルターを追加したり、ブロックを削除したり、ブロックを追加したり等々。
4. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. / 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。
-->
1. 管理画面で「設定」 > 「表示設定」に移動し、「ホームページの表示」で「最新の投稿」を選択します。
2. 「外観」 > 「Editor (ベータ)」を選択します。ホームページを表示するテンプレートが開かれます。
3. ホームページを好みに合わせて自由に変更してください。ナビゲーションブロックを追加したり、投稿タイトルブロックのフォントサイズを変更したり、投稿のアイキャッチ画像ブロックにデュオトーンフィルターを追加したり、ブロックを削除したり、ブロックを追加したり等々。
4. 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。
<!--
Set your styles
-->
スタイルの設定
<!--
5. From there, you can either click the W menu in the upper left corner to return to your dashboard before heading to Appearance > Styles OR you can click on the Styles icon in the upper right corner to access the Styles interface. / そこから、左上の「W」メニューをクリックしてダッシュボードに戻り、「外観」 > 「スタイル」に進むか、右上のスタイルアイコンをクリックして、スタイルインターフェースにアクセスします。
6. Once open, personalize the four sections as much or as little as you’d like: Typography, Colors, Layout, and Blocks (to customize individual blocks). For example, you can click on Colors > Palette > Use the + sign to add your own custom color option for use throughout your content. / 開いた後は、4つのセクション「タイポグラフィ」「色」「レイアウト」「ブロック」(個々のブロック用) を自由にカスタマイズできます。例えば、「色」 > 「パレット」 > 「＋」マークをクリックすると、コンテンツ全体で使用する独自のカラーオプションを追加できます。
7. Once you’ve adjusted everything to your liking, click “Save” and go through the saving experience. / 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。
-->
5. 左上の「W」メニューをクリックしてダッシュボードに戻り、「外観」 > 「スタイル」に進むか、右上のスタイルアイコンをクリックして、スタイルインターフェースにアクセスします。
6. 4つのセクション「タイポグラフィ」「色」「レイアウト」「ブロック」(個々のブロック用) を自由にカスタマイズできます。例えば、「色」 > 「パレット」 > 「＋」マークをクリックすると、コンテンツ全体で使用する独自のカラーオプションを追加できます。
7. 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。
<!--
Add a buttons pattern and use layout controls
-->
ボタンパターンの追加とレイアウトコントロールの使用
<!--
8. From there, open up the Inserter and switch to the Patterns tab. / インサーターを開き、「パターン」タブに切り換えます。
9. Select the “Explore” option, navigate to the Buttons section, and pick the “Simple call to action” pattern. / 「Explore」オプション選択し、「ボタン」セクションに移動し、「シンプルな行動喚起 (CTA)」パターンを選択してください。
10. Once added, use the + option to add in a second button. / 追加できたら、「+」オプションを使用して2番目のボタンを追加してください。
11. From there, select the overall parent Buttons block and open the sidebar settings to customize the layout to your liking. Here’s a quick video in case you get stuck. / 次に、親のボタンブロック全体を選択し、サイドバーの設定を開き、自由にレイアウトを編集します。詰まった方は [こちらの動画](https://www.dropbox.com/s/uuorot3u5yvjsu2/button%20layout.mov?dl=0) も参照してください。
12. Save the changes. / 変更を保存します。
-->
8. ブロックインサーターを開き、「パターン」タブに切り換えます。
9. 「Explore」オプション選択し、「ボタン」セクションに移動し、「シンプルな行動喚起 (CTA)」パターンを選択してください。
10. 追加できたら、「+」オプションを使用して2番目のボタンを追加してください。
11. 次に、親のボタンブロック全体を選択し、サイドバーの設定を開き、自由にレイアウトを編集します。[こちらの動画](https://www.dropbox.com/s/uuorot3u5yvjsu2/button%20layout.mov?dl=0) も参照してください。
12. 変更を保存します。
<!--
Add a duotone filter to your single post template
-->
単一投稿テンプレートへのデュオトーンフィルターの追加
<!--
13. Head to Appearance > Templates > Select “Add New” > Title it “Duotone Template”. / 「外観」 > 「テンプレート」 に移動し、「新規追加」をクリックし、タイトルを「デュオトーンテンプレート」とします。
14. In the content, add in the Featured Image block and add in a duotone filter. / コンテンツに、投稿のアイキャッチ画像ブロックを追加し、デュオトーンフィルターを追加します。
15. Add in any additional blocks you’d like and save the changes when you’re ready. / 自由にブロックを追加し、変更を保存します。
16. Head back to your dashboard by clicking on the W icon in the upper left corner before heading to Posts > All posts. / 左上の「W」メニューをクリックしてダッシュボードに戻り、「投稿」 > 「投稿一覧」を選択します。
17. Edit one of your posts with a featured image and assign your new “Duotone Template” to this post. Here’s a quick video in case you get stuck. / アイキャッチ画像を含む投稿を開き、サイドバーの「テンプレート」で「デュオトーンパターン」を割り当てます。[こちらの動画](https://www.dropbox.com/s/htwy6dubrnqxghd/duotone.mov?dl=0)も参照してください。
18. Save and view the post to see the filter applied! / 投稿を保存して、表示し、デュオトーンフィルターが適用されていることを確認してください。
-->
13. 「外観」 > 「テンプレート」 に移動し、「新規追加」をクリックし、タイトルを「デュオトーンテンプレート」とします。
14. コンテンツに、投稿のアイキャッチ画像ブロックを追加し、デュオトーンフィルターを追加します。
15. 自由にブロックを追加し、変更を保存します。
16. 左上の「W」メニューをクリックしてダッシュボードに戻り、「投稿」 > 「投稿一覧」を選択します。
17. アイキャッチ画像を含む投稿を開き、サイドバーの「テンプレート」で「デュオトーンパターン」を割り当てます。[こちらの動画](https://www.dropbox.com/s/htwy6dubrnqxghd/duotone.mov?dl=0)も参照してください。
18. 投稿を保存して、表示し、デュオトーンフィルターが適用されていることを確認してください。
<!--
Edit your Header
-->
ヘッダーの編集
<!--
19. Return to Appearance > Editor and, using List View if you need to, select your Header template part. / 管理画面に戻り、「外観」 > 「Editor (ベータ)」から、ヘッダーテンプレートパーツを選択します。必要であればリスト表示を使用してください。
20. Select the three dot menu in List View or in the block toolbar and select “Edit Header”. This will take you to the focused template part mode. / リストビューの縦の3点リーダーを選択するか、ブロックツールバーで「header を編集」を選択します。フォーカスしたテンプレートパーツモードに移行します。
21. From there, make a few changes to the template part (add items to the navigation block, change the size of your Site Title, etc) and use the horizontal drag handles to see how your header will look at different sizes! / そこから、テンプレートパーツに変更を加えてください。ナビゲーションブロックにアイテムを追加したり、サイトタイトルのサイズを変更する等々。両側のドラッグハンドルを移動すると、異なる画面サイズでのヘッダーの表示を確認できます。
22. Save the changes. / 変更を保存します。
-->
19. 管理画面に戻り、「外観」 > 「Editor (ベータ)」から、ヘッダーテンプレートパーツを選択します。必要であればリスト表示を使用してください。
20. リストビューの縦の3点リーダーを選択するか、ブロックツールバーで「header を編集」を選択します。フォーカスしたテンプレートパーツモードに移行します。
21. テンプレートパーツに変更を加えます。ナビゲーションブロックにアイテムを追加したり、サイトタイトルのサイズを変更する等々。両側のドラッグハンドルを移動すると、異なる画面サイズでのヘッダーの表示を確認できます。
22. 変更を保存します。
<!--
What to notice:
-->
注意する点:
---
<!--
- Did the experience crash at any point?
- Did the saving experience properly save your changes?
- Did you find any features missing?
- What did you find anything particularly confusing or frustrating about the experience?
- What did you especially enjoy or appreciate about the experience?
- What would have made this experience easier?
- Did you find that what you created in the editor matched what you saw on your site?
- How did your content look on a smaller device or screen size?
- How do you think this will impact your current workflows?
- Did it work using Keyboard only?
- Did it work using a screen reader?
-->
* どこかでクラッシュしませんでしたか ?
* 保存した際、正しく保存できましたか ?
* 不足する機能はありませんでしたか ?
* テストで困った点、イライラした点はありませんか ?
* テストで楽しかった点、いいねと思った点はありますか ?
* もっと編集が楽になるには何があればよいですか ?
* エディターで作成したページは、サイトで表示された場合にマッチしますか ?
* 携帯デバイスや、小さな画面サイズでのコンテンツの見た目はいかがですか ?
* 現在のワークフローにどんな影響を与えると思いますか ?
* キーボードだけで動作しましたか ?
* スクリーンリーダーだけで動作しましたか ?
<!--
Leave Feedback by November 30th, 2021
-->
フィードバックをお願いします (2021年11月30日まで)
---
<!--
Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg. If you leave feedback in GitHub, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.
-->
この投稿にコメントでフィードバックをお願いします。あるいは、[Gutenberg の GitHub リポジトリディレクトリ](https://github.com/WordPress/gutenberg/issues) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
<!--
*Props to [@kellychoffman](https://profiles.wordpress.org/kellychoffman/) for helping review this call for testing.*
-->
*Props to [@kellychoffman](https://profiles.wordpress.org/kellychoffman/): このテスト募集のレビューを助けてくれたことに対して*
[#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/)
