WordPress 5.8 ベータ 1

以下は、Jeffrey Paul が書いた WordPress.org 公式ブログの記事「WordPress 5.8 Beta 1」を訳したものです。

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


WordPress 5.8 ベータ 1 がテストいただけるようになりました。

このソフトウェアはまだ開発中ですので、本番運用中のサイトでの使用はおすすめできません。テストサイトでこの新しいバージョンを試してみることをおすすめします。

WordPress 5.8 ベータ 1 のテストは、次の2つの方法で行うことができます。

正式リリースは、2021年7月20日を予定しています。これから6週間後、このリリースを適切にテストし、可能な限り良いものにするためには、皆様の協力が不可欠です。

Make WordPress Core ブログでは、今後数週間のうちに 5.8 関連の開発者向けノートを公開し、詳細・その他変更点について詳しく説明していきますので、ぜひご覧ください。

5.8 で何が新しくなったのか? まずは、ハイライトをご紹介します。

ハイライト

パワフルなブロック

  • 「固定ページリスト」「サイトのタイトル」「ロゴ」「キャッチフレーズ」など、新しいブロックや表現力豊かなツールが登場しました。パワフルな「クエリーループ」ブロックは、投稿リストを複数の方法で表示でき、新しいブロックパターンでは、その柔軟性と創造的な可能性を活かすことができるでしょう。
  • ツールバーの親を選択するためのボタンで、ネストされたブロックの操作が容易になりました。異なるブロックタイプのボタンにカーソルを置いたり、フォーカスすると、ブロックのアウトラインが表示されるようになりました。また「選択」モードでも、ドラッグアンドドロップできるよう、ブロックのハンドルが表示されるようになりました。
  • 複雑なブロックやパターンの移動に役立つ、切り替え可能なリスト表示パネルが登場しました。
  • 再利用ブロックの作成フローが改善され、リビジョンがサポートされました。
  • 新しいデュオトーンブロックは、メディアブロックで画像効果を追加したり、サードパーティ製のブロックでもサポート可能です。カラープリセットは、テーマでカスタマイズすることもできます。

パターンの選択

ブロックの設定時にパターンの推奨・選択ができるようになり、パワフルな新しいフローを提供します。また、パターンの変換も可能となり、ブロックやブロックの集まりを異なるパターンに変換することもできます。

新しいパターンのコレクションと、WordPress.org で公開予定のパターンディレクトリとの初期統合も含まれます。

ツールの改善

  • 新しいテンプレートエディターでは、ブロックを使ってページに新しいカスタムテンプレートを作成できます。
  • テーマから theme.json ファイルを使用してスタイリングの制御・設定を行えるようになりました。これには、レイアウト設定、ブロックサポート、カラーパレットなどが含まれます。
  • 更なるカラー、タイポグラフィ、余白のオプション、カバー背景のドラッグアンドドロップ、ブロック変換オプション、ファイルブロック内での PDF の埋め込みなど、新しいデザインツールや既存ブロックの強化が行われました。
  • エディターのレンダリング方法が改善され、フロントエンドに近い形で表示されるようになりました。

Internet Explorer 11

今年で WordPress における Internet Explorer 11 のサポートは終了となります。今回のリリースでは、変更点の多くがマージされていますので、ベータ、RC の期間にテストを行ってください!

ウィジェットエリアでのブロック

  • 新しいウィジェット画面とカスタマイザーを使って、テーマのウィジェットエリアで任意のブロックを使用できるようになりました。
  • 既存のサードパーティ製ウィジェットは、レガシーウィジェットブロックを介して引き続き動作します。
  • まだ完全に切り替える準備ができていませんか?移行を容易にするために、ユーザーは Classic Widgets プラグインを利用できます。また、テーマからは remove_theme_support( 'widgets-block-editor' ) を呼び出すことができます。

変更点が見つかりませんか?この後に改善点の続きがありますのでご覧ください。

ご協力いただけること

テストをしてください!

バグのテストは、ベータ段階でリリースに磨きをかけるための重要な作業であり WordPress に貢献するための素晴らしい方法です。

バグを見つけた場合は、サポートフォーラムの Alpha/Beta エリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグも確認できます。

ご参加ありがとうございます。楽しいテストを!

