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

WordPress 公式イベントにおけるガイドラインの更新お知らせ

以下は、Angela Jin が書いた Make WordPress.org Community チームブログの記事「Announcement: Updated COVID-19 guidelines for official WordPress events」というタイトルで公開された記事の翻訳記事です。
誤字脱字誤訳などありましたらフォーラムまでお知らせください


新型コロナウィルス ( COVID-19 ) に関連する指令は世界中で更新され続けており、コミュニティチームの要件もそれに合わせて更新されています。これらの新しいガイドラインは、WordCamp、ミートアップイベント、do_action イベント、オープンソース 101 ワークショップなどすべての公式イベントに適用されます。

主催者へ

  • 現地の規則には必ず従ってください。これらは継続的に変更されますので、特にイベントが近づくにつれて、最新の情報を入手するようにしてください。また、開催地近隣の病院が混雑している場合は、イベントの中止や延期、またはオンラインでの開催をお願いします。
  • 会場周辺にマスクと消毒液を用意してください。(会場から提供されない場合は、WPCS が費用を負担します)。
  • WPCS は、スワッグパックの一部として、マスク着用して会話することを呼びかけるステッカーを提供します。

開催地域において許されているのであれば、主催者はマスクの着用や入場時のワクチン証明または陽性検査結果などを確認しセキュリティ対策を選択することができます。もちろん、オンラインでイベントを開催することも選択肢の一つです。

参加者へ

これらは、参加者への推奨事項です。主催者は、これらの推奨事項が現地の規則に従っているかどうかを確認することで参加者を支援することができます。

  • WordPress の対面式イベントでは、これまで通りマスクの着用を推奨します。
  • マスク着用を促すステッカーを貼っている人を見かけたら、2メートル以内ではマスクを着用するか、距離をおいてください。
  • ワクチン接種済み、または陰性判定を受けた方のみの現地参加をお願いしています。
  • 体調の悪い方、または体調の悪い方と最近接触された方はステイホームしてください。

これらのリマインダーは、WordCamp のチケット購入ページに追加されます。

近日中にコミュニティチームがハンドブックページを更新し、これらの変更を反映させる予定です。新型コロナウィルス (COVID-19) のガイダンスが進化してきたのち、私はこれらのガイドラインが何らかの持続的な力を持ち、WordPress コミュニティの対面式イベントが安全かつ快適に復活することを深く望んでいます。

今後のフラッグシップイベントに関する注意事項

フラッグシップイベントは規模が大きく、海外からの参加者も多いため、WordCamp Europe と WordCamp US の両主催者は、これらを最低条件として捉え、より包括的な計画を立てることが期待されています。

WordCamp Europe は、ポルトガル当局のガイドラインに基づき、屋内ではマスクが必要となります。参加者登録は分散して行われ (スピーカーディナー会場と会場自体) 、受付ブース (セルフサービス) を利用することになります。WP Cafe などの一部のアクティビティは屋外で行われます。

WordCamp US は、サンディエゴ当局のガイドラインに従います。このガイドラインに基づき、参加者全員にワクチン接種または直近の検査で陰性であることを要求します。また、イベントの規模や性質上、屋内では口と鼻の両方を覆うようにマスクを着用していただきます。会場には消毒液とマスクの用意があります。昼食などの一部のアクティビティは屋外で行います。

ご質問・ご意見

コミュニティチームの新型コロナウィルス (COVID-19) 関連ガイドラインの最新アップデートについて、ご質問やご意見がありましたら、以下のコメント欄でお寄せください。


不明点などがありましたら WordSlack の #meetup チャンネルへ!

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

ディスカッション: WordPress イベントにおける多様性

この記事は、Discussion: Diversity in WordPress Events というタイトルで Make WordPress のコミュニティチームブログに先日公開されました。世界のユーザーから幅広く声を聞きたいという @angelasjin の意向により、翻訳の協力が呼びかけられています。元の記事またはこの記事に日本語でコメントをしていただいても大丈夫です。インドネシア語台湾語ブラジルポルトガル語ネパール語イタリア語でも翻訳が公開されています。

最近、WordPress のイベント、特に WordCamp における多様性について疑問を持つ声が上がりました。コミュニティは多様であればあるほど、より強く、より革新的で、より回復力のあるものになるため、WordPress コミュニティチームは多様性を重視し、優先しています。

