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

投稿日: 投稿者: Naoko Takanoカテゴリー Development

以下は、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 デザインライブラリの力が発揮されます。

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

投稿日: 投稿者: Naoko Takanoカテゴリー Features, General

以下は、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 プラグインを使って、アーリーアダプターになりませんか

投稿日: 投稿者: Naoko Takanoカテゴリー Development

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

WordPress 5.7.1 セキュリティとメンテナンスのリリース

投稿日: 投稿者: Takayuki Miyoshiカテゴリー Releases, Security

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

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

WordPress 5.7.1 が利用可能になりました。

これは2点のセキュリティ修正と26点のバグ修正を含んだセキュリティとメンテナンスのリリースです。セキュリティ修正を含むものですので、今すぐサイトを更新することを勧めます。WordPress 4.7 以降の全メジャーバージョンの更新も併せて行われています。

WordPress 5.7.1 は短いサイクルでのセキュリティとメンテナンスのリリースです。次のメジャーバージョンリリースは 5.8 になります。

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

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

セキュリティ更新

バージョン 4.7 から 5.7 までのすべての WordPress に影響する2点のセキュリティ問題が修正されました:

  • SonarSource により報告された、PHP 8 環境で発生するメディアライブラリの XXE 脆弱性。
  • Mikael Korpela により報告された、REST API のデータ露出脆弱性。

非公開での脆弱性情報提供にご理解くださった報告者の皆さんに感謝します。それによってセキュリティチームは時間を稼ぐことができ、実際に WordPress サイトが攻撃を受けるより前に脆弱性を修正することができました。

これらの問題に関して、Adam Zielinski、Pascal Birchler、Peter Wilson、Juliette Reinders Folmer、Alex Concha、Ehtisham Siddiqui、Timothy Jacobs、そして WordPress セキュリティチームの多大な貢献がありました。

より詳しい情報は、Trac 上の変更点の完全なリストを参照、または 5.7.1 の HelpHub ドキュメンテーションページを確認してください。

感謝と称賛を

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

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

投稿日: 投稿者: Naoko Takanoカテゴリー Development, 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 のコアに採用される可能性があるものとしてデザインしたのですが、すべてに共通するいくつかの特性があります。

テーマが共通している。

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

画像背景のカバーブロック上に見出し、パラグラフ、ボタンを配置したブロックパターン

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

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

見出しと2カラムのパラグラフを含むブロックパターン

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

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

ヒント: プラグイン由来のブロックも含めて、どんなブロックでもパターンに使うことができます。また、そのブロックがブロックディレクトリにあって、まだお使いの 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 ですから !

WordPress 5.7 “エスペランサ”

投稿日: 投稿者: Takayuki Miyoshiカテゴリー Releases

以下は、Matt Mullenweg が書いた WordPress.org 公式ブログの記事「WordPress 5.7 “Esperanza”」を訳したものです。

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

WordPress 5.7 エスペランサ

管理画面に導入された新しいカラーパレット。よりシンプルな操作を可能にするエディター。適切な場所に配置されたコントロール。WordPress 5.7 はあなたがコンテンツに集中できる環境を作ります。

2021年最初の WordPress リリース、「エスペランサ」を紹介します。「エスペランサ」は現代の天才的ミュージシャン、エスペランサ・スポルディングにちなんで名付けられました。彼女の音楽家としての事績は多岐に渡り、気持ちを奮い立たせます。エスペランサ・スポルディングについてもっと知ってください。そして彼女の音楽を聴いてみてください !

この新しいバージョンではエディターの色設定を整理し、これまでコードを書いたり、プロを雇ったりすることなく変更することはできなかった箇所での操作が可能になりました。よく使うコントロールをさらに多数の必要な場所へ配置し、レイアウト変更もさらにシンプルになりました。

エディターがもっと使いやすくなりました

より多くの場所でのフォントサイズ調整: リストブロックとコードブロックでフォントサイズの制御が必要な時には、ブロック内でできるようになりました。この変更を行うためだけに別の画面に移動する必要はもうありません。

再利用可能ブロック: いくつかの機能強化により、再利用可能ブロックがより安定し、使いやすくなりました。また、「更新」ボタンをクリックすると、投稿時に自動保存されるようになりました。

インサーターのドラッグ & ドロップ: インサーターから直接、ブロックとブロックパターンを投稿にドラッグできます。

カスタムコーディング無しでできることがさらに多く

最大高の配置: カバーブロックのようなブロックを、ウィンドウ全体に表示できるようになりました。

ボタンブロック: 縦または横のレイアウトを選択できます。また、ボタンの幅を事前に設定したパーセンテージに設定できます。

ソーシャルアイコンブロック: アイコンのサイズを変更できるようになりました。

