カテゴリーアーカイブ: テスト

Akira Tachibana 投稿時間: 2:31 AM 投稿日: 2023年10月1日  

FSE プログラムのテスト募集 #26: 最後の仕上げ

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

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

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

概要

WordPress 6.4のリリースを目前に控え、今回のテスト募集では、このリリースで実装される主要な機能の多くを紹介します。

フレーム作り

あなたは新しい写真のポートフォリオを立ち上げることにしました。今後数ヶ月をかけて、さらにコンテンツを追加する予定ですので、あらかじめきちんと整理し、将来、新しいフォントやパターンを使用した変更や追加に対応したいところです。しかしサイトを立ち上げたばかりでどのように完成させればよいのか、そのビジョンはまだありません。

テスト手順

Gutenberg のバージョンが短期間で切り替わるため、このテストではあらかじめ準備された構築済みのサイトを使用してください。

  1. 次のリンクを1度だけ開く: https://app.instawp.io/launch?t=fse-testing-call-26&d=v2
  2. このリンクを何度も開かないでください。開くたびに新しいサイトが作成されます。作成できるサイトには50の制限があります。
  3. 「Launch Demo」が表示される場合は、これをクリックする。
  4. 最大24時間使用できるサイトが起動します。「Magic Login」をクリックして、管理画面にログインする。
  5. 「Settings」 > 「General」にアクセスし、「Site Language」で「日本語」を選択し、「Save Changes」をクリックする。画面表示が日本語に切り替わります。
  6. 「ダッシュボード」 > 「更新」にアクセスし、末尾の「翻訳を更新」をクリックする。 注意: それでも一部、日本語への翻訳が追いついていないものがあります。
  7. テスト中に再度アクセスできるように、サイトへのリンクを保存する。

フォントの管理

  1. 「外観」 > 「エディター」 > 「スタイル」にアクセスし、鉛筆アイコンを選択し、スタイルパネルを開く。
  2. 「タイポグラフィ」を選択してアクティブなフォントのリストを表示し、「Aa」アイコンをクリックして「フォントの管理」を開く。
  3. ドラッグ & ドロップで新しいフォントファイルをアップロードする。https://fonts.google.com/ からフォントをダウンロードできます。
  4. フォントマネージャーから、アップロード済みのフォント「Inclusive Sans」を選択し、「削除」を選択してアンインストールする。
  5. フォントマネージャーを終了し、見出しとテキストのフォントオプションをアップロードした新しいフォントに変更する。
  6. 変更を保存する。

サイトの整理

  1. 「Command ＋ K」を押すか、トップツールバーフィールドをクリックしてコマンドパレットを開き、これを使用してリストビューを開く （詳細な手順は意図的に省略します）。
  2. 「Want to work with me?」を含むカラムブロックを選択し、再びコマンドパレットを使用して、このブロックをグループ化する。
  3. この段階でページ上には、2つの異なるグループブロックが表示されるはずです。それぞれを選択し、リストビューの縦の3点リーダーメニューを使用して「名前を変更」オプションから、それぞれに異なる名前を付けます。

パターンの作成

  1. 新しく名前をつけた「Want to work with me?」グループブロックを選択し、ブロックの設定を開く。
  2. 「スタイル」タブで、メディアライブラリから白黒の背景画像を追加する。必要に応じてテキストの色を調整する。
  3. 縦の3点リーダーメニューを使用して「Want to work with me?」用の新しい同期パターンを作成し、好みのカテゴリーを追加する。

ポートフォリオページの仕上げ

  1. コマンドパレットを使用して、固定ページの下書きで、タイトル「Portfolio」を開く。これからこのページに「人物あり」、「人物なし」、「モノクロ」の3つのセクションを作成し、このセクションに沿ってすでにリストされているすべての写真を紹介します。
  2. 好きな方法で、非同期パターンの「Portfolio section」を追加する （左上の「+」ボタンをクリックしてインサーターを使用するか、または「/」オプションのクイックインサーターを使用する）。
  3. このパターンと提供されるデフォルトのコンテンツを使用して、それぞれの詳細を記入する。適切な見出し、説明、他の画像と同じ縦横比に設定した画像、残りのギャラリー項目など。サンプルの画像がこちらにあります。
  4. 上の手順に従って、3つのセクションをすべて作成する。 「人物あり」、「人物なし」、「モノクロ」。
  5. 各見出しのフォントを、スタイルで最初に設定したグローバルオプションとは異なるものに変更する (そしてすべてのオプションが表示されることを確認する)。
  6. リストビューを開き、画像とギャラリーのプレビューを参考に、ドラッグ & ドロップで各セクションを別の順番に並べ替える。
  7. 仕上げとして、各セクションの最初の単一の画像を選択し、ブロック設定サイドバーを開き、「クリックで展開」オプションをオンにする。

テンプレートの切り替え

  1. 完了したら「ブロック設定」を開き、「ページ」タブで「テンプレート」の隣にある「固定ページ」を選択する。
  2. 「テンプレートを編集」または「テンプレートを交換」オプションが表示されます。「テンプレートを交換」を選択し、「Portfolio」オプションを選択する。
  3. 保存する前に、ページのステータスを「公開」に変更する。
  4. 変更を保存する。
  5. コマンドパレットを使用してサイトを表示する。新しいポートフォリオページが自動的にメニューに含まれています。また各セクションの最初の画像にカーソルを合わせると、拡大して単独で表示するオプションがあります。

新しいポートフォリオのアナウンスと、Like ボタンの削除

  1. サイトエディターに戻り、コマンドパレットを使用して、新しい投稿を追加する。
  2. 投稿のタイトルを「ポートフォリオのアナウンス」とし、簡単な説明を書き、リストブロックで各ポートフォリオセクション 「人物あり」、「人物なし」、「モノクロ」を並べる。このときブロックツールバーがリスト内の個々の項目ではなく、常にリスト全体の上部ににとどまっていることに気づいてください。
  3. 投稿を公開して、参照し、投稿にコメントを残す。「Like」ボタンがあることに注意してください。
  4. 投稿エディターに戻り、コマンドパレットを使用して、個別投稿テンプレートを開く。
  5. リストビューを使用してコメントテンプレートを選択し、ブロック設定を開く。「プラグイン」セクションの「Like」ボタンオプションがオンになっているので、このオプションをオフにして、変更を保存する。

さらにその先へ

サイトを表示し、あちらこちらをクリックし、自由に追加、変更を加えてください。新しい投稿を作成したり、新しいパターンを作成したり、サイトのスタイルを調整したり。6.4で追加される新機能を中心に、さらにいろいろと探索してみてください。

注意する点:

  • どこかでクラッシュしませんでしたか ?
  • 保存した際、正しく保存できましたか ?
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ?
  • もっとサイトの構築や新しいコンテンツの執筆が楽になるには何があればよいですか ?
  • 作成したページは、サイトで表示された場合にマッチしていますか ?
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?
  • 携帯デバイスだけで動作しましたか ? 問題があれば、@nomadskateboarding を呼んでください !

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

#fse-testing-call

Thanks!

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

Akira Tachibana 投稿時間: 2:05 PM 投稿日: 2022年7月17日
タグ: ,   

FSEプログラムのテスト募集 #15: カテゴリーのカスタマイズ

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

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

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

概要

今回のテスト募集では、表面的には、サイトエディターでこれまで行ってきた一般的なタスクに焦点を当てます。つまり、新しいテンプレートを作成し、いくつかの投稿に適用します。しかし、タスクを進めていくうちに、次のような機能の連携に (きっと) 驚き、サイト編集体験の奥深さを実感するでしょう。

