Development | WordPress.org 日本語

WordPress 5.8 リリース候補 3

投稿日: 2021年7月14日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

WordPress 5.8 の3番目のリリース候補が公開されました！ 🎉

WordPress 5.8 は、2021年7月20日にリリースされる予定ですが、そのためには皆様の協力が必要です。まだ 5.8 を試していないなら今がその時です！

WordPress 5.8 リリース候補 3 のテストは、次の3つの方法で行うことができます。

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
リリース候補（zip 形式）を直接ダウンロードする。
WP-CLI を使用: wp core update --version=5.8-RC3

ベータ・RC版をテストし、フィードバックをくださったすべての貢献者の皆様に感謝いたします。バグのテストは、リリースに磨きをかけるための重要な作業であり WordPress に貢献するための素晴らしい方法です。

プラグイン・テーマ開発者の方へ

WordPress 5.8 でプラグインやテーマのテストを行い、readme ファイルの Tested up to バージョンを 5.8 に更新してください。互換性の問題を見つけた場合は、最終リリース前に解決できるよう、必ずサポートフォーラムに投稿してください。

WordPress 5.8 に含まれる変更点の詳細については、WordPress 5.8 ベータ 1 の記事をご覧ください。WordPress 5.8 フィールドガイドは、特に開発者の方に役立つもので、大きな変更点に対応するための情報やリンクが掲載されています。

ご協力いただけること

英語以外の言語で話したり書いたりすることができますか？ WordPress の100言語を超す翻訳にご協力ください！

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

（訳注: 貢献者、Haiku セクションは、原文を参照してください。）

WordPress 5.8 リリース候補 2

投稿日: 2021年7月7日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

WordPress 5.8 の2つ目のリリース候補が公開されました！ 🎉

WordPress 5.8 は、2021年7月20日にリリースされる予定ですが、そのためには皆様の協力が必要です。まだ 5.8 を試していないなら今がその時です！

WordPress 5.8 リリース候補 2 のテストは、次の3つの方法で行うことができます。

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
リリース候補（zip 形式）を直接ダウンロードする。
WP-CLI を使用: wp core update --version=5.8-RC2

プラグイン・テーマ開発者の方へ

ご協力いただけること

英語以外の言語で話したり書いたりすることができますか？ WordPress の100言語を超す翻訳にご協力ください！

（訳注: 貢献者、Haiku セクションは、原文を参照してください。）

WordPress 5.8 リリース候補

投稿日: 2021年7月1日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

WordPress 5.8 最初のリリース候補が公開されました！ 🎉

WordPress 5.8 最終リリースへと向かうコミュニティの重要な節目を共に祝いましょう！

「リリース候補」は、新しいバージョンがリリースできる状態であることを意味します。しかし、何千ものプラグインやテーマ、何百万人もの人々の WordPress の使い方の違いにより、何かを見落としている可能性があります。WordPress 5.8 は、2021年7月20日にリリースされる予定ですが、そのためには皆様の協力が必要です。まだ 5.8 を試していないなら今がその時です！

WordPress 5.8 リリース候補のテストは、次の3つの方法で行うことができます。

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
リリース候補（zip 形式）を直接ダウンロードする。
WP-CLI を使用: wp core update --version=5.8-RC1

ベータ版をテストし、フィードバックをくださったすべての貢献者の皆様に感謝いたします。バグのテストは、リリースに磨きをかけるための重要な作業であり WordPress に貢献するための素晴らしい方法です。

WordPress 5.8 の概要

2021年2番目のリリースでは、フルサイト編集の約束された未来に向けて、ブロックエディターを次のように進化させています。

ブロックによるウィジェット管理
新しいブロックとパターンを使った投稿表示
投稿テンプレートの編集
ページ構成の概観
ブロックのパターン提案
画像のスタイルと色付け
theme.json
IE11 サポートの終了
WebP 対応
追加ブロックサポート
Gutenberg バージョン 10.7