本リリースでの改善点

  • 再利用ブロック、カバーブロック、テーブルブロック、リストビュー、Rich text プレースホルダー、テンプレート編集モード、ブロック挿入ツール、トップツールバーの改善
  • クエリーループブロックでは、クエリー/フィルターを使用して、テンプレートに基づいた柔軟な投稿リストを作成できます。パターンとの併用が最適です。
  • エディターとフロントエンド間の同等性の改善、ブロックツールバー構成の標準化
  • カスタマイザー内でのブロックウィジェット
  • グローバルスタイル、グローバル設定 API の導入。theme.json ファイルを使用して、エディターの設定や利用可能なカスタマイズツール、スタイルブロックを制御します。テンプレートエディターを iframe 内で開くことで、より正確にフロントエンドを再現します。
  • メディアやテキストをカラムに変換する機能
  • ファイルブロックから PDF を埋め込む機能
  • ソーシャルリンクとボタンの余白オプション、スペーサーブロックの幅調整
  • Twemoji がバージョン 13.1 にアップデートされ、たくさんの新しい Emoji が追加されました。
  • エディターのパフォーマンス向上
  • 後続の空の段落からライティングプロンプトを隠す
  • より分かりやすいパブリッシング UI
  • 縮小サイズ画像のデフォルトフォーマットを設定する機能を追加し、WebP にも対応しました。
  • widgets.php と customize.php にウィジェットブロックエディターを追加
  • デフォルトテーマにブロックパターンを追加
  • プラグインディレクトリ以外で管理されているプラグインを WordPress.org 管理外としてマークする機能の追加
  • 再利用ブロックカスタム投稿タイプでリビジョン機能を有効化
  • ページ上に存在するブロックのスクリプトやスタイルのアセットのみをキューに追加
  • 既存のフィルターを廃止し、代わりにコンテキストを考慮したフィルターを導入することで、ブロックエディターの設定を抽象化
  • 新しいサイドバー、ウィジェット、widget-types REST API エンドポイント
  • REST API で投稿をクエリーする際に、タームの関係を変更できるようになりました。
  • サイトヘルスがカスタムサブメニュー、カスタムページに対応しました。
  • 利用可能なテーマアップデートの数を管理メニューに表示
  • キャッシュされた get_pages() の呼び出しを高速化
  • Underscore を 1.8.3 から 1.9.1 にアップデート

Gutenberg リリースのすべての機能詳細については 10.010.110.210.310.410.510.610.7 の記事をご覧ください。これらの変更に加えて WordPress 5.8 では、88の新機能と強化を含む215のチケットが修正されており、この後、さらにバグの修正が行われていきます。

国内30回目の公式カンファレンス、WordCamp Japan 2021が開かれます

WordCamp は、2008年東京での開催以来、国内だけでもこれまでに29回行われてきた WordPress の公式カンファレンスです。すべてコミュニティによる運営で、登壇者や当日スタッフも含めて全員がボランティアとして協力しており、運営資金は主にスポンサー各社からの協賛金によって成り立っています。

その WordCamp が30回目を迎えるにあたって、国単位の規模、そして1週間という期間という初の形態でWordCamp Japan 2021」オンラインイベントが6月20日(土)から26日(日)に開催されます。

WordCamp Japan 2021 オンライン発表会(4月28日)の収録動画

どこからでも無料で参加可能

今回の WordCamp の大きな特徴は、オンラインで7日間開催という点です。お好きな時間に、お好きな場所から、より多くの方にご参加いただけるようにスケジュールを工夫しています。

どなたでも完全に無料でご参加いただけますが、交流会・懇親会やジョブボード、スポンサーブースなどイベント内のすべてのコンテンツにアクセスするにはチケット登録が必要です。

2日間のセッションデイズ

イベントの最初と最後の日は「セッションデイズ」として、ライブセッションと録画セッションの配信を行います。

セッションのラインアップは、ブロックエディターの使いこなし方サイト運用といった幅広いユーザーの方が気になるトピックから、ノーコード解析多言語プラグインECサイトマーケティングといったピンポイントなトピックまで、さまざまな分野で WordPress を使っている方が今知りたい内容を取り揃えたものとなっています。

また、テーマ・プラグイン開発者によるブロックエディターを使ったサイト開発やカスタムフィールドを考えるセッションや、WordPress デベロッパーリレーション担当者によるフルサイト編集の最新情報セッション(日本語字幕付き)といった WordPress のこれからを知ることができるコンテンツも用意されています。

5日間のコントリビューターデイズ

過去のオフライン WordCamp では、1日に同時並行で WordPress オープンソースプロジェクトのさまざまなチームにコントリビュート(貢献・参加)ができるテーブルが用意されていました。今回は会場がオンラインという特徴を最大限に活かし、5日間にわたって毎日少しずつ参加できる「コントリビューターデイズ」という試みを行います。

どんなものなのか少しだけ覗いてみたい、という方もお気軽にご参加ください(個別に Zoom 参加リンクをお送りするため、WordCamp Japan のチケットに加えて connpass での登録が必要になります)。

当日ボランティア募集中

今からでも運営を手伝いたい!という方も歓迎です。ライブセッションに字幕をつけたり、交流スペースでの当日ボランティアを募集していますので、こちらからお申し込みください。数時間程度、1日のみのお手伝いでもOKです。