追加のテンプレートオプション

サイトエディタから作成可能なテンプレートの拡張は、引き続き高い優先度で開発されていて、多くの新しいオプションがあります。今回のテストでは特に一般的な「カテゴリーテンプレート」に焦点を当てますが、Gutenberg 13.7 (次のバージョン) では、特定のカテゴリー用のテンプレートを作成できるようになります。例えば「WordPress」に分類されたすべての投稿に、固有のテンプレートを用意できます。このテスト募集に参加するタイミングによっては、この新しいオプションを試せるかもしれません。

新しいテンプレートピッカーデザイン

Gutenberg 13.6では、テンプレートピッカーのデザインが新しくなりました。スペースを取らず、他の投稿の詳細とより自然に整合します。

新しいテンプレートパーツ選択体験のビジュアル

より分かりやすいレイアウトコントロール

「継承デフォルトレイアウト」と聞くたびに困惑していたのであれば、最近、この機能の説明が更新されたのは嬉しい知らせでしょう]。

(セミロック) 新しい投稿を作成する際のスターターパターン

パターンも、そして、さまざまなブロックがロックされている事実もすべて、エディタ体験のカスタマイズに利用される機能の一部です。新しい WordPress サイトにそのまま組み込まれることはなさそうですが、それらを利用する人が素晴らしい体験をできるようにテストすることは重要です。今回のテストでは、WordPress 6.0のページで初めて導入され、Gutenberg 13.6ではすべての投稿タイプで利用できるようになった新しいスターターパターンを確認します。ボーナスとして、各パターンではいくつかのブロックがロックされ、よりきめ細かな方法で体験を制御する方法を模索しています。

カバーブロックでのアイキャッチ画像の使用

今回のテストに登場する、WordPress 6.0から搭載されたもう一つの機能は、アイキャッチ画像使用時のプレースホルダーの改善や、メディアの置換オプションでの見つけやすさです。

アイキャッチ画像を使用するカバーブロック機能のビジュアル

テスト手順

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

InstaWP についての注意

InstaWP チームが、この FSE プログラムテストのために利用可能なアカウントを準備してくれました。自分でテストサイトを立ち上げなくても、一時的なテストサイトを使用できます。InstaWP でサイトを立ち上げた場合、InstaWP はメールアドレスを収集しません。このため、再度サイトにアクセスするには、リンクを保存しておく必要があります。InstaWP チームに感謝します。

テストサイトの立ち上げ、または、テスト環境のセットアップ

構築済みのテストサイトを使用する

  1. 次のリンクを1度だけ開く: https://app.instawp.io/launch?t=fse-fifteenth-call-for-testing このリンクを繰り返し開かないでください。クリックのたびに新しいサイトが作成されます。作成可能なサイト数は50に制限されています。
  2. これにより、最長で14日間使用できるサイトが起動します。「Access Now (今すぐアクセス)」を選択し、WordPress 管理画面でログインします。
  3. テスト中に再びアクセスできるように、リンクを保存してください。
  4. 日本語に切り替える場合は、「Settings」を選択し、「Site Language」で「日本語」を選択し、「Save Changes」をクリックします。また Gutenberg 系の文字列が英語の場合は、「プラグイン」画面で、「Gutenberg」を一度無効化してから、再度、有効可し、「ダッシュボード」 > 「更新」で翻訳を更新してください。
  5. 「外観」 > 「エディター (ベータ)」にアクセスします。自動的に、サイトエディターでホームページのテンプレートが開かれます。

自分でテストサイトをセットアップする

  1. 最新バージョンの WordPress を使用したテストサイトを用意します。これは、本番またはライブサイトではないことが重要です。
  2. Twenty Twenty-Two テーマを「外観」 > 「テーマ」からインストールし、有効化します。Twenty Twenty-Two テーマにパターンフォルダを追加し、以下の2つのファイルを追加してください。
    new-event-announcement.php と event-recap.php
    この機能についての詳細はこちらです。
新しいパターンフォルダとその中に置かれた2つのパターンで、テストサイトのファイルがどのように見えるかのビジュアルです。
  1. 「プラグイン」 > 「新規追加」から Gutenberg プラグインをインストールし、有効化します。すでにインストールされている場合は、最低でも Gutenberg 13.6以上をを使用していることを確認してください。
  2. そこから、「外観」 > 「エディター （ベータ）」に移動します。これで自動的にホームページのテンプレートに対応したサイトエディターが開かれます。

カテゴリーテンプレートの作成

  1. 次に 「W（訳注：左上の W ロゴ） メニュー」 > 「テンプレート」を開きます。これでテンプレートのリストが開きます。サイトのロゴを設定している場合は、大きな W の代わりにそれが表示されているでしょう。
  2. 「新規追加」>「カテゴリー」を選択します。これで新しい空のテンプレートが開きます。
  3. お好みで、ヘッダーまたはフッターのテンプレートパーツを追加してください。直接「ヘッダー （Header）」または「フッター （Footer）」で検索するか、テンプレートパーツブロックを追加して、好きなものを選択することでできます。
  4. クエリーループブロックを追加し、好きなデザインのオプションを選択してください。
  5. クエリーループブロックを選択し、ブロックの設定サイドバーを開いて「テンプレートからクエリーを継承」オプションが選択されているか確認してください。これにより適切な投稿が表示されるようになります。
  6. このテンプレートは特定のカテゴリーの投稿を表示する時に使用されることを念頭に置いて、テンプレートをカスタマイズしてください。完成したら、「保存」を押して、新しいテンプレートを公開します。

パターンを探求するために2つの新しい投稿を作成

  1. 「W メニュー」を開き (サイトアイコンを設定している場合は、そちら)、「ダッシュボード」を選択して、WordPress 管理画面に戻ります。
  2. 「投稿」 > 「新規追加」をクリックし、新しい投稿を作成します。
  1. 「New Event Announcement (新しいイベントのアナウンス)」パターンを選択し、自由に記入します。InstaWP のテスト環境を使用している場合は、投稿一覧の中に、このパターンを使用したサンプル投稿「WordCamp Museum」がありますので参考にしてください。いくつかのブロックがロックされていることに注意してください。この操作感をどう思うか、いくつか試してみてください。例えば、もっとブロックをロックする、現行のロックを解除する、等々。
  2. アイキャッチ画像を設定し、パターンのカバーブロックでどのように表示されるかを確認してください。この機能を自由にカスタマイズしてください。
  1. 公開する前に、投稿の設定を開き、カテゴリー「Events」を割り当て、「テンプレート」セクションの新しいポップオーバーインターフェースで、自由に異なるテンプレート選択してください。
  2. 管理画面に戻り、別の新しい投稿を作成します。
  3. 「Event Recap (イベント報告)」パターンを選択し、自由に記入します。InstaWP のテスト環境を使用している場合は、投稿一覧の中に、このパターンを使用したサンプル投稿「WordCamp Museum Recap」がありますので参考にしてください。いくつかのブロックがロックされていることに注意してください。この操作感をどう思うか、いくつか試してみてください。
  1. 見出し「Attendees(出席者)」の下の、名前の一覧を含むグループブロックを選択します。サイドバーの設定を開き、「レイアウト」の下で「インナーブロックは全幅を使用する」オプションをオンにして、自由にカスタマイズしてください。例: 色、フォントサイズ、寸法の変更等々。
  2. 公開する前に、投稿の設定を開き、カテゴリー「Events」を割り当て、「テンプレート」セクションの新しいポップオーバーインターフェースで、自由に異なるテンプレート選択してください。

