https://make.wordpress.org/test/2022/04/28/fse-program-testing-call-14-rallying-recipe-reviewers/ <!-- FSE Program Testing Call #14: Rallying Recipe Reviewers ============================================================================================================================================================ --> FSEプログラムのテスト募集 #14: レシピのレビュアー募集 ============================================================================================================================================================ <!-- This post is the fourteenth 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://wordpress.slack.com/archives/C015GUFFC00) 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/)の14回目のテスト募集です。この実験的なプログラムの詳細については、[このFAQ](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/)を参照してください。このプログラムに参加するには、[Make Slack](https://make.wordpress.org/chat/) の [#fse-outreach-experiment](https://wordpress.slack.com/archives/C015GUFFC00) にアクセスし、今後のテストの告知や役に立つ投稿などを共有してください。 <!-- Overview -------- --> 概要 -------- <!-- This call for testing focuses on taking a few blocks for a practical spin to create a fun, interactive recipe focused site that has a customized commenting experience to rally your recipe reviewers.  --> このテスト募集では、レシピのレビュアーを集めるためにカスタマイズされたコメント体験を持たせた、楽しくてインタラクティブなレシピサイトを作成するために、いくつかのブロックを実際に使ってみることに的を絞っています。 <!-- **New Quote Block** --> **新しい引用ブロック** <!-- For your favorite recipe reviewers who leave behind their own tweaks to your recipes, you’ll explore adding in quotes from them using the new quote block. Currently, this is still in the experimental stage so get excited to report some bugs. Specifically, this new quote block supports using nested blocks, meaning you can add headings, lists, and more within a quote.  --> あなたのレシピに独自の微調整を加えているお気に入りのレシピレビュアーのために、あなたは新しい引用ブロックを使って彼らの引用を追加することを検討しています。現在、これはまだ実験段階なので、いくつかのバグを報告する前提で楽しんでください。具体的には、この新しい引用ブロックは、ネストされたブロックの使用に対応しています。つまり、引用の中に見出しやリストなどを追加することができます。 <!-- **New List Block** --> **新しいリストブロック** <!-- Get ready to get detailed – your recipes require lots of ingredients with alternatives in case folks don’t have them. We’ll rely on the new list block to accomplish this since it includes a different UX to explore.  --> 詳細な情報を得るために準備しましょう - レシピには、多くの材料と、それらがない場合の代用品が必要です。そのために、新しいリストブロックに頼ることになります。このブロックには、探索するための異なるUXが含まれているからです。 <!-- **Comments Query Loop blocks** --> **コメントクエリループブロック** <!-- Pulling from [this specific call for testing](https://make.wordpress.org/test/2022/04/08/help-test-the-comments-blocks-for-wordpress-6-0/), there are a ton of blocks for you to explore and build your desired commenting experience, with more to come as more functionality is supported in each block:  --> [この特別版のテスト募集](https://make.wordpress.org/test/2022/04/08/help-test-the-comments-blocks-for-wordpress-6-0/)でも見たように、理想のコメント体験を構築するために利用可能な多くのブロックがあります。各ブロックでは、より多くの機能がサポートされています。  <!-- * [Comments Query Loop](https://href.li/?https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-query-loop): An advanced block that displays post comments and allows for various layouts and  configurations. * [Comment Template](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-template): Contains the block elements used to display a comment, such as  the title, date, author, avatar and more. * [Avatar](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/avatar): Adds a user’s avatar. * [Comment Author Name](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-author-name): Displays the name of the author of the comment. * [Comment Date](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-date): Displays the date on which the comment was posted. * [Comment Content](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-content): Displays the contents of a comment. * [Comment Reply Link](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-reply-link): Displays a link to reply to a comment. * [Comment Edit Link](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-edit-link): Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability. * [Comments Pagination](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination): Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin * [Previous Page](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-previous): Displays the link to the previous page of comments. * [Page Numbers](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-numbers): Displays a list of page numbers for comments pagination. * [Next Page](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-next): Displays the link to the next page of comments. --> * [コメントクエリーループ](https://href.li/?https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-query-loop): 様々なレイアウトや構成で投稿のコメントを表示する、高度なブロックです。 * [コメントテンプレート](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-template): コメント表示に使用されるタイトル、日付、投稿者、アバターなどのブロック要素を含みます。 * [アバター](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/avatar): ユーザーのアバターを追加します。 * [コメントの投稿者名](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-author-name): コメントの投稿者名を追加します。 * [コメント日付](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-date): コメントの日付を追加します。 * [コメント本文](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-content): コメントの内容を表示します。 * [コメント返信リンク](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-reply-link): コメントに返信するリンクを表示します。 * [コメント編集リンク](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-edit-link): WordPress 管理画面でコメントを編集するリンクを表示します。リンクはコメント編集権限を持つユーザーのみに表示されます。 * [コメントのページネーション](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination): WordPress の管理画面のディスカッション設定で有効な場合、コメントの前のページや次のページへのページネーションを表示します。 * [前ページ](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-previous): 前のコメントページへのリンクを表示します。 * [ページ番号](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-numbers): コメントページネーション用のページ番号のリストを表示します。 * [次ページ](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-next): 次のコメントページへのリンクを表示します。 <!-- 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/).  * Use WordPress 5.9.3 (downloadable [here](https://wordpress.org/download/)). * Use the [Twenty Twenty-Two theme](https://wordpress.org/themes/twentytwentytwo/). * Use Gutenberg 13.1 or the latest version ([latest version](https://github.com/WordPress/gutenberg/releases/tag/v13.1.0)).  --> * テストサイトを使用してください。本番サイトは使用しないでください。ローカル環境へのインストールについては、[こちらの手順](https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/)に従うか、開発サイトをセットアップする[こちらのようなツール](https://localwp.com/) を利用してください。  * WordPress 5.9.3を使用してください。[こちら](https://wordpress.org/download/)からダウンロードできます。 * [Twenty Twenty-Two テーマ](https://wordpress.org/themes/twentytwentytwo/)を使用してください。 * Gutenberg 13.1、または最新バージョンを使用してください ([最新バージョン](https://github.com/WordPress/gutenberg/releases/tag/v13.1.0))。  <!-- Testing Instructions -------------------- --> テスト手順 -------------------- <!-- **Setup Instructions:** --> **設定手順:** <!-- 1. Have a test site using the latest version of WordPress (5.9+). It’s important this is not a production/live site.  2. Install and activate the [Twenty Twenty-Two theme](https://wordpress.org/themes/twentytwentytwo/) by going to Appearances > Themes. 3. Install and activate the Gutenberg plugin from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 13.1. 4. By the end of these steps, you should see a navigation item titled “Editor (beta) under Appearance. If you don’t, you aren’t using a [block theme](https://wordpress.org/support/article/block-themes/) and need to switch themes.  --> 1. 最新の WordPress バージョン (5.9以上) を使用したテストサイトを準備してください。本番サイトは使用しないでください。 2. 「外観」 > 「テーマ」で、[Twenty Twenty-Two テーマ]をインストールし、有効化します。 3. 「プラグイン」 > 「新規追加」から Gutenberg プラグインをインストールし、有効化します。すでにインストールされている場合は、Gutenberg 13.1 以上であることを確認してください。 4. ここまでで、「外観」の下に「エディター (ベータ)」というタイトルのナビゲーション項目が表示されているはずです。表示されていない場合は、[ブロックテーマ](https://ja.wordpress.org/support/article/block-themes/)を使用していません。テーマを切り替えてください。  <!-- **Testing Instructions:** --> **テスト手順:** <!-- _Helpful Hint: As you go through this test,_ [_you might find the List View_](https://cloudup.com/c-PkRBLi-He) _helpful while navigating between content._ --> _ヒント: このテスト実行でのコンテンツ間の移動には、_[_リストビュー_](https://cloudup.com/c-PkRBLi-He)_が便利です。_ <!-- Add a new recipe post --> 新しいレシピの投稿 <!-- 1. From your dashboard, head to Gutenberg > Experiments and turn on both the Quote and List experiments by checking the checkbox by each and saving (screenshot of what you want to see).  2. From your dashboard, head to Posts > Add New.  3. Title the post “May Macaroni” and add in a brief sentence for now (“Welcome to my latest monthly recipe where I’ll share the recipe I’m most excited to make in the month ahead”). Publish the post.  4. View the post on the front end and quickly add a few comments to the post. They can be brief like: “Great recipe!” & “Can’t wait to make this”.  --> 1. 管理画面で、「Gutenberg」 > 「実験中」に移動し、「リストブロック v2」と「引用ブロック v2」のチェックボックスをそれぞれオンにして保存します。  2. 管理画面で、「投稿」 > 「新規追加」をクリックします。 3. 投稿のタイトルを「5月のマカロニ」とし、簡単な文章を記入します (「最新のマンスリーレシピへようこそ。今月作るのがとても楽しみなレシピを紹介します。」)。投稿を公開します。  4. フロントエンドで投稿を表示し、投稿にいくつかのコメントを追加します。コメントは簡単なもので構いません。「素敵なレシピ !」「作るのが待ちきれない」等。 <!-- Create a custom template for recipes --> レシピ用のカスタムテンプレートの作成 <!-- 5. Return to the editor, open the Post Settings, and, under Templates, select the “New” option. 6. A name field will appear. Title the template something recipe related, like “Recipe Template”, and hit the create button. This will open up the template editor.  7. Customize the template as you’d like to start. For example, you can add in a Header template part that matches the wider site, change the font size of the post title, and more. You are likely going to want to add in a Header and Footer Template part at this [stage using whatever method you like to add blocks](https://wordpress.org/support/article/adding-a-new-block/). Remember that you can search for “header” and “footer” too!  --> 5. エディターに戻り、投稿の設定を開き、「テンプレート」の下の「新規」オプションを選択します。 6. 「名前」フィールドが表示されます。レシピに関連するタイトル、例えば「Recipe Template」を記入して、「作成」ボタンをクリックします。テンプレートエディターが表示されます。 7. テンプレートを自由にカスタマイズしていきます。例えば、幅広のサイトに合わせたヘッダーテンプレートパーツを追加したり、記事タイトルのフォントサイズを変更したり、等々。この段階で、[自分の好きなブロックの追加方法](https://wordpress.org/support/article/adding-a-new-block/)で、ヘッダーおよびフッターテンプレートパーツを追加できます。ヒント:「header」や「footer」でも検索できます。  <!-- Customize commenting functionality  --> コメント機能のカスタマイズ  <!-- 8. Where you see fit, add in the Comments Query Loop block. When you do so, various child blocks will be included. This is where using List View can help you get a sense of what’s there.  9. Explore the settings available for each block and begin customizing. This includes removing or adding additional blocks mentioned above under “Comments Query Loop blocks”, adding custom colors, changing font size, etc. You could also wrap the Comments Query loop in a [Group block in order to add custom borders](https://make.wordpress.org/core/2022/04/28/whats-new-in-gutenberg-13-1-27-april/#highlight-1). [Here’s a screenshot for inspiration](https://cloudup.com/c511EsnQG1N) that shows what you can do if you have time. 10. As you go, save changes and view your post to see what you’re creating live on your site. As much as you can, try to make the comments area an engaging and welcoming spot for your recipe reviewers.   --> 8. 好きな場所に「コメントクエリループブロック」を追加してください。これには、様々な子ブロックが含まれています。リストビューを使用すると、何が含まれているのかを簡単に把握できます。  9. 各ブロックで利用可能な設定を確認し、カスタマイズを始めます。コメントクエリループブロック内のブロックを削除したり、追加したり、カスタムカラーを追加したり、フォントサイズを変更したり、等々。コメントクエリループに[カスタムボーダーを追加するには、グループブロックでラップ](https://make.wordpress.org/core/2022/04/28/whats-new-in-gutenberg-13-1-27-april/#highlight-1)してください。また、[こちらのスクリーンショット](https://cloudup.com/c511EsnQG1N)を参照し、何ができるかを考えてみてください。 10. 編集中には変更を保存し、投稿を表示して、サイト上でライブで確認してください。コメント欄がレシピのレビューアにとって魅力的で歓迎される場所になるよう、できるる限り工夫しましょう。   <!-- Write your recipe with quote and list blocks --> レシピの中での新しい引用ブロックとリストブロック <!-- 11. When done, save changes to your template and hit “back” to return to your post itself.  12. Add a list block and begin listing ingredients (pasta, cheese, pepper, milk, pepper, etc). [Here’s a recipe](https://www.allrecipes.com/recipe/238691/simple-macaroni-and-cheese/) you can pull ingredients from in case you’re like me and need some inspiration. Notice how you can still hit return to add new list items and that you can use the + sibling inserter to add sub items.  13. Under a few ingredients, use the + sibling inserter to add in some alternatives. For example, you can list types of cheeses (provolone, cheddar, goat cheese). Aim to create something [like this screenshot](https://cloudup.com/cZspdgC72g2).  14. Add another list block and switch to numbers in the toolbar to list out cooking steps. These can be simple: Boil water, add pasta, cook for 10 min, add cheese, and taste. Try adding some sub items once more. For example, you can list different cook times depending on how folks like their pasta.  15. After the ingredients and steps are listed, add a heading block titled “Recipe Insights”.  16. Add in a quote block and create a quick quote from the point of view of a reader of the site who might have some tweaks to offer. Be sure to include some different blocks like another List block, Headings, etc. Here’s a [screenshot of an example](https://cloudup.com/c9zHChkPL3O).  17. Create a few quotes as you so desire and have time.  18. Update the post and make any additional changes you’d like to the post or Recipe Template itself.  --> 11. 完了したら、テンプレートの変更を保存し、「戻る」をクリックして、投稿の編集画面に戻ります。 12. リストブロックを追加して、材料 (パスタ、チーズ、胡椒、牛乳、など) のリストを書きます。アイデアが浮かばなければ、[こちらのレシピ](https://www.allrecipes.com/recipe/238691/simple-macaroni-and-cheese/)から材料のリストをコピーできます。ヒント: Enter キーを押すと、新しいリスト項目が追加されます。右側の「+」インサーターをクリックすると、リストのサブ項目を追加できます。  13. いくつかの材料の下に、右側の「+」インサーターを使用して、代用可能な材料を追加してください。例えば、チーズの種類（プロヴォローネ、チェダー、ゴートチーズ）をリストできます。[スクリーンショット](https://cloudup.com/cZspdgC72g2)を参考にしてください。  14. 別のリストブロックを追加し、ツールバーで番号付きリストに切り替え、料理の手順を書きます。単純なもので構いません。お湯を沸かす、パスタを入れる、10分茹でる、チーズを入れる、味見する。再度、サブ項目を追加します。例えば、パスタの種類に合わせた茹で時間をリストできます。  15. 材料と手順を記述した後に、見出しブロックを追加し、「レシピの応用」と題します。  16. 引用ブロックを追加して、サイトの訪問者による応用やコツなどの簡単な引用を作成します。別のリストブロックや見出しブロックなど、異なるブロックを含めてください。以下は、[サンプルのスクリーンショット](https://cloudup.com/c9zHChkPL3O)です。  17. 自由に、好きなだけ引用を作成してください。 18. 投稿を更新し、投稿やレシピテンプレートに必要な変更を加えます。  <!-- Make yourself some pasta and pat yourself on the back. Thanks for testing and remember to leave a comment below about your experience! --> 最後に、パスタを作って、自分をほめてあげてください。テストにご協力頂きありがとうございました。是非、以下のコメント欄から、あなたの体験をお聞かせください。 <!-- **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?  * What did you find 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 matched what you saw on your site? * Did it work using Keyboard only? * Did it work using a screen reader? --> * どこかでクラッシュしませんでしたか ? * 保存した際、正しく保存できましたか ? * テストで困った点、イライラした点はありませんか ? * テストで楽しかった点、いいねと思った点はありますか ? * もっと編集が楽になるには何があればよいですか ? * エディターで作成したページは、サイトの他の箇所とマッチしますか ? * キーボードだけで動作しましたか ? * スクリーンリーダーだけで動作しましたか ? <!-- Leave Feedback by May 18th, 2022 -------------------------------- --> フィードバックをお願いします (2022年5月18日まで) -------------------------------- <!-- You are always welcome to [join a social learning space to go through this call for testing on May 2nd](https://www.meetup.com/wordpress-social-learning/events/285551597/). All are welcome to join and we hope to see you there! --> [5月2日にソーシャルラーニングスペースで行う、FSE プログラムテスト募集のウォークスルー](https://www.meetup.com/wordpress-social-learning/events/285551597/)に是非ご参加ください。どなたでも歓迎します。お会いできるのを楽しみにしています。 [#fse-outreach-program](https://make.wordpress.org/test/tag/fse-outreach-program/), [#fse-testing-call](https://make.wordpress.org/test/tag/fse-testing-call/)