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

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

これは フルサイト編集アウトリーチプログラムの7回目の募集です！6回目のテスト募集で述べたように、まだ参加できていない方は、5.8に向けて今が絶好のチャンスです。 

この実験的なプログラムについての詳細情報はFAQをご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。今後のテストの案内や役立つ投稿などを共有できるはずです。

機能の概要

注意点として、テンプレート編集モードとは、フルサイト編集の機能で、個別の投稿またはページのコンテンツと、個別の投稿またはページが使用するテンプレートを切り替えて編集する機能を解除することです。この機能では、新しいテンプレートを作成したり、既存のテンプレートを編集したり、ページまたは投稿に使用するテンプレートを選択したりすることができます。この機能については、以下のビデオで詳しくご紹介しています。 

このテストを実例に基づいて行うために、仮にあなたの素晴らしい作品を紹介するポートフォリオページを作成してみましょう。デモコンテンツを使用すると、あなたの中にある建築家を受け入れ、Block Plugin HarborやGutenberg Parkour Spaceのような、架空の場所のビジュアルを披露することになるでしょう。あなたが作ったものをみんなで称えることができるように、コメントにはスクリーンショットを添えてください。インスピレーションのために、ここに私の作成例があります。また、ここにいくつかのGutenbergを使用したデザイナーによるハイエンドな例があります。

注釈: 第6回目のテスト募集に比べて、今回のテスト募集では、意図的により自由な設定を行い、テスターであるあなたにこの機能の限界に挑戦してもらいます。楽しんでくださいね！

テスト環境 

以下は適切な設定のための詳細な情報です。テスト環境を整備するための重要なポイントをご紹介します:

• テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
• 最新の WordPress を使用してください（ここからダウンロード可能）。
• 最新の TT1 Blocks テーマ を使用してください。
• 最新の Gutenberg を使用してください。この記事の執筆時点ではVersion 10.7.1です。

基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。

テスト手順 

このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。

既知の問題:

この記事の作成中に、いくつかの問題が発生しました。同じ問題に遭遇するかもしれませんが、これらの問題は報告されていますので安心してください。以下に大きな問題をいくつか挙げます。

• テンプレート編集モードでの保存の通知は、テンプレート自身の保存について言及しない。
• テンプレート編集モードの上部にあるブロックの編集が難しい (サイトエディターでも同様)。 
• 新しいテンプレートを作成した時、テンプレートエディタとフロントエンドの位置揃えがデフォルトでは一致しない。

積極的に繰り返し開発されているものには、この段階で既知の問題が出てくるものです。

設定手順: 

1. 最新バージョンの WordPress をインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。 
2. 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。 
3. 2種類のカテゴリーとお好みの画像を使用した6つの記事と、メニューに使用する最低4つのページを作成してください。または、このテスト用に作成された デモコンテンツ をダウンロードし、「ツール」>「インポート」にあるWordPress Importer を使ってインポートすることができます。
4. サイトの管理画面にアクセスします。
5. 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.7.1以降を使用してください。
6. これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。今回のテストではサイトエディターを使用しませんので、これをクリックしないでください。

ポートフォリオページを設定

7. 固定ページで「新規追加」を選択して、タイトルを「Portfolio」にします。
8. 固定ページのコンテンツで、クエリブロックを追加し、好きなパターンを選択するか、インサータを使ってクエリパターンを追加します。ココにパターンの挿入方法が分かるビデオがあります。
9. パターンを挿入したら、ブロック設定を開くことができ、「設定」>「URLからクエリを継承(Inherit query from URL)」をオフにします。すると、このクエリブロックに含まれる投稿をカスタマイズするオプションが表示されます。デモコンテンツでは以下のようなカテゴリーが用意されており、使用することができます:　Portfolio, Parks, Buildings。
10. クエリブロックを好きにカスタマイズしましょう！これは違うクエリブロックの中にカラムを作成して違う投稿カテゴリを表示させたり、投稿者ブロックなど追加のブロックを加えたりすることも含まれるでしょう。 もし困ったら「カスタマイズの手順やアイデア」に移動して参考にしてください。

新しいテンプレートの作成とカスタマイズ

