FSEプログラムのテスト募集 #5: クエリークエスト
以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #5: Query Quest」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
フルサイト編集アウトリーチプログラムとしての5回目のテスター募集です。この実験的なプログラムについての詳細情報はFAQ をご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。
機能の概要
全体のマイルストーンに選ばれたブロックはそう多くはありませんが、「クエリブロック」は選ばれました！その名の通り、このブロックは非常に強力なブロックで、自分のサイトに記事やページを表示したり、自分の好きなようにカスタマイズすることができます。例えば、このブロックを使って、特定のカテゴリーの投稿を表示するように設定すれば、お気に入りのレシピをすべて紹介することが簡単にできます。将来的には、テーマ作者がブロックテーマを構築する際に使用するツールとなり、ユーザーは投稿リストブロックのようなブロックバリエーションと多く接するようになると予想します。しかし今は冒険心を持ち、このブロックで何ができるのか「クエリークエスト」にトライしてみましょう。
このブロックの将来に興味をもった人は 最近の GitHub issue をチェック してみてください。ブロックの現行イテレーションにバンドルするクエリーブロックパターンの新しいアイデアを募集しています。さらに Gutenberg 10.5 では、選択可能なより多くのパターンが提供される予定です !
テスト環境
以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:
- テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
- 最新の WordPress を使用してください（ここからダウンロード可能）。
- 最新の TT1 Blocks テーマ を使用してください。
- 最新の Gutenberg を使用してください。この記事の執筆時点ではVersion 10.4です。
基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。
テストフロー
重要なお知らせ:
このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。
設定手順:
- 最新バージョンのWordPressをインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。
- 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
- 8つの投稿を作成し、2つの異なるカテゴリーとアイキャッチ画像を割り当ててください。または、このテスト用に作成された Gutenberg デモコンテンツ をダウンロードし、「ツール > インポート」の WordPress インポーターを使用してインポートしてください。
- サイトの管理画面にアクセスします。
- 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.4以降を使用してください。
- これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。
テスト手順
「サイトエディター（ベータ）」にアクセスします。自動的にサイトエディターが開かれ、ホームページに使われているテンプレートが表示されます。
- 「リスト表示」を使用して、親のクエリーブロックを選択し、ブロック全体を削除してください。これでクリーンな環境から始められます ! こちらの GIF も参照してください。
- クエリーブロックがあった所に、カラムブロックを追加し、2カラムの「50 / 50」を選択してください。
- 最初のカラムに見出しブロックを追加し、投稿カテゴリー名を何か1つ入力してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかを入力してください。
- 見出しブロックの直下にクエリーブロックを追加してください。設定中は、さまざまなサイズオプションから好きなオプションを選択してください。
- 挿入したら、右側サイドバーのブロックの設定を開き、「設定」セクションの下の「URL からクエリーを継承」をオフにしてください。
- ここには、このクエリーブロックで表示する投稿をカスタマイズできるオプションがあります。「フィルター」の下で表示するカテゴリーを選択してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかになります。
- クエリーブロックでは1つのカテゴリーだけが表示されるはずです。あとはクエリーブロックを自由にカスタマイズしてみてください ! たとえば、投稿者ブロックを追加して、ブロック設定でオプションを変更できます。ここで詰まった場合は、下の「カスタマイズ手順とアイデア」を参考にしてください。
- 2番目のカラムに対しても同じ手順を実行し、追加したクエリーブロックをカスタマイズしてください。別の投稿カテゴリーを選択して、新しい投稿を表示しましょう !
- サイトを表示し、作成したページがサイトエディターの表示にマッチすることを確認してください。
他のエクスペリエンスのカスタマイズ方法には、カラムの幅の変更、関連するブロックの追加、色の変更、等々があります。
カスタマイズ手順とアイデア
このブロックは通常のものより高度なブロックです。手順に詰まってしまった人向けに、このブロックのカスタマイズ方法を丁寧に伝える追加手順をご紹介します。始める前に、重要な注意ですが、クエリーブロックの美しさの1つは、クエリーされる投稿やページの1つを変更すると、表示されるコンテンツ全体に波及する点にあります。最初は混乱するかもしれませんが、これで各投稿の一貫性が保たれます。この点を念頭に、以下のクエリーブロックの追加のカスタマイズ方法を参照してください。
- 投稿タイトルブロックの変更方法の紹介動画 – 背景色、フォントサイズ、配置を設定します。
- カラム幅の変更方法の紹介動画 – カラム内のアイキャッチ画像を大きくしたり、小さくしたりします。
- ブロックの追加方法の紹介動画 – クエリーブロックにブロック追加してカスタマイズします。
- 配置全体の変更方法の紹介動画 – クエリーブロックから提供されるメインブロックの配置を変更します。
注意: 上の動画では小さな画像サイズオプションを使用していますが、もちろんどんなサイズでも好きなオプションを使用できます !
注意する点:
作成した画面のスクリーンショットを共有してください !
- どこかでクラッシュしませんでしたか ?
- 正しく保存できましたか ?
- 不足する機能はありませんでしたか ?
- テストで困った点、イライラした点はありませんか ?
- テストで楽しかった点、いいねと思った点はありますか ?
- サイトエディタで作成したページは、サイトで表示された場合にマッチしますか?
- キーボードだけで動作しましたか ?
- スクリーンリーダーだけで動作しましたか ?
フィードバックをお願いします(2021年5月5日まで)
これまでの FSE テストの期間は2週間でしたが、より多くのフィードバックを得るため今回は3週間を設定します。是非、この記事を共有し、多くの人にテストを呼びかけてください !
この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。
#fse-outreach-program, #fse-testing-call, #full-site-editing
Thanks!
この記事は、@atachibana の翻訳協力により公開することができました。ありがとうございます。