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 の協力により公開することができました。ありがとうございます。