カテゴリーテンプレートを確認

  1. 以上です。「イベント」カテゴリーを表示すると、テンプレートと投稿の完全な形が表示されます。カテゴリーテンプレートは、 yoursiteurl.com/category/events/ にアクセスすると表示されます。

注意する点:

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

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

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

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

Thanks!

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

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

mimi 投稿時間: 4:02 PM 投稿日: 2022年4月30日  

FSEプログラムのテスト募集 #14: レシピのレビュアー募集

以下は、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 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. フロントエンドで投稿を表示し、投稿にいくつかのコメントを追加します。コメントは簡単なもので構いません。「素敵なレシピ !」「作るのが待ちきれない」等。

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

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

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

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

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

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

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

注意する点:

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

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

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

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

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

Thanks!

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

mimi 投稿時間: 11:18 PM 投稿日: 2022年2月4日  

FSE プログラムの探索：すべてはメディア（All Things Media）

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Exploration: All Things Media」を訳したものです。 

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

WordPress 5.9のリリースによってフルサイト編集の大部分が公開され、フィードバックを得る準備が整いました。ここでは、これらの要素についてもう一回掘り下げるのではなく、より広い世界を吸い込むことにして、サイト構築において非常に重要な要素であるメディアの役割に話を移しましょう。アイキャッチ画像の設定やヘッダー画像の追加など、メディアは優れたサイトを構築するためのあらゆる部分に関わるものです。

前回同様、今回の探索の焦点は、今後のメディア関連の体験のデザインに役立つ洞察を集めるために、より長期的な、「希望的観測」の視点で考えることです。そのために、メディアを使ったサイト構築のための一般的なタスクをいくつか紹介し、その後、各自がどうなってほしいかを創造的に考えてもらうことにしました。フローがないため、テストの募集とまではいきませんが、バグを見つけることよりも（もちろん歓迎します）、こうなったらいいな、と思うことを考えることに重点を置いてください。

この投稿に目を通すとき、すべての項目に関わることも、どれかひとつだけに関わることもできることを思い出してください。いずれにせよ、すべてが参考になります。

簡単な概要

今回、テスト募集を行う理由のひとつは、WordPressプロジェクトにおいて、メディアに関する新しいプロジェクトやツールがいくつかあり、見逃している可能性があるからです：WordPress Photo DirectoryとOpenverseです。 

WordPress Photo directoryは現在ベータ版で、高品質な画像のキュレーションソースを提供することを目的としています。あなたがここに写真を追加すると、6億点以上を無料で利用できるオープンライセンスメディアの検索エンジンであるOpenverseに自動的に写真が表示されるようになるのです。今はまだ、これらは独立したツールですが、将来的には、WordPressの体験に直接統合する大きなチャンスがあります。この調査は、2022年のさまざまな目標に沿った非常に初期の作業へ情報を提供するのに役立つでしょう。 

WordPress Photo DirectoryとOpenverseの詳細については、こちらの記事で必要な情報を網羅的にご紹介しています。

タスク1: 現在、何が可能かを探ってみましょう。

これらのタスクは、達成するための方法がいくつかあるため、意図的にオープンエンドにしています。どのような方法で、どのような理由で、どのようなステップを踏んだかを教えてください。また、バグを発見した場合は、コメントで報告してください。

  • 画像や動画が配置されたカバーブロックにデュオトーンフィルターを追加し、必要に応じて不透明度を調整しながら上にテキストを追加してください。 
  • ヘッダーの背景に画像を追加してください。
  • 画像にキャプションを追加してください。
  • ギャラリーブロックで画像を切り取ったり回転させてみてください。
  • 著作権で保護されていない外部の写真をアイキャッチ画像として投稿に追加してください。その画像をどこで検索したのか、普段どこで検索しているのかを共有するとボーナスポイントになります。
  • 投稿のテンプレートを編集して、投稿のアイキャッチ画像のサイズを変更します。 

今回の探索では、フルサイト編集でメディアを取り込むことを目的としているため、ブロックテーマを使用することが有利となります。そのため、以下の手順に従ってください。

  1. テストサイトを用意してください。ここの手順に従ってローカル環境へインストールするか、このようなツールを使って開発用の環境を構築することができます。
  2. テーマディレクトリにあるオプションからブロックテーマをインストールして有効化してください。

タスク2: 見たいものを書いてください。

上の経験を通じて、今後どのようなことを望むか、以下の質問を考えてみてください。アイキャッチ画像をカバーブロックの背景として使用することから、画像をスタイリングするもっと多くのコントロールの組み込み、そしてアイキャッチ画像全般の見直しまで、あらゆることが考えられます。アイデアが実用的かどうかは気にしないでください。これは、ユーザーが将来望む可能性のあるものの感覚を掴むためだけにあります。1つでも、すべてでも、あるいはまったく回答しないのでも構いません。リストは単なるチェックではなく、純粋に正しい枠組みで考えてもらうためのものです。 

  • Openverse や WordPress のフォトディレクトリをどのようにユーザー体験に組み込んでほしいですか ?
  • パターンやメディアについて考えるとき、心に浮かぶものは何ですか ?
  • ワークフローの改善点は何ですか ? 苦労した点は何ですか ?
  • メディアを正しく表示するために WordPress の外で実行しなければならない基本の作業は何ですか ? それらの作業をどのようにユーザー体験に統合してほしいですか ? 
  • 帰属情報を削除できない画像を使用することについてどう思いますか ? 大きな変更ができない画像についてはどうですか ?
  • 他に何かありますか ? 大きく考えてください。 

フィードバックを共有してください。2022年2月23日 (水) まで。

いつものように、この実験に参加いただき、ありがとうございます。もしも何か不明点があれば、#fse-outreach-experiment、この記事のコメント欄、またはスラックの DM で @annezazu (私です !)にご連絡ください。この実験の性質上、ここで共有されたすべてが実装されるわけではありませんが、あなたのアイデアが、最終的に今後の可能性を形作る助けになります。 

ホールウェイハングアウトにご参加ください。2022年2月16日 @ 5:30PM UTC

もっと掘り下げて探求したい、All Things Mediaについてもっと話したいという方は、@fcoveram と @annezazu と一緒に、次回のホールウェイハングアウトに参加してください。カジュアルでオープンなハングアウトです。誰でも好きなように参加、退出でき、ビデオのオンオフもでき、話したり、ただ聞いているだけでも構いません。1時間弱の予定で、Make Testで再録されます。

参加するには、Make Slack の #fse-outreach-experiment にアクセスしてください。ハングアウト時に Zoom のリンクが共有されます。

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

Thanks!

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

Akira Tachibana 投稿時間: 8:56 AM 投稿日: 2021年11月12日  

FSE プログラムのテスト募集 #11: サイト編集の探索

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

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

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

フルサイト編集テストのアイデアの提案を歓迎します。すべてのアイデアは、現在のプロジェクトの優先順位と照らし合わせ、もっとも効果的と判断されたものが実行されます。アイデアは、Slack チャンネルで直接共有するか、私 (@annezazu) にメッセージを送ってください。

概要

すぐにテストを始めたい方は、次章の「テスト手順」に進んでください。