WordPress の今、そしてこれからを知ることができるイベント WordCamp Japan 2021への皆さんのご参加をお待ちしています。

WordPress が18歳になりました

WordPress がリリースされてから今日で18周年を迎えました。親しみを込めてこの日を「WordPress の誕生日」と呼んでいますが、つまり WordPress は6,575日前に誕生したことになります。太陽が一回りしたことを祝うために、これまでもコミュニティパーティを開き、データを共有し、ストーリーを語ってきました。

前回の誕生日以来、40番目のリリースを開発し、ウェブの40%以上をサポートするようになりました。そこで、今年の誕生日には、そこに至るまでの40のマイルストーンのリストを紹介するのがふさわしいと思います。

お祝いのケーキや祝杯を手に、ぜひスクロールしてみてください。

デュオトーンフィルターで画像に色付け

以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Did You Know About Reusable Blocks?」を訳したものです。

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


文章: Alex Lende

WordPress 5.8より、デュオトーンフィルターを使って画像やカバーブロックに色付けできるようになりました。デュオトーンは、デザインにポップな色を加えたり、テーマとうまく調和するように画像をスタイリングすることができます。

フィルターとは、Instagram みたいなものですか ?

デュオトーンは、Instagram のフィルターとまったく同じようには機能しません。Instagram のフィルターは、色の調整 (色レベル/カーブ、ヴィネットなど) を行いますが、新しいデュオトーンフィルターは、画像の色を完全に置き換えます。

Cat – Original
写真: Charles Pragnell

デュオトーン効果は、白黒のフィルターのようなものであり、シャドーが黒・ハイライトが白になっている代わりに、シャドウとハイライトの色を自分で選ぶことができます。

例えば、シャドー/ハイライトの色を黒と白にすればグレースケールフィルター、茶色と褐色にすればセピアフィルターになります。

類似色を選ぶと繊細な効果が演出でき、文字を目立たせたいカバーの背景にぴったりです。’

補色を使うと、より鮮やかで面白い効果が得られます。

デュオトーンフィルターを追加するには

デュオトーン効果はコントラストの高い画像で最も効果を発揮するため、大きな暗い部分と明るい部分がたくさんある画像から始めましょう。ブロックツールバーの「フィルター」ボタンからプリセットを選択します。

また、テーマのパレットから色を選ぶこともできますし、カスタムカラーを選ぶこともできます。

デュオトーンは、画像ブロックに加えて、カバーブロックでも画像と映像の両方に適用できます。

Duotone

デュオトーンはメディアライブラリの画像を上書きしてしますか ?

メディアライブラリの画像や動画が変更されることはありません。デュオトーン効果は、SVG フィルターCSS のフィルター属性を使って動作するため、ライブラリ内の画像や動画が変更されることはありません。このことは、メディアライブラリに存在しないリンク先の画像にフィルターを適用できることを意味します。一方で、RSS フィードや画像の URL を直接使用する場所では、フィルターが表示されないことを意味します。

自分で開発したブロックやテーマにデュオトーンカラーを追加することはできますか ?

ブロックにデュオトーンカラーを追加する API は、Gutenberg v10.6では実験的なものです。とはいえ、独自のブロックで使用するためのドキュメントはブロックエディターハンドブックの「Supports Color (色対応)」に掲載されており、更新される予定です。テーマでは、theme.json でデュオトーンのプリセットを追加できます。詳細は「ブロックエディターハンドブック」の「グローバル設定とスタイルのプリセット」に記載されています。

Gutenberg プラグインを使って今すぐ試してみましょう

デュオトーン機能は、Gutenberg プラグインのバージョン10.6でリリースされたため、7月の WordPress 5.8 のリリースに先立って、今すぐお試しいただけます。

Internet Explorer 11 サポート終了

以下は、 Jonathan Desrosiers が書いた WordPress.org 公式ブログの記事「Dropping support for Internet Explorer 11」を訳したものです。

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


7年以上前にリリースされた Internet Explorer 11 (IE11) は、現在ンターネット上の全ユーザーの1%未満にしか使われておらず、利用率は急速に低下しています。人気サイトの大部分はすでに IE11 のサポートを停止しており (2020年版の Microsoft Teams を含む)、Microsoft 365 のアプリやサービスでさえも今年の後半にはサポートを終了する予定です。

今年の7月に WordPress 5.8 がリリースされる際、Internet Explorer 11 はサポートされなくなります。

現在、IE11 をお使いの方は、Google Chrome、Mozilla Firefox、Safari、Microsoft Edge などの最新のブラウザーに切り替えることを強くおすすめします。IE11をお使いの方は、過去17ヶ月以上にわたり、WordPress のダッシュボードに IE11 が古くなっていると見なされるという警告が表示されています。