11. サイドバーで（開いていなければ）「設定」を開き、固定ページ設定を選択します（固定ページとブロックのタブがあるはずです）。
12. 新しいテンプレートのタイトルを「Portfolio」とします。
13. そこから、テンプレート編集モードに入り、ヘッダーにサイトタイトル、サイトタグラインと区切りブロックが表示されるでしょう。これらのブロックはそのままでも、カラムに変換しても、または全部削除しても構いません。
14. ヘッダーにナビゲーションブロックを追加し「空欄で始める（Start Empty）」オプションを選択します。そこから、作成した各ページをメニューに追加して構成を決めていきます。デモコンテンツを使用している場合、ページの名前は以下のようになっていますので、これらを検索することができます: About, Contact, Resume, Partners, Influences
15. ここから、ヘッダー、フッターなどを好きにカスタマイズできます。もし困ったら「カスタマイズの手順やアイデア」に移動して参考にしてください。工夫を凝らして、自分だけのオリジナルを作ってみましょう！
16. 変更を保存して、ポートフォリオページを確認してください。

カスタマイズの手順やアイデア

前回のテストでは、カスタマイズテンプレートを作成する具体的な方法を説明しましたが、今回のテストでは、具体的にどのようにカスタマイズするかを探ります。ユーザー体験の最先端を試す、より自由で広がりのあるテストで、理想的には、バグや機能拡張の意見が見つかることを期待しています。今回のテストでは、カスタマイズのポイントが2つあるため、以下の説明やアイデアではそれぞれをカバーするように分かれています。ただし、ここで紹介する内容は、テスト可能なカスタマイズのほんの一例に過ぎません。

ポートフォリオページのアイデア:

• 投稿タイトルブロックを変更する。背景色を設定し、文字サイズや配置を変更できます。 
• アイキャッチ画像ブロックの入っている、カラムの幅を変更する。画像の大きさを変更できます。 
• クエリーブロックにブロックを追加し、カスタマイズする。
• クエリブロックが提供するメインブロックの全体の配置を変更する。 
• 「紹介」セクションを追加する。見出しブロックやカバーブロックなどを使用して、ポートフォリオページをよりリアルにできます。
• 投稿のカテゴリーごとに複数のクエリブロックを使用する。 デモコンテンツには、3つのカテゴリー「Portfolio」「Parks」「Buildings」があります。

ポートフォリオテンプレートのアイデア:

• ナビゲーションブロックでカスタムメニューを作成し、「表示設定」の「レスポンシブメニューを有効にする」オプションを使用する。例えば、「私について」「経歴」「問い合わせ」ページをサイトの上部のメニューで、「パートナー」「影響」ページを下部のメニューで表示できます。
• テンプレートパーツ、クエリブロック、グループブロックなど、さまざまなブロックのレイアウトや幅をカスタマイズする。
• さまざまなブロックの色、フォントサイズ、配置をカスタマイズする。サイトタイトルブロックの例。
• テンプレートパーツブロックを使ってカスタムフッターを追加し、作品への関心を高める。

注意する点:

作成した画面のスクリーンショットを共有してください !

• どこかでクラッシュしませんでしたか ?
• 正しく保存できましたか ?
• 不足する機能はありませんでしたか ?
• テストで困った点、イライラした点はありませんか ?
• テストで楽しかった点、いいねと思った点はありますか ?
• テンプレート編集モードで作成したページは、サイトで表示された場合にマッチしますか?
• キーボードだけで動作しましたか ?
• スクリーンリーダーだけで動作しましたか ?

フィードバックをお願いします(2021年6月9日まで)

この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ) に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。 

注意: 当初、フィードバックは6月9日までとしていましたが、フィードバックの時間を確保するため、6月16日までに変更されました。

#fse-outreach-program, #fse-testing-call, #full-site-editing

Thanks!

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

以下は、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です。

基本のルールとして、セットアップでは各プログラムの最新バージョンを使用してください。またこの記事の公開後もバージョンは更新される可能性がある点に注意してください。

テストフロー

重要なお知らせ:

このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。

設定手順:

1. 最新バージョンのWordPressをインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。 
2. 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
3. 8つの投稿を作成し、2つの異なるカテゴリーとアイキャッチ画像を割り当ててください。または、このテスト用に作成された Gutenberg デモコンテンツ をダウンロードし、「ツール > インポート」の WordPress インポーターを使用してインポートしてください。
4. サイトの管理画面にアクセスします。
5. 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.4以降を使用してください。
6. これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。

テスト手順

「サイトエディター（ベータ）」にアクセスします。自動的にサイトエディターが開かれ、ホームページに使われているテンプレートが表示されます。

