[FSE Program Testing Call #5: Query Quest](https://make.wordpress.org/test/2021/04/14/fse-program-testing-call-5-query-quest/)

[FSE Program Testing Call #5: Query Quest](https://make.wordpress.org/test/2021/04/14/fse-program-testing-call-5-query-quest/) ============================================================================================================================== # FSE テスト募集 #5: クエリクエスト This post is the fifth call for testing as part of the [Full Site Editing Outreach Program](https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/). For more information about this experimental program, [please review this FAQ](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/) for helpful details. To properly join the fun, please head to [#fse-outreach-experiment](https://make.wordpress.org/test/tag/fse-outreach-experiment/) in [Make Slack](https://make.wordpress.org/chat/) for future testing announcements, helpful posts, and more will be shared there. この投稿は[フルサイト編集アウトリーチプログラム](https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/)の5回目のテスト募集です。この実験的なプログラムについてのより詳細な情報はこの[FAQ](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/)をご覧ください。テストについての今後の情報について [Make Slack](https://make.wordpress.org/chat/) Feature Overview ---------------- 概要 Not many blocks get an entire milestone dedicated to them [but the Query Block did](https://github.com/WordPress/gutenberg/issues/24551)! As the name implies, this is a pretty powerful block allowing you to display posts/pages on your site and customize them as you see fit. 全体のマイルストーンに選ばれたブロックはそう多くはありませんが[、「クエリブロック」は選ばれました](https://github.com/WordPress/gutenberg/issues/24551)！その名の通り、このブロックは非常に強力なブロックで、自分のサイトに記事やページを表示したり、自分の好きなようにカスタマイズすることができます。 For example, you could easily use this block to show off all of your favorite recipes by setting it up to show a specific category of posts. 例えば、このブロックを使って、特定のカテゴリーの投稿を表示するように設定すれば、お気に入りのレシピをすべて紹介することが簡単にできます。 In the long run, you can expect this to be more of a theme author tool used when building a block theme with block variations, like the Post List Block, being more of what users will interact with. For now though, let’s be adventurous and go on a Query Quest to explore what this block can do. 将来的には、テーマ作者がブロックテーマを構築する際に使用するツールとなり、ユーザーは投稿リストブロックのようなブロックバリエーションと多く接するものと予想されます。しかし今は冒険心を持ち、このブロックで何ができるのか「クエリークエスト」にトライしてみましょう。 If you find yourself interested in the future of this block, [check out this recent GitHub issue](https://github.com/WordPress/gutenberg/issues/30508) asking for new ideas for the bundled Query Block patterns that come with the current iteration of the block and [get excited about Gutenberg 10.5](https://github.com/WordPress/gutenberg/pull/30763) which will offer more patterns to choose from. このブロックのこれからに興味をもった人は [最近の GitHub issue をチェック](https://github.com/WordPress/gutenberg/issues/30508) してみてください。ブロックの現行のイテレーションにバンドルするクエリーブロックパターンの新しいアイデアを募集しています。さらに [Gutenberg 10.5](https://github.com/WordPress/gutenberg/pull/30763) では、選択可能なより多くのパターンが提供される予定です ! Testing Environment -------------------- テスト環境 ---------- While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します: * Use a test site. Do not use a production/live site. You can [follow these instructions](https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/) to set up a local install or use a [tool like this to set up a development site](https://localwp.com/). * テストサイトを使用してください。本番サイトは使わないでください。[ここの指示に従ってローカルインストールを設定する](https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/)か、[このような開発用サイトを設定するツールを使用してください](https://localwp.com/)。 * Use the latest version of WordPress (downloadable [here](https://wordpress.org/download/)). * 最新の WordPress を使用してください（[ここからダウンロード可能](https://wordpress.org/download/)）。 * Use the latest version of the [TT1 Blocks Theme](https://wordpress.org/themes/tt1-blocks/). * 最新の [TT1 Blocks テーマ](https://wordpress.org/themes/tt1-blocks/) を使用してください。 * Use the latest version of Gutenberg ([1](https://github.com/WordPress/gutenberg/releases/tag/v10.4.0)[0.4](https://github.com/WordPress/gutenberg/releases/tag/v10.4.0) as of writing this). * 最新の Gutenberg を使用してください。この記事の執筆時点では[Version 10.4](https://github.com/WordPress/gutenberg/releases/tag/v10.4.0)です。 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 Flow ------------- テストフロー ----------- **Important Note:** **重要なお知らせ:** While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a beta feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。 **Setup Instructions:** **設定手順:** 1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 最新バージョンのWordPressをインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。 2. Install the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/) by going to Appearances > Themes > Add New. Once installed, activate the theme. 「外観 > テーマ > 新規追加」で [TT1 Blocks テーマ](https://wordpress.org/themes/tt1-blocks/)をインストールし、テーマを有効化します。 3. Create eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the [demo Gutenberg content](https://cloudup.com/c8pPIugGZd9) created especially for this test via the WordPress importer under Tools > Import. 8つの投稿を作成し、2つの異なるカテゴリーとアイキャッチ画像を割り当ててください。または、このテスト用に作成された [Gutenberg デモコンテンツ](https://cloudup.com/c8pPIugGZd9) をダウンロードし、「ツール > インポート」の WordPress インポーターを使用してインポートしてください。 4. Go to the website’s admin. サイトの管理画面にアクセスします。 5. Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.4. 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.4以降を使用してください。 6. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your sidebar, you aren’t correctly using the Site Editing experiment. これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。 **General Testing Instructions:** **テスト手順** 「サイトエディター（ベータ）」にアクセスします。自動的にサイトエディターが開かれ、ホームページに使われているテンプレートが表示されます。 7. Using the List View, select the parent Query Block and then remove this entire block. This will allow us to start fresh! [Here’s a GIF](https://cloudup.com/cQ1toN0ALgp) that shows how to do this. 「リスト表示」を使用して、親のクエリーブロックを選択し、ブロック全体を削除してください。これでクリーンな環境から始められます ! [こちらの GIF](https://cloudup.com/cQ1toN0ALgp) も参照してください。 8. From there, where the Query Block used to be, add in a Columns Block and set up 2 columns with 50/50 spacing. クエリーブロックがあった所に、カラムブロックを追加し、2カラムの「50 / 50」を選択してください。 9. In the first column, add a Heading Block with the name of one of the Categories of posts. If you used the demo content, this will be either “Hikes” or “Travel”. 最初のカラムに見出しブロックを追加し、投稿カテゴリー名を何か1つ入力してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかを入力してください。 10. Add a Query Block just below the Heading Block. During the setup, select whichever option you want from the various sizing options. 見出しブロックの直下にクエリーブロックを追加してください。設定中にはさまざまなサイズオプションから好きなオプションを選択してください。 11. Once inserted, open the Block Settings and under “Settings” turn off the “Inherit query from URL”. 挿入したら、右側サイドバーのブロックの設定を開き、「設定」セクションの下の「URL からクエリーを継承」をオフにしてください。 12. From there, you should see options to customize what posts this Query Block includes. Under “Filters”, please select one of the categories to display. If you used the demo content, this will be either “Hikes” or “Travel”. ここには、このクエリーブロックで表示する投稿をカスタマイズできるオプションがあります。「フィルター」の下で表示するカテゴリーを選択してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかになります。 13. After the Query Block is showing the posts from just one category, proceed to customize the Query Block as you’d like! For example, you can add in additional blocks like Post Author and customize it using the Block Settings option. If you get stuck here, please jump down to the “Customization Instructions/Ideas” for help. クエリーブロックでは1つのカテゴリーだけが表示されるはずです。あとはクエリーブロックを自由にカスタマイズしてみてください ! たとえば、投稿者ブロックを追加して、ブロック設定でオプションを変更できます。ここで詰まった場合は、下の「カスタマイズ手順とアイデア」を参考にしてください。 14. Follow the same process with the second column and customize the additional Query Block. Make sure to select the second category of posts to display so you see new posts there! 2番目のカラムに対しても同じ手順を実行し、追加したクエリーブロックをカスタマイズしてください。別の投稿カテゴリーを選択して、新しい投稿を表示しましょう ! 15. View your site and see if what you created matches the Site Editor view. サイトを表示し、作成したページがサイトエディターの表示にマッチすることを確認してください。他のエクスペリエンスのカスタマイズ方法には、カラムの幅の変更、関連するブロックの追加、色の変更、等々があります。 **Customization Instructions/Ideas:** **カスタマイズ手順とアイデア** Because this is a more advanced block, here are some additional instructions to help clarify how customization of this block works in case you’re getting stuck. To start, keep in mind that part of the beauty of the Query Block system is that any change you make to one of the posts/pages being queried will be made to the entire set being displayed. This might be confusing at first but it allows for consistency across each post. With that in mind, here are some additional ways to customize your Query Block: このブロックはより高度なブロックです。手順に詰まってしまった人向けに、このブロックのカスタマイズ方法を丁寧に伝える、追加の手順をご紹介します。始める前に、重要な注意ですが、クエリーブロックの美しさの1つが、クエリーされる投稿やページの1つを変更すると、表示されるコンテンツ全体に波及する点に注意してください。最初は混乱するかもしれませんが、これで各投稿の一貫性が保たれます。この点を念頭に、以下のクエリーブロックの追加のカスタマイズ方法を参照してください。 * [Here’s a quick video showing how you can change the Post Title block](https://cloudup.com/cojFv8LXpf3) to have a set background color, different font sizes, and different alignments. * [投稿タイトルブロックの変更方法の紹介動画](https://cloudup.com/cojFv8LXpf3) - 背景色、フォントサイズ、配置を設定します。 * [Here’s a quick video showing how you can change the width of the column](https://cloudup.com/cC-ckgDK8DO) that the Featured Image block is in to make the image larger or smaller. * [カラム幅の変更方法の紹介動画](https://cloudup.com/cC-ckgDK8DO) - カラム内のアイキャッチ画像を大きくしたり、小さくしたりします。 * [Here’s a quick video showing how you can add additional blocks](https://cloudup.com/cYU5eXfLl3f) to the Query Block and customize them. * [ブロックの追加方法の紹介動画](https://cloudup.com/cYU5eXfLl3f) - クエリーブロックにブロック追加してカスタマイズします。 * [Here’s a quick video showing how you can change general alignment](https://cloudup.com/cHSgmd7DzHo) of the main blocks provided by the Query Block. * [配置全体の変更方法の紹介動画](https://cloudup.com/cHSgmd7DzHo) - クエリーブロックから提供されるメインブロックの配置を変更します。 Of note, each of these videos are done using the Small size option but you can choose whatever size option you’d like! 注意: 上の動画では小さな画像サイズオプションを使用していますが、もちろんどんなサイズでも好きなオプションを使用できます ! **What to notice:** **注意する点:** Remember to share a screenshot of what you created if you’re up for it! 作成した画面のスクリーンショットを共有してください ! * Did the experience crash at any point? * Did the saving experience work properly? * Did you find any features missing? * What did you find particularly confusing or frustrating about the experience? * What did you especially enjoy or appreciate about the experience? * Did you find that what you created in the Site Editor matched what you saw on your site? * Did it work using Keyboard only? * Did it work using a screen reader? * どこかでクラッシュしませんでしたか ? * 正しく保存できましたか ? * 不足する機能はありませんでしたか ? * テストで困った点、イライラした点はありませんか ? * テストで楽しかった点、いいねと思った点はありますか ? * サイトエディタで作成したページは、サイトで表示された場合にマッチしますか? * キーボードだけで動作しましたか ? * スクリーンリーダーだけで動作しましたか ? Leave Feedback by May 5th, 2021 ------------------------------- フィードバックをお願いします(2021年5月5日まで) --------------------------------------- _While other calls for testing have been open for two weeks, this is open for three weeks in order to see if it causes more feedback to come in. If you can help test, please amplify by sharing this post!_ _これまでの FSE テストの期間は2週間でしたが、より多くのフィードバックを得るため今回は3週間を設定します。是非、この記事を共有し、多くの人にテストを呼びかけてください !_ 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](https://github.com/WordPress/gutenberg/issues) and [in this GitHub repo for TT1 Blocks](https://github.com/WordPress/theme-experiments/issues). 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) や [TT1 ブロックの GitHub リポジトリ]((https://github.com/WordPress/theme-experiments/issues)) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。 [#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/)