今回のテスト募集は、WordPress 5.9 のリリース前に行われる最後のテスト募集です。このテストに参加することは、リリース前にウェブ上の多くの人々のエクスペリエンスを向上できるため、素晴らしく、そして、非常にインパクトのあるものです。このテスト募集の最大限の活用を目的として、以下のテスト手順は、テストが進むにつれ、またリリースサイクルが進むにつれ、変更される予定です。例えば、テスト開始時には TT1 の使用を推奨しますが、テスト終了時には Twenty Twenty-Two を推奨する予定です。現時点でのテストの概要を紹介します。

ブロックテーマテンプレートとテンプレートパーツ編集 UI

これまでサイトエディターのテスト募集を何度か行ってきましたが、ご存知のように、より洗練され、スケールダウンした形でブロックテーマ内のテンプレートやテンプレートパーツを管理するため、WordPress 5.9 まで延期されました。凝縮された閲覧ツールと管理画面の「外観」の下の新しい配置は、これまでのサイトエディターの完全なエクスペリエンスとは異なって感じられるでしょう。

スタイルインターフェース

WordPress 5.8 では一貫したスタイルシステムの基礎が築かれましたが、WordPress 5.9 では、様々なスタイルプロパティを直接操作できる美しいユーザーインターフェースを導入します。この作業に関して、「グローバルスタイル」というプロジェクト名を聞いたことがあるかもしれません。これまでも、グローバルスタイルプロジェクトに関連する仕組みのひとつである「theme.json」のテスト募集を行ってきましたが、スタイリングそのものを取り上げるのは今回が初めてです。現在、このインターフェースでは、2つの大きなデザイングループ「ブロック」と「要素」が表示されます。「要素」は、グローバルに、あるいは複数ブロックに渡ってスタイリング可能なものを表しています (「テキスト」、「リンク」、「キャプション」など)。つまり、サイト全体のタイポグラフィや、ボタンブロックのユニークな配色を同じインターフェイスで簡単に変更できます。

パターンエクスプローラー

ブロックパターンが増えてきている中、パターン間の移動を容易にし、希望のパターンをすぐに見つけられるよう、新しいエクスプローラーモーダルがリリースされました。この機能は、将来的にパターンディレクトリと統合するための基礎となります。テスト手順では、この新しい体験を簡単に探索します。

Twenty Twenty-Two

Twenty-Twenty-Two は、長い歴史を持つデフォルトテーマの中でも、特徴ある最新のテーマです。初めてのブロックテーマであり、さまざまなサイト編集ツール用に作られています。そのため、今回のテスト募集では、このテーマを使用してテストし、結果を報告することが推奨されています。この革新的なデフォルトテーマについてはこちらをご覧ください。

テスト環境

このテスト募集は、最新かつ最高のプログラムでのテストを目的としているため、テストが進み、リリースサイクルが進むにつれて、調整されます。

以下は、この文書で紹介するすべてのテストを実行するために必要な、テスト環境の設定手順です。すでに準備できている場合は、次章の「テスト手順」に進んでください。

  1. WordPress の最新バージョンをインストールしたテストサイトを使用してください。執筆時点では 5.8.2 です。本番サイトは使用しないでください。
  2. 「プラグイン」 > 「新規追加」から Gutenberg をインストールし、有効化します。すでにインストールされている場合は、Gutenberg 12.0 以上であることを確認してください。
  3. 「外観」 > 「テーマ」 > 「新規追加」で TT1 Blocks テーマをインストールし、有効化します。
  4. 好きな画像をアイキャッチ画像にした記事をいくつか作成します。または、別のテスト用に作成された Gutenberg のデモコンテンツ をダウンロードし、「ツール」 > 「インポート」にあるWordPress インポーターを使ってインポートします。デモコンテンツの使用方法については、こちらのレッスン も参考にしてください。
  5. サイトの管理画面に移動します。
  6. 「外観」の下に「エディター (ベータ)」というタイトルのナビゲーション項目が表示されているはずです。表示されていない場合は、正しく設定されていません。ここで詰まった場合は、この投稿にコメントするか、#fse-outreach-experiment で助けを求めてください。

原則として、各手順では最新バージョンを使用してください。また、この記事が公開された後にバージョンが変更されている可能性があることにも注意してください。

テスト手順

ホームページのカスタマイズ

  1. 管理画面で「設定」 > 「表示設定」に移動し、「ホームページの表示」で「最新の投稿」を選択します。
  2. 「外観」 > 「エディター (ベータ)」を選択します。ホームページを表示するテンプレートが開かれます。
  3. ホームページを好みに合わせて自由に変更してください。ナビゲーションブロックを追加したり、投稿タイトルブロックのフォントサイズを変更したり、投稿のアイキャッチ画像ブロックにデュオトーンフィルターを追加したり、ブロックを削除したり、ブロックを追加したり等々。
  4. 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。

スタイルの設定

  1. 左上の「W」メニューをクリックしてダッシュボードに戻り、「外観」 > 「スタイル」に進むか、右上のスタイルアイコンをクリックして、スタイルインターフェースにアクセスします。
  2. 4つのセクション「タイポグラフィ」「色」「レイアウト」「ブロック」(個々のブロック用) を自由にカスタマイズできます。例えば、「色」 > 「パレット」 > 「＋」マークをクリックすると、コンテンツ全体で使用する独自のカラーオプションを追加できます。
  3. 好みに合わせて編集できたら、「保存」をクリックして、指示に従います。

ボタンパターンの追加とレイアウトコントロールの使用

  1. ブロックインサーターを開き、「パターン」タブに切り換えます。
  2. 「参照」オプションを選択し、「ボタン」セクションに移動し、「シンプルな行動喚起 (CTA)」パターンを選択してください。
  3. 追加できたら、「+」オプションを使用して2番目のボタンを追加してください。
  4. 次に、親のボタンブロック全体を選択し、サイドバーの設定を開き、自由にレイアウトを編集します。こちらの動画 も参照してください。
  5. 変更を保存します。

アーカイブテンプレートへのデュオトーンフィルターの追加

  1. 左上の「W」メニューをクリックし、エディターの下から「テンプレート」を選択して、「新規追加」 > 「アーカイブ」を選択し (現在、ここから一般的なテンプレートは作成できません)、タイトルを「デュオトーンテンプレート」とします。
  2. コンテンツに、投稿のアイキャッチ画像ブロックを追加し、デュオトーンフィルターを追加します。
  3. 自由にブロックを追加し、変更を保存します。
  4. 左上の「W」メニューをクリックしてダッシュボードに戻り、「投稿」 > 「投稿一覧」を選択します。
  5. アイキャッチ画像を含む投稿を開き、サイドバーの「テンプレート」で「アーカイブ」を割り当てます。こちらの動画も参照してください。
  6. 投稿を保存して、表示し、デュオトーンフィルターが適用されていることを確認してください。

ヘッダーの編集

  1. 管理画面に戻り、「外観」 > 「エディター (ベータ)」から、ヘッダーテンプレートパーツを選択します。必要であればリスト表示を使用してください。
  2. リストビューの縦の3点リーダーを選択するか、ブロックツールバーで「header を編集」を選択します。フォーカスしたテンプレートパーツモードに移行します。
  3. テンプレートパーツに変更を加えます。ナビゲーションブロックにアイテムを追加したり、サイトタイトルのサイズを変更する等々。両側のドラッグハンドルを移動すると、異なる画面サイズでのヘッダーの表示を確認できます。
  4. 変更を保存します。