7. 「リスト表示」を使用して、親のクエリーブロックを選択し、ブロック全体を削除してください。これでクリーンな環境から始められます ! こちらの GIF も参照してください。
8. クエリーブロックがあった所に、カラムブロックを追加し、2カラムの「50 / 50」を選択してください。
9. 最初のカラムに見出しブロックを追加し、投稿カテゴリー名を何か1つ入力してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかを入力してください。
10. 見出しブロックの直下にクエリーブロックを追加してください。設定中は、さまざまなサイズオプションから好きなオプションを選択してください。
11. 挿入したら、右側サイドバーのブロックの設定を開き、「設定」セクションの下の「URL からクエリーを継承」をオフにしてください。
12. ここには、このクエリーブロックで表示する投稿をカスタマイズできるオプションがあります。「フィルター」の下で表示するカテゴリーを選択してください。デモコンテンツを使用している場合は、「Hikes」または「Travel」のどちらかになります。
13. クエリーブロックでは1つのカテゴリーだけが表示されるはずです。あとはクエリーブロックを自由にカスタマイズしてみてください ! たとえば、投稿者ブロックを追加して、ブロック設定でオプションを変更できます。ここで詰まった場合は、下の「カスタマイズ手順とアイデア」を参考にしてください。 
14. 2番目のカラムに対しても同じ手順を実行し、追加したクエリーブロックをカスタマイズしてください。別の投稿カテゴリーを選択して、新しい投稿を表示しましょう !
15. サイトを表示し、作成したページがサイトエディターの表示にマッチすることを確認してください。 

他のエクスペリエンスのカスタマイズ方法には、カラムの幅の変更、関連するブロックの追加、色の変更、等々があります。

カスタマイズ手順とアイデア

このブロックは通常のものより高度なブロックです。手順に詰まってしまった人向けに、このブロックのカスタマイズ方法を丁寧に伝える追加手順をご紹介します。始める前に、重要な注意ですが、クエリーブロックの美しさの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 の翻訳協力により公開することができました。ありがとうございます。

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #2: Build a Homepage with Site Editing Blocks」を訳したものです。

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

これはフルサイト編集アウトリーチプログラムとしての2回目のテスター募集です。この実験的なプログラムについての詳細情報はここの FAQ をご覧ください。程よく楽しんで参加するために、Make Slack の #fse-outreach-experiment チャンネルへ参加してください。そうすれば今後のテストの案内や役立つ投稿などを共有できます。

機能の概要

テストの詳細に入る前に、このテスター募集の焦点についてお話しましょう。フルサイト編集を使うことで、サイトの全ての要素を編集する能力が開放されます。その体験を促進させるために新しいブロックが必要となります。あなたはすでにこれらのブロックのいくつかを見かけているかもしれません! 例えば、サイトタイトルブロックはどこでも設置することができ、サイトタイトルを変更する度に自動的に更新されます。

この具体的なテストでは、これらのブロックのうちのいくつかを使用してサイドバーがある基本的なホームページを構築することを検討します:

• サイトタイトルブロック
• サイトロゴブロック
• 投稿一覧ブロック
• 投稿タグブロック
• ナビゲーションブロック
• テンプレートパーツブロック

これは、シンプルなものを構築するために現在可能なことを探求しつつ、これらの新しいブロックに慣れることのできる両得の機会だと考えてください。最終的には、サイト編集のために定義されているように、これらのブロックはインサータに具体的に分類されます。

テスト環境

以下にすべてを適切に設定するための詳細な情報があります。テスト環境を整備するための重要なポイントをご紹介します:

• テストサイトを使用してください。本番サイトは使わないでください。ここの指示に従ってローカルインストールを設定するか、このような開発用サイトを設定するツールを使用してください。
• WordPress 5.6.1を使用してください（ココからダウンロード可能）。
• TT1 ブロックテーマを使用してください。テスター募集の最後まで進むと、このテーマを使用しているかどうかをダブルチェックする必要があります！
• Gutenberg 10.0を使用してください（最新バージョン）。

テストの流れ

この特定の機能をテストする際の基本的な流れは以下の通りです。何か分からないことがあれば、以下にコメントしてください。

重要なお知らせ: 

このテスター募集は特定の機能をテストすることに焦点を当てていますが、ベータ機能をテストする過程で他のバグを見つけることもあると思います。見つけたバグは、たとえそれがテストしている機能に直接関係なくても、テストレポートにぜひ含めていただければと思います。

設定手順: 