すでに上記のモダンブラウザーを使用している方は、IE11 のサポートを終了することで WordPress にパフォーマンス上のメリットがあるため、この変更によってプラスの影響を受けるのみです。ただし、お客様のサイトの他のユーザーがまだ IE11 を使用している場合は、影響を受ける可能性があります。

「サポート終了」が意味すること

WordPress からブラウザーのサポートが外されると、そのブラウザーでの新機能のテストが行われなくなり、最適な動作が保証されなくなります。

また、WordPress コアのソースコードの一部を生成する自動化ツールも、サポートされていないブラウザーを除外するように更新されます。つまり、これらの生成されたファイルに依存している機能は、それらのブラウザーのユーザーにとってバグがあったり、動作しなくなったりする可能性が高いということです。

ブロックエディターに関連するほとんどすべてのファイルは、これらの自動化されたツールを使用してコンパイルされているため、ブロックエディターはこの変更による影響が最も大きい WordPress の部分となります。WordPress ダッシュボードの他の部分でもこれらのツールで構築された CSS が使用されており、IE11 を使用した場合に外観に影響が出る可能性があります。

IE11 固有のコードベースの他のすべての部分は、ケースバイケースで特定し、評価し、削除する必要があり、残りの部分は手動で保守されます。このプロセスは WordPress 5.9 のリリースから始まり、数回のメジャーリリースを経て徐々に行われる予定です。また、IE11 上で報告されたバグは修正されません。

テーマへの影響

今回の計画により、デフォルトで同梱されているテーマには何の変更も加えられません。また、IE11 のサポート (または、各テーマのリリース時にサポートされていた可能性のある他のブラウザー) に関連するコードは、デフォルトのテーマから削除されません。ただし、今後追加される新機能は、IE11ではテストされません。

デフォルトのテーマを使用していない場合でも、自分のテーマがこの変更の影響を受ける可能性は低いと思われます。テーマは通常、独自のブラウザーサポートポリシーを持っており、WordPress コア の変更はそれらに影響しません。テーマ作者がすでに IE11 のサポートを削除している可能性もあります。

IE11 のサポートが重要で、テーマが IE11 をサポートしているかどうか不明な場合は、テーマ開発者に連絡して確認することをおすすめします。

この変更に関する詳しい情報は、Making WordPress Core ブログでご覧いただけます。

Openverse (オープンバース) へようこそ

以下は、Josepha が書いた WordPress.org 公式ブログの記事「Welcome to Openverse」を訳したものです。

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


WordPress の共同創業者であるマット・マレンウェッグの先日の声明と、クリエイティブ・コモンズ CEO キャサリン・スティラーの投稿を受けて、CC Search (新しい名称は Openverse) が WordPress のオープンソースプロジェクトの一部になったことを正式に発表できることを嬉しく思います。マットも私も、クリエイティブコモンズの長年の支援者です。これにより、クローズドソースのフォトライブラリに対して長期的かつ持続的な挑戦を行い、WordPress のエコシステムがさらに強化されることを期待しています。

現在のユーザーへの影響

現在のCC Search ユーザーは、引き続きインターネット上でオープンライセンスの画像を検索し、利用することができます。WordPress は、クリエイティブコモンズ・プロジェクトが始めた素晴らしい活動を継続し、検索機能を拡張していく予定です。

次のステップ

今後は、音声や動画などの追加メディアのインデックス化と検索ができるようになることを期待しています。機能を拡張し、プロジェクトを成長させていく中で、Openverse を WordPress やメディアライブラリに直接統合していきたいと考えています。私たちは、オープンにライセンスされたメディアの検索と埋め込みを可能にするだけでなく、さらに皆さんのメディアにライセンスを追加して共有することで、恩恵を還元したいと考えています。

コントリビュートするには

Slack チャンネルの #openverse を訪れ、GitHub で WordPress オーガニゼーションの下に移動されたコードリポジトリを見てみましょう。また、このプロジェクトは、https://make.wordpress.org/openverse にある独自の Make ページでもご覧いただけます。現在、新しいチーム、プロセス、手順の設定に取り組んでいます。

Join us in welcoming the team and community. As a treat, check out the most recent WP Briefing episode, The Commons of Images, in which Matt and I discuss CC Search and our hopes for it as part of the WordPress community.

チームとコミュニティに歓迎の意を表します。こちらの Podcast エピソード “The Commons of Images” では、マットと私が CC Search と WordPress コミュニティの一部としての同プロジェクトへの期待について話しています。

WordPress 5.7.2 セキュリティリリース

以下は、Peter Wilson が書いた WordPress.org 公式ブログの記事「WordPress 5.7.2 Security Release」を訳したものです。

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