よりシンプルなデフォルトカラーパレット

この新しく効率化されたカラーパレットでは、WordPress のソースコードに含まれていたすべての色を、白と黒に対してWCAG 2.0AA 推奨コントラスト比を満たす7つのコアカラーと56の色調範囲にまとめました。

デフォルトの WordPress ダッシュボード配色の新しい配色を、テーマやプラグイン、またはその他のコンポーネントを作成するときに使用しましょう。詳細についてはカラーパレットの開発メモをご覧ください。

ワンクリックで HTTP から HTTPS へ

これからは、ワンクリックでサイトを HTTP から HTTPS へ切り替えられます。切り替えを行うと、WordPress はデータベースの URL を自動更新します。探したり推測したりする必要はもうありません。

新しい Robots API

新しい Robots API では robots メタタグにフィルターディレクティブを含めることができ、API には max-image-preview: large ディレクティブがデフォルトで含まれています。つまり、検索エンジンはより大きな画像プレビューを表示できます。これがトラフィックを後押ししてくれることもあるでしょう (サイトが not-public、つまり非公開とマークされている場合を除く)。

iframe の遅延読み込み

簡単に iframe を遅延読み込みできます。幅と高さの両方を指定すると、デフォルトで WordPress は iframe タグに loading="lazy" 属性を追加します。

jQuery 3.5.1 へのアップデート後の継続的なクリーンアップ

長年 jQuery は、ベーシックなツールではできなかった画面上の物に動きをつけるのを支援してきましたが、それは変化し続けており、jQuery もまた変化しています。

5.7では jQuery はさらに焦点を絞って干渉することが減り、コンソール内のメッセージも少なくなりました。

詳細はフィールドガイドを参照してください。

WordPress フィールドガイドの最新バージョンを参照してください。各変更の開発者向けノートをまとめた必読のガイドです。WordPress 5.7 フィールドガイド。

リリースチーム

WordPress 5.7 は経験豊富な少数精鋭のリリースチームの主導によりリリースされました:

  • Release Lead: Matt Mullenweg
  • Triage Lead: Tonya Mork
  • Release Coordinator: Ebonie Butler
  • Core Tech Lead: Sergey Biryukov
  • Editor Tech Lead: Robert Anderson
  • Design Lead: Tim Hengeveld
  • Accessibility Lead: Sarah Ricker
  • Documentation Lead: Jb Audras
  • Test Lead: Monika Rao

このリリースは総勢481名のボランティア貢献者たちのハードワークの賜物です。GitHub では約250件のチケットと約950件のプルリクエストが作成され、活発な協働が行われました。(翻訳者より: 日本語版では貢献者全員の名前を載せることができませんので、オリジナルの英語版リリース告知をぜひ参照してください。)

「再利用ブロック」を活用してみよう

投稿日: 投稿者: Naoko Takanoカテゴリー Development

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

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

このチュートリアルは Joen Asmussen @joen が作成しました。

WordPress のブロックエディター (別名 Gutenberg) には「再利用ブロック」という機能があります。後で使うために保存され、一箇所で編集できるブロックです。

こんなことをしたいと思ったことはありませんか ?

  • 投稿やページをまたいで同じスニペット (断片) を再利用すること。
  • 複雑なレイアウトを保存して、1つの投稿から別の投稿にコピー & ペーストする手間を省くこと。

再利用ブロックは、これらのことを可能にします。

つまり、テンプレートみたいなもの ?

完全にそうというわけでもありません。再利用ブロックは、グローバルに同期された、あなただけのコンテンツのスニペットと考えてください。すべての再利用ブロックを一箇所で編集することができ、そのブロックを挿入した投稿やページも、更新されたバージョンを取得します。

テンプレートを使用してサイトを構成する代わりに、再利用ブロックを活用できます。例えば、

  • ホームページや商品ページに掲載されている利用者の声。
  • 記事の途中に挿入する「この記事はシリーズの一部です」というボックス。
  • 人気記事の文章内に織り込む「ソーシャルメディアでフォローください」セクション。
  • 「ニュースレター購読」ボックス、お問い合わせフォーム、アンケート、クイズ、投票など、複雑ながら静的なブロック。

再利用ブロックの重要な特徴として、コンテンツのスニペットを再利用したい時や、一箇所で編集して変更をすべてのインスタンスに伝播させたい時に、他にはないほど便利です。

作り方

再利用ブロックを作成するには、ブロックエディターを開き、再利用したいコンテンツを作成します。

ここで、再利用ブロックにしたいコンテンツを選択し、3つのドットの「詳細」メニューをクリックして「再利用可能なブロックに追加」を選択します。

これで再利用ブロックができました。今後は、このブロックや作成した他のブロックは、ブロックライブラリの「再利用ブロック」タブで見つけることができます。