WordPress イベントの多様性を高める責任を負うのは、ひとつの地域、コミュニティ、イベント、チームだけではありません。誰もが変化をもたらすことができます。多様性について語ることは、WordPress コミュニティにとって決して初めてのことではありませんが、今このような会話ができることは特に嬉しく思います。

ひとつは、パンデミックによって、これまで考えられなかったような新たな参加障壁が発生していることです。ふたつめに、主催者は対面式イベントの再開に慎重になっています。このような状況だからこそ、ひとつは、パンデミックによって、これまで考えられなかったような新たな参加障壁が発生していることです。ふたつめに、主催者は対面式イベントの再開に慎重になっています。このような状況だからこそ、参加者が少ない層のコミュニティーのメンバーがどのような障壁に直面しているのか、何が WordPress のイベントに参加する後押しをするのか、参加しやすい空間を作るために主催者はどう支援すればよいのか、理解を深めることができると思います。

さらに、地域や文化の多様性を大事にしつつ、世界のコミュニティ全体の多様性をいかに尊重するかということは、WordPress のようなグローバルコミュニティにとって、独特のチャンスであり同時に課題でもあります。

そういったゴールへ向かうため、私は自分自身の視点と経験しか持っておらず、現在のグローバルで大きなコミュニティ全体の多様性を理解する上で、情報が不足しています。そこで、皆さんのご意見を伺いたいと思います。

オープンディスカッション

長年にわたり、多様性をめぐる課題に対処する方法について多くの解決策や提案を聞いてきました。しかし、世界の状況は大きく変化しているので、まずは WordPress の WordCamp や Meetup での多様性に関する経験についてお聞きし、経験が一致するところと異なるところをコミュニティチームが深く理解できるようにしたいと思います。

多様性について話すことは、個人的に深く関わることなので、気が乗らない場合は参加する必要はないと思ってください。この記事にコメントしてもいいですし、直接声をかけて頂くのも大歓迎です。

できる範囲で、ぜひ教えてください。

  • お住まいの国を教えてください。
  • WordCamp や Meetup に参加していますか、また参加している場合はどのような形(観客、講演者、スポンサー、主催者)で参加していますか。
  • WordCamp や Meetup に参加できない理由が何かありますか。
  • 現在、WordPress イベントでの多様性に関してどのような課題があると思いますか。
  • 現在いるコミュニティでは、多様性をどのように定義していますか。
  • 現在いるコミュニティで多様性を高めることに貢献したものごとを見たり、経験したことはありますか。
  • 現在いるコミュニティで多様性に悪影響を与えるようなことを見たり、経験したことはありますか。

ストーリーを共有することで、皆さんのことをもっと知りたいと思いますし、このディスカッションを読んだ人が、誰かの経験を知ることができるかもしれません。

2022年2月28日 (月) までに、以下のコメントであなたのストーリーを共有してください。その後、重要な要点と学びを要約して、このコメント用の投稿を閉じたいと思います。このディスカッションの目的は、世界中の多様性に関する個人の経験について知ることなので、このディスカッションの次のステップや結果がどうなるかはまだよくわかりません。しかし、これはコミュニティチームが WordPress のイベントプログラムを強化できる場所を特定するための重要かつ有益なステップであり、将来の議論への提案につながることは間違いないでしょう。

コメントの内容に関する注意

WordPress に関わる皆さんは、きっと多様性に対して様々な考えを持っていると思いますが、それを話し合うのはこの記事の目的ではありません。コメントは、上記の質問の回答の形で経験を共有することだけに絞ってください。それ以外はまた後日に 🙂

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

日本語ドキュメンテーション Codex の移行をお手伝いしてくれる方を募集します

長年親しまれてきた WordPress の日本語ドキュメンテーション (マニュアル) 「Codex」を WordPress.org 内に移行します。

これはオリジナルの英語版の動きに従ったもので、すでに英語版では開発者向けページが DevHub に、一般ユーザー向けページが HelpHub と呼ばれるシステムにそれぞれ移行されています。今回、日本語版ではまず一般ユーザー向けページを移行し、完了後に開発者向けページの移行を検討する予定です (このためすぐに Codex がなくなるわけではありません)。

移行作業のお手伝いを募集します