WordPress 5.7.2 がリリースされました。

これは1件の修正を含んだセキュリティリリースです。セキュリティリリースですのであなたが管理するサイトを今すぐ更新してください。WordPress 3.7 以降の全メジャーバージョンに対しても同様のセキュリティリリースが出されています。

WordPress 5.7.2 はショートサイクルのセキュリティリリースです。次のメジャーリリースはバージョン 5.8 です。

WordPress 5.7.2 は WordPress.org からダウンロードするか、ダッシュボード > 更新 メニューで 今すぐ更新 をクリックして更新できます。

自動バックグラウンド更新がサポートされたサイトではすでに更新のプロセスが始まっているでしょう。

セキュリティ更新

バージョン 3.7 から 5.7 にかけての全バージョンの WordPress に影響するセキュリティ問題が確認されました。

WordPress セキュリティチームにより WordPress にこれらの修正が実装されました。

より詳しい情報は 5.7.2 の HelpHub ドキュメンテーションページを確認してください。

感謝と称賛を

(翻訳者より: 日本語版では貢献者全員の名前を載せることができませんので、オリジナルの英語版リリース告知をぜひ参照してください。)

Figma WordPress デザインライブラリを活用してみよう

以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Getting Started with the Figma WordPress Design Library」を訳したものです。

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


この記事は James Koster (@jameskoster) が執筆しました。

WordPress デザインライブラリは、その名の通り、WordPress のデザインアセットを集めたライブラリで、誰でも簡単に WordPress UI のデザインプロトタイプを Figma 上で作成できます。

これらのツールは、デザイナーが新しい UI を作成するときや、アイデアや機能強化、さらにはバグレポートの解決策を提供したいと考えている人にとって便利なものです。時に、百聞は一見にしかず、です。

この記事では、Figma の主な機能について説明した後、WordPress デザインライブラリのユーティリティーの一部のデモとして実用的な例を紹介します。

Figma とは

Figma は、WordPress プロジェクトのデザインチームのメンバーが、デザインコンセプトの作成や共有のために数年間にわたって使用してきた共同デザインツールです。ブラウザーからのアクセス、豊富なプロトタイピングツール、コンポーネントライブラリ、コードインスペクタ、ライブ埋め込み、インラインコメント、プラグインなど、さまざまな便利な機能が提供されています。

そして最高なのは、登録してさわり始めるのが完全に無料ということです。WordPress.org Figma オーガニゼーションに参加すると (手順は以下を参照)、WordPress デザインライブラリにアクセスできるようになり、WordPress の UI をすぐにデザインできるようになります。

WordPress デザインライブラリとは

Figma では、コンポーネントやスタイルを公開して共有することができ、ファイルをライブラリに変換して、他のファイルでそれらのコンポーネントのインスタンスを使用できるようになります。

Figma.com

WordPress デザインライブラリは、「WordPress のコードベースで UI を構成するすべての JavaScript コンポーネントを視覚的に表現したもの」と考えると分りやすいかもしれません。このライブラリのエンドユーザーは、これらのコンポーネントを自己完結型の環境で使用し、新しいインターフェースデザインを作成することができます。このライブラリは、すべての UI パーツ (ボタン、フォーム入力など) が入った大きなレゴの箱のようなもので、これを使って新しいデザインを作成し、試すことができます。

これらのアセットを使ってデザインを作成することで、従来は必要だった煩雑なプロセスがなくなり、新しいインターフェースのアイデアを素早く生み出すことができます。作成したボタンが、コードによってレンダリングされたボタンと完全に一致することを繰り返し再確認する必要はありません。逆に言えば、他の人とデザインを共有する人は、ボタンのような特定の要素をコードにできるだけ一致させようと努力するものです。WordPress デザインライブラリは、こういった問題を解決します。

これらのアセットがコードベースに存在するものと視覚的に一致していることのさらなる利点は、これらのアセットを使って作成したデザインは、最新の WordPress デザインランゲージを使用しているため、ほとんど何の努力も必要とせずに「WordPress らしく」なるということです。このようなデザインを開発者に渡すことで、解釈や実装が容易になります。

Figma の基礎

この記事の実践編に入る前に、Figma ライブラリの基本的な機能を簡単に説明します。これは、WordPress デザインライブラリを使用するための準備に役立ちます。

Component (コンポーネント)

上で触れたように、ライブラリは、コードベースの同等のものに視覚的に対応するものとして機能する「コンポーネント」で構成されています。 つまり、Figma には「ボタン」コンポーネントがあり、WordPress コードベースにはそれに対応する「ボタン」コンポーネントがあります。

しかし、Figma コンポーネントとはいったい何でしょうか ?