注意する点:

  • どこかでクラッシュしませんでしたか ?
  • 保存した際、正しく保存できましたか ?
  • 不足する機能はありませんでしたか ?
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ?
  • もっと編集が楽になるには何があればよいですか ?
  • エディターで作成したページは、サイトで表示された場合にマッチしますか ?
  • 携帯デバイスや、小さな画面サイズでのコンテンツの見た目はいかがですか ?
  • 現在のワークフローにどんな影響を与えると思いますか ?
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?

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

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

Props to @kellychoffman: このテスト募集のレビューを助けてくれたことに対して

変更履歴

2021/11/10: Gutenberg 11.9 RC4 で手順を変更
2021/11/12: Gutenberg 11.9 で手順を変更
2021/11/13: WordPress 5.8.2 で手順を変更
2021/11/24: Gutenberg 12.0 で手順を変更。参照コンポーネント周辺の語句を変更、フィードバック締切を12/7まで延長

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

mimi 投稿時間: 11:13 AM 投稿日: 2021年8月14日
タグ: , , fse-testing-call,   

FSE プログラムのテスト募集 #9: 高等教育のヘッダーの取り扱い

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

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

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

これまでに募集してきたテストと比較して、今回のテストは幾分コミュニティ主導のもので、@blake が提案した高等教育をテーマにしたテストになります。フルサイト編集テストのアイデアの提案を歓迎します。すべてのアイデアは、現在のプロジェクトの優先順位と照らし合わせ、もっとも効果的と判断されたものが実行されます。アイデアは、Slack チャンネルで直接共有するか、私 (@annezazu) にメッセージを送ってください。

機能の概要

このテストを実世界の例に基づいて行うために、私たちはサイト管理者として学校に戻って、仮想の大学で学生、親、教師を歓迎するためのカスタマイズされたヘッダーを作成してみます。インスピレーションを得るために、次のような大学サイトのサンプルをチェックしたり、近くの大学を探してみてください。このテストでは、ヘッダー部分の構築に焦点を当てているので、その点に集中して、それぞれのサイトでどのような工夫がなされているかを参考にしてください。 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

ご想像のとおり、このテストでは「ナビゲーションブロック」を深く掘り下げることになります。おさらいしておくと、ナビゲーションブロックとは、サイトのナビゲーションメニューを構造的にもデザイン的にも編集できるようにする、強力で新しいブロックです。このテストは、将来の WordPress リリースに搭載するための準備として、このブロックでできることの端緒を探ることを目的としています。

これまでのテストと同様に、創造性を発揮してくださった場合には、コメント欄にスクリーンショットを添付してください。インスピレーションを得るために、以下の例では、サブメニュー項目の複数のレイヤーが表示されています。

Image of a pretend Gutenberg University header with two different menus, including one with multiple sub-menu layers open.

テスト環境

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

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

既知の問題

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

初心者向けのテスト方法

このセクションは、具体的な手順に従ってヘッダーを作成したい方や、FSE をテストする十分な時間がない方のためのテスト方法です。

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

構造の作成 (テンプレートパーツ、カラムなど)

  1. 管理画面で「サイトエディター (ベータ)」をクリックします。自動的にサイトエディターが開き、ホームページに使用されているテンプレートが表示されます。
  2. ホームページを開いたら、「ヘッダーテンプレートパーツ」の内部ににある「ナビゲーションブロック」を削除してください。後の追加のために、ヘッダーをリセットします。 
  3. 親の「カラムブロック」を選択し、サイドバーの「ブロック設定」を使用して、カラムを2列から3列に変更します。
  4. カラムブロックに戻り、「ブロックツールバー」の設定で、「全幅」になっていることを確認します。

サイトブランドの作成

  1. 1列目に「サイトロゴブロック」を追加し、サイトのロゴをアップロードします。必要であれば logodust.com のこの無料ロ ゴを使用してください。
  2. 「サイトのタイトル」、「サイトのキャッチフレーズ」、「サイトロゴ」の各ブロックを組み合わせ、自由にカスタマイズしてください (フォントの変更、色の変更、配置の変更など)。
  3. 2列目に「ボタンブロック」を追加して、COVIDに関する警告を追加し、記事「August COVID Update」にリンクします。記事は投稿のタイトルを検索すれば見つかります。必要なデモコンテンツをまだインポートしていない場合は、このエクスポートファイルのリンクを開いて「ダウンロード」を選択し、インポートしてください。 

上位レベルの項目のシンプルなメニューの作成

  1. 3列目に「ナビゲーションブロック」を追加し、「空から始める」オプションを選択します。
  2. 「固定ページリンクブロック」を使用して、インポートしたコンテンツの中から以下のページを追加します。「Contact」「Directions」「Make a Donation」。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。恐らく、Gutenberg 11.3で修正予定のスペーシングのバグに気づかれるでしょう。
  3. メニュー項目の「Make a Donation」を短く「Donate」に変更します。これには、固定ページリンクブロックのテキストを編集します。 
  4. メニューの最後には、「検索ブロック」を追加し、サイドバーの設定を使用して、自由にカスタマイズしてください (背景色、テキストの色、幅など)。 
  5. メインメニュー項目を配置したら、ナビゲーションブロック全体を再度選択し、サイドバーの設定の「表示設定」で、「レスポンシブメニューを有効化」オプションをオンにします。必要であれば、この時点で、ブロックのスタイルをカスタマイズすることもできます。 

より複雑な仕様のメニューの作成

  1. 3つのカラムを含む全体の「カラム」ブロックを選択します（ここでリストビューが役に立つかもしれません）。メニューの「その他の設定」で「後に挿入」を選択し、後にブロックを追加します。 
  2. カラムブロックをもう1つ追加し、30/70オプションを選択します。
  3. 再びカラムブロック全体を選択し、ブロックツールバーの設定で「全幅」になっていることを確認します。
  4. 幅70％の大きなカラムにナビゲーションブロックを追加し、「空から始める」オプションを選択します。
  5. 「固定ページリンクブロック」を使って、取り込んだコンテンツの中から以下のページを追加します。About、Admissions、Student Life、Research、News です。追加するには、各ページのタイトルの最初の数文字を入力すると表示されます。 
  6. メインメニュー項目を配置したら、もう一度ナビゲーションブロック全体を選択し、サイドバー設定の「表示設定」で「レスポンシブメニューを有効化」オプションをオンにしてください。 
  7. メインメニュー項目 About、Admissions、Student Life、Research のサブメニュー項目を追加します。ヒントが必要な方のために、こちらがサブメニュー項目を追加するためのアイコンのスクリーンショットです。
    1. About には、以下のサブメニュー項目が必要です。Distinguished Alumni、Diversity and Inclusion、Faculty、History、Leadership。
    2. Admissions には、以下のサブメニュー項目を追加してください。Career Paths、Undergraduate Graduate Admissions、Scholarship & Financial Aid、Tuition。 
    3. Research には、以下のサブメニュー項目を設けます。Awards & Honors、Partnerships、Undergraduate Research、Graduate Research。 
    4. Student Life には、以下のサブメニューを用意してください。Athletics、Tutoring Services、FAQ、Study Abroad Opportunities、Tutoring、Services。
  8. Admissions > Career Paths の下に Business、Design、Technology というサブメニュー項目を追加します。 
  9. サブメニュー項目を追加したら、様々なサブメニュー項目を自分の好みに合わせて再配置し、名前を変更します。ナビゲーションブロック全体を選択して、ブロックナビゲーションオプションを使用すると、この GIF のように、メニュー項目を並べ替えられます。 
  10. まだ存在していないページを追加したい場合は、現在サイトに存在していないタイトルを入力することで追加できます。そこから、下書きページを作成するオプションが表示されます。これを少なくとも1つのメニュー項目に対して行います。この作業をお楽しみください。高等教育がテーマの内容にすることをお忘れなく。
  11. ナビゲーションブロック全体をお好みにカスタマイズします (配置、色、フォントサイズなどの変更)。サブメニューの項目については、オーバーレイの色設定を使って好きな色を設定できることを覚えておいてください。 作業内容を保存してさらにカスタマイズしましょう。
  12. 「保存」を選択して変更を保存し、フロントエンドでサイトを表示します。エディターで表示される内容とフロントエンドで表示される内容の違いを確認してください。下書き状態のページがある場合は、メニューに表示するために公開する必要があります。
  13. モバイル端末でサイトを表示し、メニューがハンバーガーメニューとしてレスポンシブ表示されるかどうかを確認します。 
  14. ここからは、配置や色、文字サイズの変更、項目の削除・並べ替え・再配置など、自由にカスタマイズしてください。また、スペーサーやソーシャルアイコンなどのブロックをナビゲーションブロックに追加することもできます。 