英語版の移行作業では手動で Codex 内のページを HelpHub に移行しました。Codex には古い記事や誤った記述も含まれていたため、一つずつ確認しながら作業する必要がありました。ちなみに「Codex」は wiki ベースで書かれていましたが、WordPress.org では通常の WordPress の記事と同じようにブロックエディタ (Gutenberg) を使用して記述します。

現在約200ページの原文がありますが、日本語版でも同様にこれらを手作業で移行する予定です。その過程で翻訳のエラーや、英文が更新されている場合は追加の翻訳を行います。スクリーンショットを取り直す必要のある箇所もあります。

こうした作業をお手伝いしてくれる方を募集します。

「手伝ってもいいよ」という方は以下の手順に従って、サイトへのアクセス権を取得し、好きなページを移行してください。ページ全部でも構いませんし、一部でも構いません。

移行のポリシー

日本語 HelpHub は日本語 Codex を元に、英語 HelpHub の最新情報で更新します。英語版は Codex から HelpHub 移行の際に、プログラミング的な要素をすべて削除しました。これは HelpHub が一般ユーザー向けであること、プログラミング的な要素は他のハンドブックでカバーされることからの決定です。

一方日本語版の場合、ハンドブックの翻訳 (例えば Theme Developer Handbook) が後になり、今日の段階で使用法のみをコピーすると日本語のせっかくの情報が消えてしまいます。ですので、いったん関数などのプログラミング的な要素も含めて移行したいと思います。

移行の手順