1. WordPress 5.6.1を使ったテストサイトを準備します。本番サイトは絶対に使わないようにしてください。
2. 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。
3. タグをいくつか追加したダミー投稿を3つ作成するか、ここにある Gutenberg のデモコンテンツを使用します。このコンテンツの設定方法を説明する短い動画もあります。
4. サイトの管理画面にアクセスします。
5. 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.0以降を使用するようにしてください。
6. これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。

テスト手順:

手助けになるヒント: このテストを通して、コンテンツ間を移動する際にリストビューが便利だということに気づくかもしれません。

1. 「サイトエディタ（ベータ）」画面に移動します。自動的に現在のホームページを編集するテンプレートがサイトエディタで開かれます。
2. リストビューを使用して、クエリブロックが存在するかどうか見てください。もしそうであれば、それを選択して削除してください。これは物事をおさめるための単なる事務的な手順です 🙂

ヘッダーを変更します:

3. 多分、作成されたヘッダーが直接編集できるようになっているでしょう。サイトタイトルブロックのテキストを更新してください。それを楽しんでください! 新しい見出しサイズを選択したり、コンテンツを変更したり、ブロックの設定を直接変えたり。あなたが始められるいくつものアイデアがあります。
4. やりたい変更ができたら、「デザインを更新」を選択し全ての変更を保存する手順に進んでください。
5. ナビゲーショントグルを開いて、テンプレートパーツ > 「ヘッダー」を選択してください。これはサイトのヘッダー部分だけを分離して表示します。この画面では、サイトロゴブロックを追加して好きな感じに構成してください。
6. 希望どおりに変更できたら、「デザインを更新」を選択し全ての変更を保存する手順に進んでください。
7. 再度、 ナビゲーショントグル を開き、テンプレート > インデックス を選択してホームページに戻ってください。 
8. ヘッダーにメニューを組み込む「ナビゲーションブロック」があります (リストビューが便利ですね)。ナビゲーションブロックをテストしてください。メニュー項目を直接変更したり、ブロック設定でフォントや色を変更したり、等々。  
9. リストビューを使用してヘッダーテンプレートパーツを選択し、3点リーダーツールバーメニューの「後に挿入」オプションを使用してヘッダーの外にブロックを追加してください。 

コンテンツの追加:

16. 70/30 または 30/70 のカラムブロックを追加してください。大きい方のカラムに見出しブロックを使って「コンテンツ」と書いてください。小さい方のカラムに見出しブロックを使って「サイドバー」と書いてください。
17. 大きい方のカラムに投稿一覧ブロックを追加し、自由に構成を選択してください。例: タイトルと日付、タイトルと抜粋、等。
18. そこから、投稿一覧ブロックに表示されている投稿の1つに投稿タグブロックを追加します。1つの投稿に追加すると、すべての投稿に追加されることに注意してください。
19. 上の手順を投稿者ブロックでも繰り返してください。追加したブロックをそのままにしたり、削除してみてください。  

サイドバーの作成:

20. 小さな方のカラムで自由にサイドバーを作ってみてください。たとえばソーシャルアイコンブロックや最近の投稿ブロック、単純な画像ブロックを試してみてください。
21. 変更を終えたら「デザインの更新」を選択し、すべての変更を保存する、保存のフローを体験してください。
22. 以下のコメント欄または GitHub ディレクトリ であなたの体験を共有してください。体験は何度繰り返していただいても構いません。フィードバックは大歓迎です !

テストの様子:

このビデオではセットアップ後、ここにある Gutenberg デモコンテンツを使用したテストの流れを紹介しています。流れは自由に変更、調整して、オリジナルのテストを作ってみてください。

注意する点:

• どこかでクラッシュしましたか ?
• 保存は正しく動作しましたか ? 
• 適切なブロックがないために実行できなかったことはありませんか ? 
• テストで困った点、イライラした点はどれですか ?
• テストで楽しかった点、いいねと思った点はどれですか ?
• サイトエディタで作成したものはあなたのホームページにマッチしますか?
• キーボードだけで動作しましたか ?
• スクリーンリーダーだけで動作しましたか ?

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

この投稿にコメントでフィードバックをお願いします。あるいは、Gutenberg の GitHub リポジトリディレクトリ や TT1 ブロックの GitHub リポジトリ に issue を作成いただくのでも構いません。GitHub にフィードバックした場合は、以下にリンクを貼ったコメントを残してください。誰かが同じ問題を報告している場合でも、是非、あなたの体験を追記してください。体験に取り組んでいる私たちが何を改善すべきか包括的な洞察を与えてくれます。#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg

Thanks!

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