上級者向けのテスト方法

このセクションは、テストをさらに続ける時間があり、ガイドなしでもサイトエディターを使える方向けのテストです。

このセクションのテスト方法は簡単です。既存の大学サイトのヘッダーの全部または一部を再現してみてください。TT1 Blocks テーマを使い続けても自分の好きなブロックテーマを使っても構いません (違うテーマを使用する場合は注意してください)。上に挙げた大学を利用しても良いですし、自分で探してもいいでしょう。コメントを残す際には、自分が何をしようとしていたか、そして何ができたかを示すスクリーンショットを共有してください。みなさんが何を実装しようとしているかを知ることはとても参考になります。自由な発想とデザインを遠慮なく、共有してください。

注意する点:

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

  • どこかでクラッシュしませんでしたか ?
  • 正しく保存できましたか ?
  • ヘッダーを作成中に不足する機能はありませんでしたか ? できる限り詳しく説明してください。上級者向けのテスト方法を実施した場合は特に !
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ?
  • サイトエディターで作成したページは、サイトで表示された場合にマッチしますか?
  • 小さな画面サイズで見たときの、ナビゲーションブロックの動作はいかがですか ? 
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?
  • よろしければ、https://wave.webaim.org や https://www.accessify.com/ のようなツールでテストサイトを実行して、動きを確認してみてください。

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

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

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


この記事は @nao, @atachibana, @mimitips で翻訳しました。

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

mimi 投稿時間: 9:46 AM 投稿日: 2021年6月28日
タグ: , , ,   

FSE プログラムのテスト募集 #8: theme.json の活用

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

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

このテスト募集記事の作成と完成に多大な貢献をした @daisyo と @jffng に感謝します。

重要なお知らせ: これまでの FSE アウトリーチプログラムのテストではサイトの制作者やエンドユーザーを対象としてきましたが、今回のテストは意図的に開発者をメインの対象としています。これは、新しい拡張用のツールである「theme.json」に対してインパクトのあるフィードバックを行うためです。今後の取り組みについては、こちらをご覧ください。

機能の概要

theme.json はウェブサイトやブロックの機能を有効または無効にしたり、デフォルトのスタイルを設定するために使用される最高レベルの設定ファイルです。大量のテーマサポートフラグや代替手段を扱うのではなく、theme.json はすべてを管理するための統合された標準的な方法を提供します。これらの設定には、次のようなオプションが含まれます。

  • どのようなカスタマイズオプションをユーザーに提供するか、あるいは隠すか。
  • ユーザーが利用できるデフォルトの色やフォントサイズなどはどのようになっているか。
  • エディタのデフォルトのレイアウト (幅や使用可能な位置) の定義

この設定ファイルは、ブロックテーマをより細かく制御できるようにし、今後リリースされる WordPress の「スタイル管理」の第一歩となるもので、ブロックテーマを強力にサポートします。ここでは、この新しい仕組みを使うことで得られる主なメリットをご紹介します。

  • テーマはブロックごとの設定を提供できるようになります。これまでは、add_theme_support がエディタ全体の設定を対象としていたため、不可能でした。
  • theme.json を使用しているテーマは、宣言したプリセットのクラスや CSS カスタムプロパティが自動的に確保されるため、自分で処理する必要はありません。さらに、プリセット名の翻訳も管理されます。
  • theme.json は、コア、テーマ、ユーザーのスタイルを調整することで、出力する必要のある CSS の量を減らし、特異性の問題を解決するのに役立ちます。

ブロックテーマは、Gutenberg プラグインがなければ WordPress 5.8で動作しません。これはリリース時にはまだいくつかのテーマブロックが出せる状態にないためです。それでもブロックテーマは、5.8に搭載される重要な機能であるため、テストや調査が必要です。ブロックテーマの世界に興味をお持ちの方、ご自身でブロックテーマを作り始めた方は、今回のテストを参考にしていただき、今後も theme.json で何ができるかを探っていただきたいと思います。

theme.json の機能については、ドキュメント「グローバル設定とスタイル (theme.json)」で詳しく説明されています。

初心者向けのテスト方法

このセクションは theme.json で何をコントロールでき、どんなアウトプットを得られるのかを知りたい方向けのセクションです。

  1. https://gutenberg-theme.xyz/ にアクセスしてください。このツールは、theme.json ファイルの settings セクションの生成を支援します。
  2. テーマがサポートする様々な機能をオン、オフしてみてください。theme.json でコントロール可能な設定の中から一部を選択して試すことができます。例えば、カスタムカラーやカスタムリンクの設定をオン、オフしてみてください。選択した内容に応じて、ブラウザの出力が変化することに注目してください。
  3. パレット、グラデーション、フォントサイズの隣にある「+」ボタンを使って、追加のカスタマイズを探索してみてください。色の名前やフォントサイズなど、スラッグと特定の変数の両方を編集できる点に注意してください。
  4. いくつかのカスタマイズを行い、出力をレビューしましょう ! 更に深く知るには、また、作成した theme.json を動かすには次の中級者向けのステップに進んでください。

中級者向けのテスト方法

このセクションは、theme.json についてもっと深く知りたいと思う方向けのセクションです。自身の theme.json ファイルを書き、theme.json がコントロールする様々な設定を探ります。

注意: ここでは、全体のスタイルではなく、主に theme.json の settings セクションにある、ブロックのテーマサポートとプリセットに焦点を当てています。

テスト環境の設定

  • WordPress を新規にインストールします。
  • 最新 (本稿執筆時点では10.9.0)の Gutenberg プラグインをインストールして、有効化します。
  • TT1 Blocks をテーマディレクトリからダウンロードして、インストールします。
  • TT1 Blocks テーマのディレクトリに移動し、テキストエディタや IDE で theme.json ファイルを開いてください。

セットアップのそれぞれのステップにおいて、最新のバージョンを使用してください。この投稿がシェアされてから、バージョンが更新された可能性も念頭に置いてください。

レイアウト

  1. 新しい投稿を作成してください。
  2. 無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。
  3. 別の無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れます。このブロックを「幅広」に設定します。
  4. 3つの無地の背景を持つカバーブロックを投稿に追加し、内側の段落ブロックに数行のコンテンツを入れ、このブロックを「全幅」に設定します。
  5. 投稿を公開します。
  6. フロントエンドで投稿を表示し、これらのカバーブロックの幅を記録しておきます。
  7. theme.json の layout セクションで、ｃontentSize の値を、違うピクセル値に変更します。
  8. theme.json の layout セクションで、wideSize の値を、違うピクセル値に変更します。
  9. 先に作成した投稿の編集画面を開き、新しい幅が編集画面で反映されていることを確認します。
  10. ブラウザで投稿を表示し、新しい幅がフロントエンドでも反映されていることを確認します。
  11. (ボーナス手順) 幅の値を「px」以外の、「em」、「rem」、「vh」、「vw」、「%」などで設定する事を試してみましょう。