WordPress 5.8 には、開発者の体験を向上させるための多くの改良が加えられています。詳しくは、Make WordPress Core ブログを購読し、開発者ノートのタグを注視して、最新情報やご自身のプロダクトに影響を与える可能性のある変更を確認してください。

プラグイン・テーマ開発者の方へ

WordPress 5.8 フィールドガイドが近日中に公開されますので、主要な変更点の詳細についてはそちらを参照してください。

ご協力いただけること

英語以外の言語が話せますか？ WordPress の100言語を超す翻訳にご協力ください！このリリースは 5.8 リリーススケジュールにおける翻訳語句のハードフリーズ（凍結）ポイントでもあります。

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

（訳注: 貢献者、Haiku セクションは、原文を参照してください。）

WordPress 5.8 ベータ 4

投稿日: 2021年6月26日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

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

このソフトウェアはまだ開発中ですので、本番運用中のサイトでの利用はおすすめできません。テストサイトでの試用を検討してください。

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

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
ベータ版（zip 形式）を直接ダウンロードする。
WP-CLI を使用: wp core update --version=5.8-beta4

正式リリースは、2021年7月20日を予定しています。4週間もありませんので、最終リリースを可能な限り良いものにするためには、皆様からの協力が必要です。

ハイライト

ベータ 3 以降、18 件のバグが修正されました。チケットの多くは、既存デフォルトテーマの改善や、新しいブロックウィジェットの画面、ベータ版で集積されたエディターのバグ修正に関するものです。

ご協力いただけること

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

現時点で、WordPress 5.8 では 254 件のチケットが修正されており、その中には 91 件の新機能と強化が含まれています。この後、さらにバグの修正が行われていきます。

テストをしてください！

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

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

（訳注: 貢献者、Haiku セクションは、原文を参照してください。）

WordPress 5.8 ベータ 3

投稿日: 2021年6月23日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

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

このソフトウェアはまだ開発中ですので、本番運用中のサイトでの利用はおすすめできません。テストサイトでの試用を検討してください。

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

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
ベータ版（zip 形式）を直接ダウンロードする。
WP-CLI を使用: wp core update --version=5.8-beta3

正式リリースは、2021年7月20日を予定しています。4週間後に迫っていますので、最終リリースを可能な限り良いものにするためには、皆様からの協力が必要です。

ハイライト

ベータ 2 以降、38 件のバグが修正されました。その中のいくつかの変更点をまとめます。

