mimi 投稿時間: 11:45 PM 投稿日: 2021年2月19日
タグ: , , ,   

FSEプログラムのテスター募集 #2: サイト編集ブロックでホームページを構築する

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

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

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

機能の概要

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

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

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

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

テスト環境

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

テストの流れ

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

重要なお知らせ: 

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

設定手順: 

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

テスト手順:

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

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

ヘッダーを変更します:

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

コンテンツの追加:

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

サイドバーの作成:

  1. 小さな方のカラムで自由にサイドバーを作ってみてください。たとえばソーシャルアイコンブロックや最近の投稿ブロック、単純な画像ブロックを試してみてください。
  2. 変更を終えたら「デザインの更新」を選択し、すべての変更を保存する、保存のフローを体験してください。
  3. 以下のコメント欄または 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 の翻訳協力により公開することができました。ありがとうございます。

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