まずサイトへのアクセス権が必要です。

  1. WordPress.org のアカウントを作成する (https://login.wordpress.org/register)
  2. HelpHub のアクセス権をリクエストする
    • 手順: WordSlack (参加方法はこちら) の #docs チャンネルに行って、WordPress.org アカウント名と一緒に「アクセス権希望」とリクエストしてください。

移行作業は以下のとおりです。

  1. HelpHub サイトにログインする。
  2. 進捗確認用のワークシートを開く。
  3. 移行するページを選択し、「担当」に自分の名前を入力し、「ステータス」を「In Process」にする。
  4. 「元の日本語 Codex ページ」列の URL の上にマウスを移動し、ポップアップしたリンクをクリックする。
  5. 「日本語 HelpHub ページ」列の URL の上にマウスを移動し、ポップアップしたリンクをクリックする。
  6. ツールバーの「編集 記事」をクリックする。
  7. 適宜、Codex からコピー & ペーストするか、必要に応じて翻訳する。
  8. 完了後はドラフト文書のまま保存し、「ステータス」を「Done」にする。

今後の進め方

ある程度量があるので、挫折しないように以下のような試みを考えています。

  • 定期的に (頻度は未定、2週に1度程度 ?)、参加可能な作業者の方が集まって Zoom で質問したり作業したりする会を開催する。
  • 週1回、このブログに進捗報告スレッドを立て、コメントで報告してもらう。

質問があれば、WordSlack の #docs でお尋ねください。
ご協力ありがとうございます!

#codex

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

開発中デフォルトテーマ、Twenty Twenty-One のご紹介

以下は、Mel Choyce-Dwan が書いた Make WordPress.org Core チームブログの記事「Introducing Twenty Twenty-One」を訳したものです。

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


皆さんお待たせしました、次回の WordPress デフォルトテーマについての発表です。これまでにも噂されていた通り、WordPress 5.6 は新しいデフォルトテーマ “Twenty Twenty One” とともにリリースされる予定です。

デフォルトテーマチームは以下のメンバーを含みます。

  • デフォルトテーマデザインリード: Mel Choyce-Dwan (@melchoyce)
  • デフォルトテーマ開発リード: Carolina Nymark (@poena)
  • デフォルトテーマラングラー: Jessica Lyschik (@luminuu)
  • そして、素晴らしいボランティアである皆さん。

背景

Twenty Twenty One は、ブロックエディターのための空白のキャンバスとしてデザインされました。印刷物にかなりインスピレーションを受けたデザインをいくつか試した後、@kjellr が「デジタルネイティブなものを試してみたら」と言ってくれました。私は、手に負えないほど増殖し続ける Pinterest のボードにさらに多くのアイデアを追加し、試してみました。このコンセプトは、その中でも最も自然で使い勝手の良いデザインになりました。シンプルで、強い主張はないにも関わらず、洗練されている。まるで、描かれるのを待っている新鮮なキャンバスのように感じられました。

Twenty Twenty One は Seedlet テーマを編集したバージョンをベースとして使用します。これにより、子テーマをより簡単にするために丁寧に構築した入れ子 CSS 変数システムを提供し、フルサイト編集機能向けに開発中のグローバルスタイル機能との統合を支援します。

ベータ1以降にテーマが安定してきたら、フルサイト編集対応に取り掛かります。


デザインの決断

デフォルトでは、テーマはネイティブシステムのフォントスタックを使用しています。この選択をしたのにはいくつかの理由があります。

  • 余分な読み込み時間がありません。このテーマをシンプルかつ高速に保ちます。
  • このスタックはタイポグラフィ的にかなり「中立的」です。どのフォントにも強い主張はないので、異なるタイプのサイト間でテーマを幅広く使用できます。
  • 追加のフォントファイルを読み込むことなく、1つだけのフォントスタックを使用することで、Twenty Twenty One の子テーマをカスタマイズしたり、作成したりすることが簡単になります。私たちは、このテーマが教育のためのツールとなり、皆さんのクリエイティビティを発揮できる場となることを願っています。

このテーマはさらに、限られたカラーパレットを使用しています。パステルグリーンの背景と、テキスト向けの2種類のダークグレー。そして白と黒の配色を含む、追加のカラーパレットをいくつか同梱する予定です。なぜパステルグリーンなのかというと…。パステルカラーミュートっぽいかなり流行ます (あ、ちょっとリンクが多すぎですか ?)

(この困難な時期に、ちょっとパステル調のコテージコアが嫌いだなんて誰もいいませんよね ?)

つまり、デザインはシンプルです。 そこでパターンの出番です。

WordPress 5.5 で Gutenberg のパターン対応を導入しました。これは、それらを披露するのに最適な時間です。Twenty Twenty One には、このテーマのために意図的にデザインされたユニークなパターンがまとまってパッケージ化されています。テーマの全体的なデザインはシンプルなので、自分らしくすることができますが、パターンにはなかなか主張があるデザインになるでしょう。すでに3つほどのデザインがありますが、才能あるコミュニティデザイナーのアイデアを募集中です。ここでは、現時点で考えていることを紹介します。

ブロックパターンにコントリビュートしたい方は、専用イシューのテンプレートがあります。

そして最後に、私たちはこのテーマを WCAG 2.1レベル AAA 関連のガイドラインを満たすようにしたいと思っています。アクセシビリティチームがこのアイデアを提案してくれた時、とてもいい考えだと思いました。コミュニティの a11y 専門家の皆さんからの、この実現に向けたすべての指導に感謝します。

Figma ファイルの中に Twenty Twenty One の全ページモックアップがあります。


タイムライン

開発サイクルの情報に基づく、今後の重要な日程は以下の通りです。

  • WP 5.6 ベータ 1 – 10月20日
    • Feature プロジェクトと新規機能強化のラストチャンス
    • テーマはこの時点までにトランクにコミットされているべきです
    • 2つ目のブロックベースのテーマでフルサイト編集 (FSE) サポートの探索を開始
  • WP 5.6 ベータ 4 – 11月10日
    • 文字列のソフトフリーズ
    • スターターコンテンツはこの時点までにコミットされているべきです
  • WP 5.6 RC 1 – 11月17日
    • 文字列のハードフリーズ
    • スターターコンテンツの最終決定が必要
  • WP 5.6 リリース – 12月8日

Preview in new tab(opens in a new tab)


参加しよう

Twenty Twenty One への貢献に興味がある方は、ぜひコア開発ブログをフォローしてください。デザインと開発の過程では、毎週Monday, September 28 at 15:00 UTC から #core-themes でミーティングを行います。また、this Friday at 16:00 UTCからは、毎週トリアージセッションを開催します。

テーマの開発は GitHub 上で行われ、時間の都合上、テーマのコードの進行中のバージョンはこちらにアップロードされています: https://github.com/wordpress/twentytwentyone

テーマが安定したらコアにマージされ、GitHub のレポジトリは非推奨になります。


追加情報

デフォルトテーマについてもっと詳しく知りたい方は、以下の投稿を読んでみてください。

#core-themes, #5-6, #bundled-theme, #theme, #twenty-twenty-one

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