コンポーネントは、デザイン全体で再利用できる要素です。プロジェクト全体で一貫したデザインを作成、管理するのに役立ちます。

help.figma.com

次にデザインする時に役立つやり方を理解するために、Figma コンポーネントの特性の一部を簡単に調べてみましょう。

Variants (バリエーション)

Figma のコンポーネントの中には、variant (バリエーション) があるものがあります。例えば、ボタンは以下のような状態を持つことができます。

  • Resting (休憩中)
  • Hover (ホバー)
  • Focus (フォーカス)
  • Disabled (無効化)

これらは、Figma の variant インターフェースで操作できます。

variant を持つコンポーネントの他の例として、フォーム入力やメニュー項目があります。これは Figma の新機能であるため、時間をかけて追加していく予定です。

Overrides (上書き)

挿入したコンポーネントは、ライブラリのマスターコンポーネントと本質的にリンクしていますが、いくつかのプロパティを上書きすることが可能です。

ボタンコンポーネントのインスタンスを操作する際、ラベルや背景色などを変更できます。git のワークフローに慣れている方なら、これはローカルブランチの作成に似ています。変更を加えても、数回クリックするだけで簡単にリセットできます。

ローカルインスタンスに適用された override は、マスターコンポーネントが更新されても継続されます。そのため、緑の背景を持つボタンをデザインする場合、マスターコンポーネントが更新されても、ボタンがそれらの更新を継承して緑色のままであるという知識があれば、その overrideを安全に適用できます。


ここではコンポーネントの表面を軽くなぞっただけですので、より高度な情報については、公式の Figmaドキュメントを見ていただくことをおすすめします。

Figma スタイル

コンポーネントに加えて、スタイルも WordPress デザインライブラリの一部として公開されています。これらは、マスタースタイルがライブラリに存在し、ローカルの Figma ファイルで利用できるという点でコンポーネントと同様の属性を持っています。 コンポーネントと同様に、ライブラリへの変更が公開されると、スタイルは更新を受け取ります。

スタイルは、WordPress のコードベースに存在する色、タイポグラフィのルール、ドロップシャドウなどの効果を定義するために使用されます。これにより、テキストや背景の色などを他の UI パーツに合わせて適用することができます。

ライブラリのスタイルを利用することで、既存の UI 要素に一致したものを作ることができ、実装が容易になります。


Figma スタイルについて詳しく知りたい方は、公式ドキュメントをおすすめします。

Views/Stickers (ビュー/ステッカー)

「Sticker (ステッカー)」は、共通の UI 要素を表現するためにコンポーネントとスタイルを組み合わせたものです。カスタマイズの必要性が高いため、完全なコンポーネント化には向いていません。ステッカーの例としては、インスペクタのサイドバーやブロックインサータなどがあります。

使い方はシンプルです。必要なステッカーを見つけ、WordPress デザインライブラリからコピーし、ローカルファイルにペーストして、必要に応じてカスタマイズするだけです。

ステッカーは、コンポーネントやスタイルのような Figma の機能ではありませんが、作業ファイルにコピーしたステッカーは、そのベースとなるアセットにより、常に最新の状態に保たれます。

ビューとは、コンポーネントやスタイル、ステッカーなどをアレンジしたものです。

WordPress デザインライブラリを使ってブロックをデザインする

さて、Figma ライブラリの基本とその機能、そしてステッカーやビューなどの WordPress デザインライブラリのユーティリティーについて理解したところで、実際の例として、全く新しいブロックの UI をデザインしてみましょう。

はじめに

最初に必要なのは、WordPress.org の Figma オーガニゼーションにお持ちの Figma アカウントを追加することです。

Figma に登録したら、コミュニティ Slack の #design チャンネルに参加して、招待をリクエストしてください。フレンドリーなコミュニティメンバーが、すぐにセットアップのお手伝いをします。

さあ、楽しいパートの始まりです。

Figma で新規デザインファイルを作成するには、Gutenberg プロジェクトにアクセスし、”+ New” ボタンをクリックします。

それでは、WordPress デザインライブラリを作業ファイルに入れて、必要なものにアクセスできるようにしましょう。

  1. “Assets” (アセット) パネルを開き、小さな本のアイコンをクリックして、利用可能なチームライブラリを表示します。
  2. 表示されたモーダル画面で、”WordPress Design Library” をオンにします。他のライブラリは今のところオフにしておいて構いません。

モーダル画面を閉じると、アセットパネルにいくつかのコンポーネントが表示されているのが分かります。コンポーネントを挿入するには、キャンバスにドラッグしてください。

ブロックを挿入するような感じですね 🙂

ピザブロックの作成 🍕

私はピザを食べるのが大好きなので、サンプルとして、ユーザーが投稿やページにおいしいピザを表示できるような新しいブロックをデザインしてみたいと思います。このブロックでは、スライスの枚数やトッピングの種類を指定できるオプションを含めたいと思います。

