以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #14: Rallying Recipe Reviewers – Make WordPress Test」を訳したものです。 

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

この投稿はフルサイト編集アウトリーチプログラムの14回目のテスト募集です。この実験的なプログラムの詳細については、このFAQを参照してください。このプログラムに参加するには、Make Slack の #fse-outreach-experiment にアクセスし、今後のテストの告知や役に立つ投稿などを共有してください。

概要

このテスト募集では、レシピのレビュアーを集めるためにカスタマイズされたコメント体験を持たせた、楽しくてインタラクティブなレシピサイトを作成するために、いくつかのブロックを実際に使ってみることに的を絞っています。

新しい引用ブロック

あなたのレシピに独自の微調整を加えているお気に入りのレシピレビュアーのために、あなたは新しい引用ブロックを使って彼らの引用を追加することを検討しています。現在、これはまだ実験段階なので、いくつかのバグを報告する前提で楽しんでください。具体的には、この新しい引用ブロックは、ネストされたブロックの使用に対応しています。つまり、引用の中に見出しやリストなどを追加することができます。

新しいリストブロック

詳細な情報を得るために準備しましょう – レシピには、多くの材料と、それらがない場合の代用品が必要です。そのために、新しいリストブロックに頼ることになります。このブロックには、探索するための異なるUXが含まれているからです。

コメントクエリループブロック

この特別版のテスト募集でも見たように、理想のコメント体験を構築するために利用可能な多くのブロックがあります。各ブロックでは、より多くの機能がサポートされています。

• コメントクエリーループ: 様々なレイアウトや構成で投稿のコメントを表示する、高度なブロックです。
  • コメントテンプレート: コメント表示に使用されるタイトル、日付、投稿者、アバターなどのブロック要素を含みます。
    • アバター: ユーザーのアバターを追加します。
    • コメントの投稿者名: コメントの投稿者名を追加します。
    • コメント日付: コメントの日付を追加します。
    • コメント本文: コメントの内容を表示します。
    • コメント返信リンク: コメントに返信するリンクを表示します。
    • コメント編集リンク: WordPress 管理画面でコメントを編集するリンクを表示します。リンクはコメント編集権限を持つユーザーのみに表示されます。
  • コメントのページネーション: WordPress の管理画面のディスカッション設定で有効な場合、コメントの前のページや次のページへのページネーションを表示します。
    • 前ページ: 前のコメントページへのリンクを表示します。
    • ページ番号: コメントページネーション用のページ番号のリストを表示します。
    • 次ページ: 次のコメントページへのリンクを表示します。

テスト環境

構築の際の重要なポイントを紹介します。テスト環境の詳細な構築手順は後述します。

• テストサイトを使用してください。本番サイトは使用しないでください。ローカル環境へのインストールについては、こちらの手順に従うか、開発サイトをセットアップするこちらのようなツール を利用してください。
• WordPress 5.9.3を使用してください。こちらからダウンロードできます。
• Twenty Twenty-Two テーマを使用してください。
• Gutenberg 13.1、または最新バージョンを使用してください (最新バージョン)。

テスト手順

設定手順:

1. 最新の WordPress バージョン (5.9以上) を使用したテストサイトを準備してください。本番サイトは使用しないでください。
2. 「外観」 > 「テーマ」で、[Twenty Twenty-Two テーマ]をインストールし、有効化します。
3. 「プラグイン」 > 「新規追加」から Gutenberg プラグインをインストールし、有効化します。すでにインストールされている場合は、Gutenberg 13.1 以上であることを確認してください。
4. ここまでで、「外観」の下に「エディター (ベータ)」というタイトルのナビゲーション項目が表示されているはずです。表示されていない場合は、ブロックテーマを使用していません。テーマを切り替えてください。

テスト手順:

ヒント: このテスト実行でのコンテンツ間の移動には、リストビューが便利です。

新しいレシピの投稿

1. 管理画面で、「Gutenberg」 > 「実験中」に移動し、「リストブロック v2」と「引用ブロック v2」のチェックボックスをそれぞれオンにして保存します。
2. 管理画面で、「投稿」 > 「新規追加」をクリックします。
3. 投稿のタイトルを「5月のマカロニ」とし、簡単な文章を記入します (「最新のマンスリーレシピへようこそ。今月作るのがとても楽しみなレシピを紹介します。」)。投稿を公開します。
4. フロントエンドで投稿を表示し、投稿にいくつかのコメントを追加します。コメントは簡単なもので構いません。「素敵なレシピ !」「作るのが待ちきれない」等。