ここでは、投稿または固定ページに新しく作成したブロックを挿入することもできます。

既存の再利用ブロックの編集

再利用ブロックを編集するには、選択して編集を加えます。編集を行うと、「公開」ボタンに小さなドットが表示されます。

このドットは、テンプレートを編集しているときと同じように、編集中の投稿以外の投稿にも影響を与える可能性のあるグローバルな変更を行ったことを示しています。これにより、変更が意図的に行われたのかどうか確認することができます。

再利用ブロックを編集する別の方法としては、3ドットのグローバル追加メニューをクリックして「すべての再利用ブロックを管理」を選択することもできます。

そうすると、作成したすべての再利用ブロックの編集、名前の変更、エクスポート、削除ができるセクションに移動します。

他にできること

ここでは、再利用ブロックを最大限に活用するためのヒントとコツをご紹介します。

良い名前をつける

再利用ブロックに名前を付けるとき、つまりこれはブロックライブラリで検索する名前になるため、検索語を選択していることになります (または、空の段落に / と入力して「スラッシュコマンド」を使用するとき)。

「ギャラリー」や「画像」のような名前は避けてください。それらのブロックを挿入する時にじゃまになるからです。「自分のプロフィール」のようなユニークな名前にすれば、問題を避けることができます。

コンテンツフローの最適な位置に挿入する

再利用ブロックの明らかな利点の1つは、ブロックエディターの他のすべてのものと同じように、これがただのブロックであるということです。つまり、コンテンツのどこにでも挿入できるということです。情報豊富なプロフィール文は投稿の上部または下部に配置したいかもしれませんが、「この投稿はシリーズの一部です」というボックスは、読む流れを乱さないように、2つか3つ目の段落に置いたほうが座りが良いかもしれません。

デザインのショートカット

気に入った複雑なレイアウトが作れたり、適切な画像やボタンを使った CTA (コールトゥアクション/注意喚起要素) を作れたけれど、良い状態になるまでに時間がかかってしまったということもあるでしょう。ぜひ、再利用ブロックとして保存してください。通常のブロックに変換するためだけに挿入するつもりであっても、時間の短縮になるかもしれません。

再利用ブロックを通常のブロックに変換するには、選択して「通常のブロックへ変換」をクリックします。

Beatriz Fialho によるデザイン。

ヒント: Gutenberg Hub や ShareABlock でも素敵なパターンを見つけることができます。

他のサイトに移動する

別のサイトに再利用ブロックを移動する必要がある場合、エクスポートすることも、インポートすることもできます。3ドットのグローバル追加メニューから「すべての再利用ブロックを管理」セクションに移動します。エクスポートしたいブロックにカーソルを合わせ、「JSON 形式でエクスポート」をクリックします。

ダウンロードしたファイルは、WordPress 5.0以降のどのサイトでもインポート可能です。

試してみましょう

投稿の下書きを作成し、再利用ブロックを使い、どうやって使い始めるかを見てみましょう。遊び終わったらいつでも削除してかまいません。

私が作成した小さな再利用ブロックをインポートし、例としてテストしてみることもできます。「注目」カテゴリーの最新投稿4件が表示される「続きを読む」ブロックです。

記事の中のハイライトとして、読者に何か新しい読み物を提供したり、あなたの他のコンテンツを意識してもらったりするために役立ってくれるかもしれません。

この記事の動画では、近日公開予定の WordPress 5.7での再利用ブロックの流れを紹介しています。

この gist からブロックをダウンロードして WordPress サイトにインポートし、独自にカスタマイズしてみてください。

WordPress 5.7 RC 2

投稿日: 投稿者: Takayuki Miyoshiカテゴリー Development, Releases

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

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

WordPress 5.7 のリリース候補第2版 (RC 2) が利用可能になりました ! 🎉

WordPress 5.7 RC をテストする方法は二通りあります:

ベータおよび RC リリースをテストしてフィードバックをくださったコントリビューターのみなさん、ありがとうございます。バグのテストはリリースを万全に行う上で不可欠な要素です。

プラグイン・テーマ開発者のみなさんへ

自作のプラグインやテーマを WordPress 5.7 でテストして、問題なければ readme.txt の Tested up to バージョンを 5.7 に更新してください。互換性の問題を発見した場合はサポートフォーラムへ投稿してください (日本語での投稿は開発版フォーラムまで)。そうすれば最終リリースの前までに解決できるかもしれません。

WordPress 5.7 Field Guide に主要な変更に関するより詳しい情報があるので参照してください。

ご協力ください

英語以外の言語話者の方はぜひ WordPress の翻訳にご協力ください。