流れを把握する

私はいつもブロックをデザインする際に、個別の流れに注目したいと思っています。つまり、ユーザーがそのブロックを操作する際に取るであろう直線的なステップのことです。今回のケースでは、Figma ファイルで以下のステップ/ビューのビジュアライゼーションを作成したいと思います。

  1. ブロックインサータからブロックを挿入する
  2. ブロック、ツールバー、インスペクタのオプションを含む、ピザブロックのプレースホルダーの状態
  3. 設定済みのピザブロックの設定
  4. 最終的には、キャンバスの上に美味しそうなピザが置かれる

新しい状態をスケッチする

WordPress デザインライブラリのおかげで、多くの既存の UI コンポーネントを使用することができますが、それでも、ピザブロックが必要とする新しいインターフェイスでそれらがどのように構成されるのかという大まかなアイデアが必要です。たいてい、これらを紙にスケッチするのが役に立ちます。

これは、ユーザーが初めてブロックを挿入したときに表示されるプレースホルダーの状態です。これで必要なものはすべて揃うはずです。

ビューとステッカーの準備

幸いなことに、WordPress デザインライブラリには上記のフローの各ステップに使用できるビューがあります。

ライブラリを開いて “Views” のページに移動し、必要なビューを見つけてコピーし、作業用のファイルに貼り付けます。

ライブラリーの View は、他の人がアクセスできるように、そのままの形でコピーする (切り取りはしない) ことがとても重要です。切り取ってしまうと、永遠に消えてしまいますので、絶対にやめてください 🙂

ブロックのプレースホルダーステッカーも必要ですので、”Stickers” ページに移動し、先ほどのスケッチに最も近いものをコピーして、作業ファイルに貼り付けます。

ビューと同様に、ステッカーはコピーするだけで、切り取りはしないでください。

紙の上でスケッチしたプレースホルダーの状態 (これを Figma ファイルにインポートすると便利です) を参照すると、デザインを実現するためにいくつかのフォーム要素が必要であることがわかります。

コンポーネントの収集

アセットパネルに移動し、必要なコンポーネントを見つけて、ファイルにドラッグします。

ワンポイントアドバイス: 一度挿入したコンポーネントは、その設定パネルから別のコンポーネントに変換することができます。アセットパネルを何度も開くよりも、すでに挿入したコンポーネントをコピー/ペーストして、この方法で変形させる方が簡単な場合もあります。

ビュー、ステッカー、コンポーネントをアレンジしてまとまりのあるデザインにする

ここで、必要なパーツがすべて揃ったので、あとは先ほど説明したフローの各ステップに合わせて、パーツを配置するだけです。この作業は、ドラッグ & ドロップで簡単に行えます。

Photoshop や Sketch などのソフトウェアに慣れ親しんでいる方であれば、とても見慣れたものに感じられるはずです。

すべてが整ったところで、フローは完成です。

わずかな時間でこれだけのことができるのは、今でも信じられません。

プロトタイプの連携

フローの各ステップを作成した後、最後のステップはそれらをつなげてクリッカブルなプロトタイプを形成することです。

プロトタイプパネルに切り替えて、レイヤーを選択し、白い点を対応するフレームにドラッグして、クリックビヘイビアを作成します。

Figma プロトタイピングツールがサポートする動作には、ホバー、ドラッグ、クリックなど様々なものがあります。また、スマートアニメーションを作成することも可能です。別のチュートリアルで探求できるかもしれませんが、今のところ、より高度なプロトタイピングについては Figma のドキュメントを参照してください。

適切な要素がすべて連携されたので、「再生 ▶️」アイコンをクリックして、プロトタイプを試してみることができます。

ここをクリックしてぜひ試してみてください。

以上です !

このチュートリアルでは、かなりシンプルで簡潔に説明しようとしました。ここでは基本的を理解しただけですが、新しいデザインを試す際には、Figma と WordPress デザインライブラリの力が発揮されます。

フルサイト編集機能が気になる方へ

以下は、Josepha が書いた WordPress.org 公式ブログの記事「Curious About Full Site Editing?」を訳したものです。

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


今年2回目のメジャーリリースが目前に迫ってきました。WordPress 界隈で、「フルサイト編集 (Full Site Editing/FSE)」に関する話題を耳にしたことがあるかもしれません。この記事では、知っておくべき全体像と、更に詳しく知りたい方のための道しるべとなるリンクをご紹介します。

サイト保有者や、運営者の方へ