タイポグラフィ

  1. theme.json で以下の typography 設定を true に設定してください。
    • customFontWeight (見出しブロック)
    • customFontSize (段落ブロック)
    • customLineHeight (段落ブロック)
    • dropCap (段落ブロック)
  2. 段落ブロック内のタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さ、ドロップキャップの見え方を確認してください。
  3. 見出しブロックのタイポグラフィ設定、フォントサイズ、フォントウェイト、行の高さの見え方を確認してください。
  4. フロントエンドのブロックに各設定が適用されていることを確認してください。
  5. theme.json の typography 設定を false に変更してください。
  6. 段落ブロックの各カスタムタイポグラフィ設定が、ブロックエディターに表示されないことを確認します。ただし、以前に適用したタイポグラフィ設定が既存のブロックに適用されている場合があります。
  7. (ボーナス手順) theme.jsonファイルのtypographyセクションに、1つまたは複数のフォントファミリーとフォントサイズを追加します。 ボタンブロックを使用して、カスタムフォントファミリーとサイズをテストします。

枠

  1. theme.json で以下の border 設定を true に設定してください。
    • "customColor": true
    • "customRadius": true
    • "customStyle": true
    • "customWidth": true
  2. 数行のテキストを含む内部段落ブロックを持つグループブロックを作成します。
  3. グループブロックの枠設定、スタイル、幅、角丸、カスタムカラーの見え方を確認します。
  4. フロントエンドのブロックに設定が適用されていることを確認してください。
  5. theme.json の border 設定を false に変更してください。
  6. グループブロックの枠設定が、ブロックエディターに表示されないことを確認します。

色

  1. theme.json で、custom と customGradient の以下の色設定をtrue に設定してください。
    • "custom": true
    • "customGradient": true
    • "link": true
  2. カスタムグラデーションの背景を持つカバーブロックと、内側の段落ブロックに数行のコンテンツを追加します。
  3. 段落ブロックにリンクを追加し、リンクの色をカスタムカラーに設定します。
  4. 画像を背景にした別のカバーブロックと、内側の段落ブロックにある数行のコンテンツを記事に追加します。表紙の背景には、デュオトーンのプリセットを使用するように設定します。
  5. 背景画像のデュオトーンカラーを変更し、デュオトーンのシャドウとハイライトの設定にカスタムカラーを使用する。
  6. (ボーナス手順) パレットとデュオトーンまたはグラデーションのプリセットに1つまたは複数の追加カラーを追加します。CSS グラデーションの詳細については、CSS Tricks と CSS Gradient のリソースをご確認ください。

参考までに、@daisyo の例で、最終的にどのような出力が得られるかを示しています。

(超) 上級者向けのテスト方法

このセクションは、theme.json を使用してより強固なブロックテーマを作成したいと考えている人や、テーマ開発経験者向けのセクションです。一般ユーザー向けではありません。

ブロックテーマに慣れ、theme.json を調べる時間も十分にある場合は、クラシックテーマの再現はいかがでしょう。ここでは2つのオプションを紹介しますが、デフォルトテーマでも問題ありません。

実際に試してみて、どんなギャップがあったか、何が一番難しかったか、何が意外と簡単だったかをメモしておき、以下のコメント欄で共有してください。あなたの経験から学べることが多くあります。なお、この手順は、意図的に非常に自由で高度なテストに設定していますので、試す気にならなくても安心してください。誰か他の人がテストしているのを見ながらテストしたい場合は、@mkazの動画「ブロックテーマ作成を学ぶ」をチェックしてみてください。

注目すること:

これらの質問は、中級編と上級編に特化したものです。

  • theme.json ファイルに追加された色は、各種ブロックのカラーパレットにカーソルを置いたときに、割り当てられた名前で表示されますか ?
  • theme.json ファイルに追加されたフォントサイズは、ブロックのフォントサイズのドロップダウンに割り当てられた名前とサイズで表示されますか ?
  • エディターでブロックを使用したときに、色やフォントサイズが正しく表示されますか ?
  • フロントエンドでブロックを使用したときに、色やフォントサイズが正しく表示されますか ?
  • 今回の体験で、特に戸惑いや不満を感じたことは何ですか ?
  • 特に楽しかったこと、感謝したことは何ですか ?

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

この記事のコメント欄に質問、コメント、懸念事項などのフィードバックをお願いします。その際、必ずどのセクションの手順に従ったかを明記してください。必要であれば、GutenbergのGitHubリポジトリ に直接 issue を作成いただいても構いませんが、このテストに関しては恐らくその必要はないでしょう。ただ、もしも GitHub にフィードバックを残す場合は、以下のコメント欄にリンクを貼ってください。

7月7日開催予定の theme.jsonテストのハングアウトに参加しましょう。

FSE のテストや theme.json を誰か他の人と一緒に検討したいという方のために、@daisyolsenが、今回のシナリオをメインとするハングアウトを開催します。ハングアウトに参加したことがない方は、こちら で詳細を確認できます。同じ考え方を持つメンバーによる、カジュアルで協力的なセッションを意味します。

  • 日時: 7月7日 午後5時 UTC / 日本時間 7月8日 午前2時
  • Zoom リンク meeting ID 881 3678 6501 / password 600875
  • 追加情報は #fse-outreach-experiment チャンネルで発表されます。

ハングアウトでお会いしましょう !

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


この記事は @umikoh, @nao, @atachibana, @mimitips で翻訳しました。

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

mimi 投稿時間: 1:05 PM 投稿日: 2021年6月13日
タグ: , , ,   

FSEプログラムのテスト募集 #7: 洗練されたポートフォリオ

以下は、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回目のテスト募集に比べて、今回のテスト募集では、意図的により自由な設定を行い、テスターであるあなたにこの機能の限界に挑戦してもらいます。楽しんでくださいね！

テスト環境 

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

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

テスト手順 

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

既知の問題:

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

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

設定手順: 

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

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

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

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

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

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

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

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

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

注意する点:

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

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

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

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

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

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

Thanks!

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

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

Akira Tachibana 投稿時間: 3:13 PM 投稿日: 2021年5月22日
タグ: , , ,   

FSEプログラムのテスト募集 #6: WordCamp のランディングページを作る

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #6: Stick the landing (pages)」を訳したものです。

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

フルサイト編集アウトリーチプログラムとして6回目のテスター募集です。Version 5.8のリリースに向けて非常に重要なテストです。まだ参加されていない方は、ぜひこの機会に参加してください。また、今後の活動に協力したいという方は、今後のプログラムスケジュールを参照してください。

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

機能の概要

テンプレート編集に焦点を当てた最初のテスト募集から多くの変更がありました。このため、同じテストを繰り返すのでは、と心配されている方はご安心ください。念のため、「テンプレート編集モード」とは、フルサイト編集機能のうち、個々の投稿やページのコンテンツと、個々の投稿やページが使用しているテンプレートを切り替えて編集できる機能です。この機能のリリース当初は、テンプレートの編集はできても、新しいテンプレートを作成したり、投稿やページに特定のテンプレートを使用するように割り当てることはできませんでした。しかし現時点では、新しいテンプレートを作成したり、現在のテンプレートを編集したり、ページや投稿に使用するテンプレートを選択することができます。これに関連して、インターフェースも更新され、テンプレート編集モードにいることがわかりやすくなりました。この新機能の詳細について、こちらの動画も参照してください。