ブロックエディター: ユニークなレスポンスのために、キャッシングをエンドポイントに移動。 (#53435)
同梱テーマ: ウィジェットエリアでのブロック表示の改善。 (#53422)
コーディング規約: wp-admin/comment.php の HTML フォーマットに一貫性を持たせる。 (#52627)
エディター: メタデータファイルから登録するブロックタイプのリストにカバーブロックを含める。 (#53440)
メディア: 「前」「次」の添付ファイルのリンクを返す新機能を追加。 (#45708)
メディア: 小さい画面でのアップロードページのメディアアイテムのレイアウトを改善。 (#51754)
メディア: メディアが追加・削除された時に添付ファイルの総数を更新。 (#53171)
REST API: ウィジェットの名前と説明に含まれるシングル・ダブルクオートのエンティティをデコード。 (#53407)
Twenty Nineteen: エディターで全幅・幅広のブロックのマージンを更新。 (#53428)
ウィジェット: ウィジェットブロックエディターにエディタースタイルを追加。 (#53344)

ご協力いただけること

テストをしてください！

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

（訳注: 貢献者、Haiku セクションは、原文を参照してください。）

WordPress 5.8 ベータ 2

投稿日: 2021年6月17日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

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

このソフトウェアはまだ開発中ですので、本番運用中のサイトでの利用はおすすめできません。テストサイトでの試用を検討してください。

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

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
ベータ版（zip 形式）を直接ダウンロードする。

正式リリースは、2021年7月20日を予定しています。5週間後に迫っており、最終リリースを可能な限り良いものにするためには、皆様の協力が不可欠です。

ハイライト

ベータ 1 以降、26 件のバグが修正されました。その中のいくつかの変更点をまとめます。

ブロックエディター: 同梱されているブロックパターンを削除し、パターンディレクトリをサポート。 (#53246)
ブロックエディター: コアがエディタースタイルのソースを識別できるようにタイププロパティを追加。 (#53175)
ビルド/テストツール: ダッシュボードのクイックドラフトセクションにいくつかのテストを追加。 (#52905)
ビルド/テストツール: @babel/polyfill を core-js/stable に交換。 (#52941)
コーディング規約: メニューの一括削除のコードを WordPress コーディング規約に沿うように更新。 (#21603)
外部ライブラリ: Underscore をバージョン 1.13.1 に更新。 (#45785)
一般: ブロックエディター、テンプレートモード、ウィジェット画面に関するいくつかの修正。 (#51149)
ログインと登録: ユーザー名が不明な場合のエラーメッセージを改善。 (#52915)
メディア: メディアライブラリの AJAX レスポンスデータの形を復元。 (#50105)
サイトヘルス: GD ライブラリがサポートしているファイル形式の一覧を表示。 (#53022)
Twemoji: 新バージョンに更新。 (#52852)

ご協力いただけること

現時点で、WordPress 5.8 では 214 件のチケットが修正されており、その中には 87 件の新機能と強化が含まれています。この後、さらにバグの修正が行われていきます。

テストをしてください！

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

WordPress 5.8 ベータ 1

投稿日: 2021年6月13日2021年7月1日投稿者: Seisuke KuraishiDevelopment, Releases

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

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

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

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

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

WordPress Beta Tester プラグインをインストールして有効化する（「最前線」チャンネルと「ベータ / RC のみ」ストリームを選択）。
ベータ版（zip 形式）を直接ダウンロードする。

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

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

ハイライト

パワフルなブロック

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

パターンの選択

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

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

ツールの改善

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

Internet Explorer 11

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

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

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

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

ご協力いただけること

テストをしてください！

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

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

本リリースでの改善点

再利用ブロック、カバーブロック、テーブルブロック、リストビュー、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.0、10.1、10.2、10.3、10.4、10.5、10.6、10.7 の記事をご覧ください。これらの変更に加えて WordPress 5.8 では、88の新機能と強化を含む215のチケットが修正されており、この後、さらにバグの修正が行われていきます。

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

投稿日: 2021年5月1日2021年4月30日投稿者: Naoko TakanoDevelopment

以下は、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 デザインライブラリを作業ファイルに入れて、必要なものにアクセスできるようにしましょう。

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

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

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

ピザブロックの作成 🍕

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

流れを把握する

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

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

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

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

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

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

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

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

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

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

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

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

コンポーネントの収集

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

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

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

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

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

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

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

プロトタイプの連携

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

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

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

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

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

以上です !

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

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

投稿日: 2021年4月24日投稿者: Naoko TakanoDevelopment

以下は、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 のリリースに含まれる機能の安定性を確保するために役立ちます。

ブロックパターンの作り方

投稿日: 2021年4月3日2021年4月3日投稿者: Naoko TakanoDevelopment, Features

以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。

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

テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。

WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。

ブロックパターンとは

パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになります。レイアウトをスタートするためのツールとして、必要に応じてコンテンツに追加してすぐに使うことがで、1個のブロックのようなシンプルなものから、全ページのレイアウトのような複雑なものまであります。

パターンは、ブロックライブラリのタブに格納されています。クリックしたりドラッグしたりすると、サイトのスタイルでプレビューできます。

基本的にブロックパターンとは、あらかじめ束ねられた単なるブロックです。

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->

ブロックエディターを使っていくつかのブロックを好きなように設定するだけで、難しい作業の部分は終了です。

ブロックライブラリに入れるには

ハンドブックにはもっと詳しい説明がありますが、結論から言うと以下のとおりです。

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

👆 これは PHP のスニペットですので、WordPress のプラグインに落とし込んだり、もっと簡単に言えば、テーマのfunctions.php ファイルに貼り付けたりすることができます。完了すると、以下のようになります。

画像を含むパターンでは、画像をどこに保存するかを考える時間を割く価値があります。TT1 Blocks テーマ (“TwentyTwentyOne Blocks” の略) では、画像をテーマライブラリに保存しています。

次のステップ

ブロックパターンは、ブロックライブラリから挿入した時点でユニットとしてのまとまりを失ってしまいます。作ったパターンから切り離された単なるブロックの寄せ集めになり、好みに合わせてカスタマイズできるものになるのです。パターンはテンプレートではなく、あくまでもショートカットです。これはつまり、テーマの切り替えやパターンプラグインの無効化を気にする必要はないということでもあります。挿入済みのブロックがどこかに行ってしまうこともありません。

とはいえ、あるパターンをとても気に入って、まったくカスタマイズせずに何度も使いたい場合は、再利用ブロックにすることもできます。

再利用ブロックは、その名の通り、再利用するために作成されます。この機能を使うのに良い場面は、よく使うちょっとしたスニペットを保存しておいて、一箇所で編集することで挿入したものすべてを更新するといった時です。「Twitter でフォロー」、「シリーズに含まれる記事一覧」、「メルマガ購読」などがその好例です。

良いブロックパターンとは

現在 WordPress コアに含まれるパターンは、利用できる機能によって制限されます。ブロックエディター上で文字間隔をカスタマイズできない場合、ブロックパターンでもそれは実現できません。グローバルスタイルプロジェクトではブロックの機能を拡張していく予定ですが、それまでは、利用可能なツールを使っていくしかありません。

それでも、色、画像、タイポグラフィといった最も基本的な要素があれば、多くのことが可能になります。

画像とテキストを含む3カラムのブロックパターン — 画像とテキストを含む3カラム

右側に画像、左側にメディアとテキストを配置したブロックパターン — 右側に画像 + メディアとテキスト

これらのパターンは、WordPress のコアに採用される可能性があるものとしてデザインしたのですが、すべてに共通するいくつかの特性があります。

テーマが共通している。

パターンは、サイトの一部と考えることができます。パターンは全体の一部であるため、同じテーマを共有する他のパターンの文脈の中で存在するのが最も効果的です。上のパターンには、「自然」、「アート」、「建築」といったテーマを共有したものなどがいくつかあります。このように、複数のパターンを組み合わせることで、サイトの複数のページを一度にまとめることが可能になります。

ミニマルなカラーパレットが共通している。

全体を構成するパーツであるパターンは、必然的に異なる色を使ったコンテキストで使われます。色数を減らすことで調和の可能性が高まると同時に、ジャストフィットさせるためのカスタマイズも少なくて済みます。

最高のパターンは、それなくしてはできないようなことを実現する。

画像をオフセットしてユニークなシルエットを作ったり、目立たない機能 (カバーブロックの固定配置など) を利用したりすることで、創造性を発揮することができます。

ヒント: プラグイン由来のブロックも含めて、どんなブロックでもパターンに使うことができます。また、そのブロックがブロックディレクトリにあって、まだお使いの WordPress に存在しない場合は、ワンクリックでインストールするよう促されます。

こちらのプラグインをどうぞ

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":" s-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

パターンを作りたい場合のために、このサンプルプラグインでは、上でご紹介したパターンのうち2つを採用しています。プラグインのフォルダーに入れれば、ブロックライブラリに表示されます。

アバターと引用のブロックパターンが追加されたパターンタブ — 「テキスト」カテゴリーにインストールされたパターン

自由に調整し、カスタマイズして、お好みのようにしてください。結局のところ、これは GPL ですから !