WordPress でサイトを運営されている方にとって、バージョン5.8へのアップデートは他のアップデートと同様にシームレスに行うことができるはずです。フルサイト編集に関する話題はとてもエキサイティングですが、心配する必要はありません。次のリリースでのフルサイト編集に関連するものはすべてオプトインのオプションです。自由に試すには、専用に作られたテーマが必要です。最後のリンクで例の一部をご覧ください。

サイト制作会社、テーマ/プラグイン開発者の方へ

クライアント向けに WordPress CMS の機能を拡張している場合も、バージョン5.8へのアップデートはシームレスに行うことができます。いつものように、カスタム実装の部分をステージング環境でスポットチェックするか、リリース候補 (RC 版) が利用可能になった時点で完全にテストするのが賢明です。プロダクトをテストして、完全な状態でクライアントに提供したいと考えている場合は、下記のテストオプションをご利用ください。

コントリビューターとボランティアの方へ

WordPress プロジェクトに時間と専門知識を提供していただるようであれば、WordPress 5.8 のリリースに向けた面白い作業に参加していただき、作業をやり遂げた深い満足感を持ってサイトを更新していただけます。デザインや開発、ドキュメントや翻訳など、リリースごとに多くの作業が行われます。時間に余裕があって、あなたのサイトを支えるツールを支えるプロジェクトを支援したい方は、以下のリンクをチェックしてみてください。

リソース

Gutenberg プラグインを使って、アーリーアダプターになりませんか

以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Become an Early Adopter With the Gutenberg Plugin」を訳したものです。

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


クレジット: 文章 – Anne McCarthy (@annezazu)、デザイン – Mel Choyce-Dwan (@melchoyce)

ローカルな Meetup や信頼できるメディア、ユーザーグループなどの WordPress 界隈では、この4年間、コアエディター、Gutenberg、ブロックエディターなどの用語が同じような意味で使われているのを耳にしたことがあるかもしれません。また、プロジェクト自体のコントリビューターの活動をフォローしている方は、Gutenberg プラグイン、Gutenberg、ブロックエディターといった、また他にもニュアンスのある言葉も耳にしたことがあるかもしれません。

少しわかりにくくなることもあるので、この先を理解する助けになるよう、4つの用語をご紹介しましょう。

  • WordPress: オープンソースソフトウェアであると同時に、それを取り巻くコミュニティも意味します。
  • Gutenberg: Gutenbergは、WordPress ソフトウェアの編集エリアを更新するための複数年にわたるプロジェクトのコードネームです。
  • エディター: エディターとは、サイトの投稿やページのコンテンツを更新できるソフトウェアのセクションを指します。
  • Gutenberg プラグイン: Gutenberg プラグインは、エディターを更新するための初期の作業を共有する場所です。

Gutenberg プラグイン

さて、定義を整理したところで、Gutenberg プラグインはどんな時、何のために使うのかを説明します。このプラグインは、早期アクセスプログラムや「WordPress ラボ」のようなものと考えることができます。このプラグインは2週間ごとに更新されているため、報告されたバグは頻繁に修正され、目に見えるものは素早く変わっていきます。

Gutenberg プラグインには、まだ WordPress に導入する準備ができていない機能も含まれていますが、好奇心旺盛なユーザーがテストしてフィードバックを提供できるようになっています。これは、WordPress のリリースで安定した機能をサイトに反映させる一方で、実験的な機能をテストして改良するための一般的な手法です。Gutenberg プラグインを使用して初期の機能にアクセスできるかどうかを知るには、Make WordPress コアチームブログの 新着情報リリースの投稿コアエディターの改善投稿シリーズをチェックしてください。

Gutenberg の機能を使うのにプラグインは必要ですか ?

この答えは、ユーザーによります。一般的に言って、WordPress のコード面によほど慣れていない限り、公開して活発に利用されているサイトで Gutenberg プラグインを使うことはおすすめできません。幸いなことに、WordPress の各リリースには、複数のバージョンの Gutenberg プラグインで更新された機能がすでに含まれています。

しかし、熱心なベータテスターの方で、フィードバックを報告するのが好きだったり、プラグインの実験的な側面をオプトインやオプトアウトする方法を探るのが好きだったりするなら、Gutenberg プラグインが提供するものをしっかり使いたいかもしれない理由はいくつかあります。

  • 新機能をテストし、役立つフィードバックをしてみましょう。例えば、このプラグインを使って、 フルサイト編集のテストを手伝えます。 
  • 実験的な機能をオプトインまたはオプトアウトするタイミングをコントロールしながら、最新かつ最高の機能にいち早くアクセスできます。 
  • テーマ作者、プラグイン開発者、制作者などが、将来に向けて準備することができます。

すでに Gutenberg プラグインを使用し、GitHub でフィードバックを共有している皆さん、ありがとうございます。このようなフィードバックは、WordPress のリリースに含まれる機能の安定性を確保するために役立ちます。