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

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.orghttps://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

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 セクションで、contentSize の値を、違うピクセル値に変更します。
  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

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

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番目の「カバー」ブロックの下に「テンプレートパーツ」ブロックを追加します。「新規テンプレートパーツ」を選択して、このテンプレートのカスタムフッターを作成します。 
  2. 作成したら、サイドバーの「ブロック」設定に移動し、「高度な設定」セクションで「タイトル」を入力し、「エリア」で「フッター」を選択し、「レイアウト」セクションで「デフォルトレイアウトの検証」をオンにします。
  3. テンプレートパーツに、「カラム」ブロックを追加し、「30 / 70」を選択します。
  4. 最初のカラムに、「サイトロゴ」ブロックを追加します。ロゴが必要であれば、http://www.logodust.com からダウンロードした、無料のものがあります。
  5. 2番めのカラムに、「ナビゲーション」ブロックを追加し、「新規作成」を選択します。なおここでバグにぶつかる かもしれませんが、すでに報告されています。 
  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

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

FSEプログラムのテスター募集 #3: 楽しいカスタム404ページを作成する

以下は、annezazu が書いた Make WordPress.org Test チームブログの記事「FSE Program Testing Call #3: Create a fun & custom 404 page」を訳したものです。

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


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

機能の概要

これまでに素晴らしい404ページを経験したことがありますか ? 思わず笑ってしまったり、目的の場所に簡単に戻れる作りになっていたり。現在、この404ページはサイトの一部としてテーマによって提供されコードでしか変更できないため、多くの人は、親切で、楽しい404ページを追加して楽しむことはできません。 

しかしフルサイト編集を使えば、自分だけのページを作ることができます。このテストでは、テンプレートを編集してシンプルな404ページを作成したり、本格的にユニークなページの作成に取り組んだりしていきます。クリエイティブな能力を発揮できた方は是非コメント欄にスクリーンショットを添付して、私たちを驚かせてください。インスピレーションのため、私が作った例を紹介しましょう。

テスト環境

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

テストフロー

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

重要なお知らせ: 

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

設定手順: 

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

テスト手順:

ヒント: このテストを通して、コンテンツ間を移動する際にリストビューの便利さに気づくでしょう。

404テンプレートを調べる

  1. 「サイトエディター(ベータ)」画面に移動します。自動的にサイトエディターが開かれ、ホームページに使われているテンプレートが表示されます。
  2. ナビゲーショントグルを開いて、「テンプレート」>「404」へ移動します。サイトの404ページのテンプレートが表示されます。
  3. リストビューを使って、Headerテンプレートパーツブロックを選択します。3点アイコンのツールバーメニューを使用して「ブロックの削除」を選択し、これを削除します。
  4. 「Nothing Here」と書かれたデフォルトのヘッダーブロックを選択し、3点アイコンのツールバーメニューを使って、「前に挿入」オプションで上部にブロックを追加します。
  5. 好きなブロックの挿入方法を使って、テンプレートパーツブロックを挿入し「新規テンプレートパーツ」オプションを選択してください。
  6. 新しいテンプレートパーツブロックの設定を(訳注:サイドバーで)開きます。「テンプレートタイトル」の欄で、例えば「404ヘッダー」というような、カスタムのタイトル名を追加します。
  7. 変更を終えたら「デザインを更新」を選択し、保存の流れに沿ってすべての変更を保存してください。これで新しいテンプレートパーツには、選んだタイトルが反映されるようになります。

ナビゲーションを追加し、クリエイティビティを発揮する

  1. フォーカスがまだ新しいテンプレートパーツにあることを確認し、ナビゲーションブロックを追加してください。新しいメニューを作ることも、既存のものを再利用することもできます。
  2. リンクをいくつか追加してください。現在存在しないページへのリンクも追加してください。これには、現在サイトに存在しないページのタイトルを入力します。例えば「ヘルプ」と入力すると、「下書きページの作成」オプションが表示されます。少なくとも1つはこのようなメニュー項目を追加してください。他にもいろいろ自由に、楽しくやりましょう 🙂
  3. ナビゲーションブロックの外側にも、この新しいテンプレートパーツ内に好きなブロックを追加してください。例えばソーシャルアイコンブロック、検索ブロック、サイトのタイトルブロック等々。サイトで迷子になった人のガイドになるものであれば何でも追加してください。
  4. 「Nothing Found」見出しブロックと検索ブロックを自由に編集してください。また画像、GIF、好きなものを追加してください。 
  5. 変更を終えたら「デザインを更新」を選択し、保存の流れに沿ってすべての変更を保存してください。
  6. サイトの404ページを確認します。「yoursiteurl.com/404」にアクセスしてください。このとき「yoursiteurl.com」はテストサイトの URL です。ナビゲーションブロックには追加した下書きページが表示されますが、切れたリンクであることに注意してください。管理者権限でログインしていて下書きを表示できるため、切れていないように見えます。注意: すでにバグとして記録されています。
  7. サイトエディターに戻り、「ナビゲーショントグル」 > 「ダッシュボード」にアクセスして管理画面を表示します。注意: 現在はバグがあり、サイトエディターナビゲーション内で下書きページを表示できませんが、将来的にはもっと簡単になる予定です。 

公開し、レビューし、共有する

  1. 「固定ページ」 > 「固定ページ一覧」に移動し、必要なページを公開してください。 
  2. 再度、「yoursiteurl.com/404」にアクセスして404ページを開き、以前の下書きページが正しいパーマリンクで表示されることを確認してください。
  3. 以下のコメント欄または GitHub ディレクトリであなたの体験を共有してください。体験は何度繰り返していただいても構いません。フィードバックは大歓迎です !

もしもまだ余力があれば、以下の項目も追加で試してみてください。

  • コンテンツにカラムを追加してみてください ! カラムはパワフルなツールです。サイト構築の実際のシナリオ体験から得る、カラムを使用したフィードバックは私たちにとって有用です。
  • カスタムヘッダーテンプレートパーツ作成にならって、カスタムフッターテンプレートパーツも作ってみてください。
  • ページの外観を、カスタムカラーやフォントサイズで、もっとカスタマイズしてみてください。カスタマイズ方法をデモする 簡単なビデオ をご覧ください。

テストの様子のビデオ:

このビデオでは、最初のセットアップを終えてからのテストの流れを紹介します。簡潔のため、404ページの作成については深く触れていません。テストの際にはこれに縛られず、是非、創造力を発揮してみてください。

注意する点:

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

  • どこかでクラッシュしませんでしたか ?
  • 正しく保存できましたか ?  
  • テンプレートパーツやコンテンツ全般を変更した際、保存の動作は自然でしたか? 不自然な部分、おかしな部分はありませんでしたか ? 
  • テストで困った点、イライラした点はありませんか ?
  • テストで楽しかった点、いいねと思った点はありますか ? 
  • サイトエディタで作成したページは、サイトで404ページが表示された場合にマッチしますか?
  • キーボードだけで動作しましたか ?
  • スクリーンリーダーだけで動作しましたか ?

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

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

#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg, #usability-testing

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

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