バグを見つけたと思ったときはサポートフォーラムの Alpha/Beta エリアに投稿してお知らせください (日本語での投稿は開発版フォーラムまで) 。再現条件を含むバグ報告の作成に慣れている方は WordPress Trac までご報告ください。既知のバグのリストも Trac で確認できます。

WordPress 5.7 RC

投稿日: 投稿者: Takayuki Miyoshiカテゴリー Development, Releases

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

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

WordPress 5.7 の最初のリリース候補版 (RC) が利用可能になりました ! 🎉

最終リリースへと続くコミュニティの重要なマイルストーンを一緒にお祝いしましょう !

「リリース候補」というのはつまり、新バージョンのリリース準備はあらかた済んでいるものの、とは言っても何百万人ものユーザーがいて何千種ものプラグインやテーマがある環境にこれから放り込もうというのですから、何かしら見落としがあってはいけません。WordPress 5.7 は3月9日にリリースを予定していますが、それにはあなたの手助けが必要です。まだ 5.7 を試していないなら今がその時です !

WordPress 5.7 RC をテストする方法は二通りあります:

ベータリリースをテストしてフィードバックをくださったコントリビューターのみなさん、ありがとうございます。バグのテストはリリースを万全に行う上で不可欠な要素です。

WordPress 5.7 で何が変わるの ?

  • ロボット API とメディア検索エンジン可視性
  • HTTPS サポートの検出
  • 遅延ロード iframe
  • jQuery migrate 関連非推奨通知のクリーンアップ
  • 管理画面カラーパレットの標準化
  • 最新版の Gutenberg プラグイン

プラグイン・テーマ開発者のみなさんへ

自作のプラグインやテーマを WordPress 5.7 でテストして、問題なければ readme.txt の Tested up to バージョンを 5.7 に更新してください。互換性の問題を発見した場合はサポートフォーラムへ投稿してください (日本語での投稿は開発版フォーラムまで)。そうすれば最終リリースの前までに解決できるかもしれません。

WordPress 5.7 Field Guide に主要な変更に関するより詳しい情報があるので参照してください。

ご協力ください

英語以外の言語話者の方はぜひ WordPress の翻訳にご協力ください。WordPress 5.7 の翻訳対象語句はこの RC において確定され、今後の変更はない見込みです。

バグを見つけたと思ったときはサポートフォーラムの Alpha/Beta エリアに投稿してお知らせください (日本語での投稿は開発版フォーラムまで) 。再現条件を含むバグ報告の作成に慣れている方は WordPress Trac までご報告ください。既知のバグのリストも Trac で確認できます。

WordPress 5.6.2 メンテナンスリリース

投稿日: 投稿者: JOTAKI, Taisukeカテゴリー Releases

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

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

WordPress 5.6.2が利用可能になりました。

今回のメンテナンスリリースでは、5個のバグ修正が行われています。これらのバグは WordPress バージョン 5.6.1 に影響を与えますので、アップグレードをお勧めします。

WordPress 5.6.2は直接ダウンロード可能です。または、管理画面メニュー「ダッシュボード」→「更新」から「今すぐ更新」をクリックします。自動バックグラウンド更新をサポートしているサイトではすでに更新プロセスが始まっていることでしょう。

WordPress 5.6.2は、ユーザー側の問題を修正することに焦点を当てた小規模なメンテナンスリリースです。次のメジャーリリースはバージョン5.7で、いまのところ、2021年3月9日のリリースを予定しています。

変更のすべてのリストは閲覧するには Trac のリストを参照するか、5.6.2 RC1 についての投稿をお読になるか、5.6.2ドキュメントページを開いてみてください。

感謝と敬意を!

5.6.1 は@desrosj によってリードされました。ブロックエディター関連の修正の準備を手伝ってくれた@isabel_brison と @talldanwp、その他のリリース関連のタスクを手伝ってくれた@audrasjb と @sergeybiryukov に感謝します。

WordPress 5.6.2のリリースに関わってくれたみなさまに感謝します:

aaronrobertshaw, Addie, André Maneiro, archon810, Ari Stathopoulos, bartosz777, Bernhard Reiter, Daniel Richards, David Anderson, dbtedg, glendaviesnz, hmabpera, ibiza69, Isabel Brison, Jason Ryan, Jb Audras, Juliette Reinders Folmer, Kai Hao, Kerry Liu, Konrad Chmielewski, Jorge Costa, magnuswebdesign, Marius L. J., Matt Wiebe, Mukesh Panchal, Paal Joachim Romdahl, Prem Tiwari, Q, Riad Benguella, Robert Anderson, roger995, Sergey Biryukov, Sergey Yakimov, Steven Stern (sterndata), Takashi Kitajima, tonysandwich, worldedu, Yui.