テストを少し現実的にするために、WordCamp サイトのカスタムランディングページを制作するとします。あなたの主催する WordCamp を他のどんなイベントよりも輝かせましょう ! 

Image of a landing page with a pretend event description, coupon code, and various call to action buttons.

テスト環境 

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

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

テストフロー 

重要なお知らせ: 

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

既知の問題:

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

Gutenberg は今もアクティブに開発されています。開発の段階ではまた別の問題が見つかることも予想されます。

設定手順: 

  1. 最新バージョンの WordPress をインストールしたテストサイトを準備します。本番サイトは絶対に使わないようにしてください。 
  2. 「外観 > テーマ > 新規追加」で TT1 Blocks テーマをインストールし、テーマを有効化します。 
  3. サイトの管理画面にアクセスします。
  4. 「プラグイン > 新規追加」から Gutenberg プラグインをインストールして有効化します。すでにインストールされている場合は、必ず Gutenberg 10.6以降を使用してください。
  5. これで、「サイトエディター (ベータ)」というタイトルのナビゲーション項目が表示されるはずです。サイドバーに表示されていない場合は、サイト編集の実験を正しく使用していないことになります。ただし、このテストでサイトエディターは使用しません。

ページの作成

  1. 「固定ページ > 新規追加」を選択して3つの固定ページ、「About」(WordCamp とは)、「Contact」(連絡先)、「Code of Conduct」(行動規範) を作成し、公開してください。中身は必要ありません。後で作成するメニューのリンク先になります。 
  2. 4番目の固定ページを作成してください。タイトルは何か楽しい、お客様を引き付けるフレーズを考えてみてください。ただしその他のコンテンツは加えないでください。私は「Feeling inspired from WordCamp Couch?」(WordCamp カウチで感じたこと) としてみました。
  3. 固定ページを公開し、エディターを開いたままにしておいてください。

新しいテンプレートの作成

  1. サイドバーで「設定」を開きます。「固定ページ」タブと「ブロック」タブが表示されるうち、「固定ページ」タブをクリックして固定ページの設定を開きます。「テンプレート」セクションの下の「新規」をクリックして、新規テンプレートを作成します。詰まった方は、こちらで短い動画をご覧ください。 
  2. 新しいテンプレートのタイトルを「WordCamp Outreach」とします。
  3. ここから、テンプレート編集モードに入ります。

テンプレートのカスタマイズ

  1. テンプレートの先頭の「サイトタイトル」ブロック、「キャッチコピー」ブロック、「区切り」ブロックを削除します。
  2. 「投稿タイトル」ブロックの上に「カバー」ブロックを追加し、好きな画像を挿入してください。このテスト手順を作る際、私は こちらをダウンロード しました。「投稿タイトル」ブロックのツールバーの「前に挿入」オプションを使う必要があるかもしれません。
  3. 画像を追加したら、内部の「段落」ブロックではなく「カバー」ブロックを再度選択し、「配置を変更」を使用して「全幅」を選択します。 
  4. 「投稿タイトル」ブロックを「カバー」ブロック内にドラッグアンドドロップします。
  5. ブロックの配置設定を使用して「投稿タイトル」ブロックを中央揃えにし、余計な「段落」ブロックを削除します。 
  6. 再度カバーブロックを選択し、デュオトーンフィルターを適用してください。ツールバーのアイコンは こちらのスクリーンショット を参照してください。注意: 「影」と「ハイライト」を選択すると、カスタムカラーを作成できます。 
  7. 「カバー」ブロックの下に「スペーサー」ブロックを追加し、50px に設定します。 
  8. 「スペーサー」ブロックの下に「カラム」ブロックを追加し、「50 / 50」を選択します。
  9. 挿入したら、親のカラムブロックを選択し、「配置を変更」を使用して「全幅」にします。 
  10. 最初のカラムにイベントの簡単な情報を追加し、好きな配置を設定してください。
  11. 2番目のカラムに2つボタンを追加して、「登壇者申し込み」と「スポンサー申し込み」を作成します。このテストでは、実際にリンクする必要はありません。自由にボタンをカスタマイズしてみてください。
  12. 「カラム」ブロックの下に、別の「カバー」ブロックを追加し、背景色を選択してください。
  13. 背景色を設定したら、内部の「段落」ブロックではなく「カバー」ブロックを再度選択し、「配置を変更」を使用して「全幅」を選択します。 
  14. 「カバー」ブロック内に、ディスカウントコード用のメッセージ、その下にチケット購入用の「ボタン」ブロックを追加してください。テキストを編集し、配置、カスタム色等を自由にカスタマイズしてください。 

カスタムフッターの作成

  1. ２番目の「カバー」ブロックの下に「テンプレートパーツ」ブロックを追加します。「新規テンプレートパーツ」を選択して、このテンプレートのカスタムフッターを作成します。 
  2. 作成したら、サイドバーの「ブロック」設定に移動し、「高度な設定」セクションで「タイトル」を入力し、「エリア」で「フッター」を選択し、「レイアウト」セクションで「デフォルトレイアウトの検証」をオンにします。
  3. テンプレートパーツに、「カラム」ブロックを追加し、「30 / 70」を選択します。
  4. 最初のカラムに、「サイトロゴ」ブロックを追加します。ロゴが必要であれば、http://www.logodust.com からダウンロードした、無料のものがあります。
  5. ２番めのカラムに、「ナビゲーション」ブロックを追加し、「新規作成」を選択します。なおここでバグにぶつかる かもしれませんが、すでに報告されています。 
  6. 「ページリンク」オプションを使用して、固定ページ「About」「Contact」「Code of Conduct」を追加してください。「ナビゲーション」ブロックを自由にカスタマイズしましょう。
  7. 「更新」をクリックして、変更を保存してください。 

新規固定ページの作成と新しいテンプレートの割り当て

  1. 管理画面に戻り、「固定ページ > 新規追加」を選択して、新規固定ページを作成します。 
  2. 「タイトル」に別の魅力的なイベントへの案内を入力してください。私は「Feeling inspired from WordCamp Bed?」(WordCamp ベッドで感じたこと) としてみました。
  3. 「投稿の設定」の「テンプレート」セクションで、上で作成したテンプレートを選択し、「公開」してください。
  4. 固定ページを表示し、最初の固定ページと同じテンプレートが使用されていることを確認してください。

上級者向けのガイド

もっとテクニカルで、将来のアイデアベースのものを試したい方は、この PR を参照してください。試す場合は便宜のため、対応したバージョンの Gutenberg プラグインをこちらからダウンロードしてください。この PR は、テンプレート編集モード時、投稿コンテンツの編集機能を無効化して、投稿コンテンツとテンプレートの編集をより明確に区別することを目的としています。この PR に関する意見や感想は、以下のコメント欄または PR へ直接お寄せください。 

テストの様子のビデオ

注意: 上の手順に関連する章がビデオに追加されています。

注意する点:

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

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

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

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

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

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

mimi 投稿時間: 11:53 AM 投稿日: 2021年4月17日
タグ: , , ,   

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 では、選択可能なより多くのパターンが提供される予定です !

テスト環境

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

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

テストフロー

重要なお知らせ:

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

設定手順:

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

テスト手順

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

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

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

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

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

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