レシピ用のカスタムテンプレートの作成

5. エディターに戻り、投稿の設定を開き、「テンプレート」の下の「新規」オプションを選択します。
6. 「名前」フィールドが表示されます。レシピに関連するタイトル、例えば「Recipe Template」を記入して、「作成」ボタンをクリックします。テンプレートエディターが表示されます。
7. テンプレートを自由にカスタマイズしていきます。例えば、幅広のサイトに合わせたヘッダーテンプレートパーツを追加したり、記事タイトルのフォントサイズを変更したり、等々。この段階で、自分の好きなブロックの追加方法で、ヘッダーおよびフッターテンプレートパーツを追加できます。ヒント:「header」や「footer」でも検索できます。

コメント機能のカスタマイズ

8. 好きな場所に「コメントクエリループブロック」を追加してください。これには、様々な子ブロックが含まれています。リストビューを使用すると、何が含まれているのかを簡単に把握できます。
9. 各ブロックで利用可能な設定を確認し、カスタマイズを始めます。コメントクエリループブロック内のブロックを削除したり、追加したり、カスタムカラーを追加したり、フォントサイズを変更したり、等々。コメントクエリループにカスタムボーダーを追加するには、グループブロックでラップしてください。また、こちらのスクリーンショットを参照し、何ができるかを考えてみてください。
10. 編集中には変更を保存し、投稿を表示して、サイト上でライブで確認してください。コメント欄がレシピのレビューアにとって魅力的で歓迎される場所になるよう、できるる限り工夫しましょう。

レシピの中での新しい引用ブロックとリストブロック

11. 完了したら、テンプレートの変更を保存し、「戻る」をクリックして、投稿の編集画面に戻ります。
12. リストブロックを追加して、材料 (パスタ、チーズ、胡椒、牛乳、など) のリストを書きます。アイデアが浮かばなければ、こちらのレシピから材料のリストをコピーできます。ヒント: Enter キーを押すと、新しいリスト項目が追加されます。右側の「+」インサーターをクリックすると、リストのサブ項目を追加できます。
13. いくつかの材料の下に、右側の「+」インサーターを使用して、代用可能な材料を追加してください。例えば、チーズの種類（プロヴォローネ、チェダー、ゴートチーズ）をリストできます。スクリーンショットを参考にしてください。
14. 別のリストブロックを追加し、ツールバーで番号付きリストに切り替え、料理の手順を書きます。単純なもので構いません。お湯を沸かす、パスタを入れる、10分茹でる、チーズを入れる、味見する。再度、サブ項目を追加します。例えば、パスタの種類に合わせた茹で時間をリストできます。
15. 材料と手順を記述した後に、見出しブロックを追加し、「レシピの応用」と題します。
16. 引用ブロックを追加して、サイトの訪問者による応用やコツなどの簡単な引用を作成します。別のリストブロックや見出しブロックなど、異なるブロックを含めてください。以下は、サンプルのスクリーンショットです。
17. 自由に、好きなだけ引用を作成してください。
18. 投稿を更新し、投稿やレシピテンプレートに必要な変更を加えます。

最後に、パスタを作って、自分をほめてあげてください。テストにご協力頂きありがとうございました。是非、以下のコメント欄から、あなたの体験をお聞かせください。

注意する点:

必要であれば、作成したページのスクリーンショットを共有してください。

• どこかでクラッシュしませんでしたか ?
• 保存した際、正しく保存できましたか ?
• テストで困った点、イライラした点はありませんか ?
• テストで楽しかった点、いいねと思った点はありますか ?
• もっと編集が楽になるには何があればよいですか ?
• エディターで作成したページは、サイトの他の箇所とマッチしますか ?
• キーボードだけで動作しましたか ?
• スクリーンリーダーだけで動作しましたか ?

フィードバックをお願いします (2022年5月18日まで)

5月2日にソーシャルラーニングスペースで行う、FSE プログラムテスト募集のウォークスルーに是非ご参加ください。どなたでも歓迎します。お会いできるのを楽しみにしています。

#fse-outreach-program, #fse-testing-call

Thanks!

この記事は、 @atachibana の翻訳協力により公開することができました。ありがとうございます。