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

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

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

以下は、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 ですから !

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

以下は、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 HubShareABlock でも素敵なパターンを見つけることができます。

他のサイトに移動する

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

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

試してみましょう

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

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

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

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

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

WordPress 5.7 RC 2

以下は、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

以下は、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.7 ベータ 3

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

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


WordPress 5.7 ベータ 3 をテストする準備が整いました ! 🗣

ベータバージョンはこのソフトウェアが未だ開発途上にあることを意味します。従って、このバージョンを本番運用中のサイトで利用することは推奨されません。テスト用の環境を設けてそこで試用することをお勧めします。

WordPress 5.7 ベータ 3 をテストする方法は二通りあります:

現時点で設定されている正式リリース日は3月9日です。正式リリースをできる限り問題の少ないものにできるよう、ぜひご協力をお願いします。

ベータ 3 の主な変更

ベータ 2 のリリース後、27件のバグ修正が行われました。いくつかの主要な変更を以下に整理します:

  • 管理画面の多数のボタンで色コントラストの調整を実施しアクセシビリティと可読性を改善 (#52402)
  • Twenty Twenty-One テーマの修正 (#52287, #52377, #52431, #52500, #52502, #52412)
  • エディターの使用書体をシステムフォントに置き換えることでプライバシーとパフォーマンスを改善 (#46169)
  • register_block_type_from_metadata 関数に国際化のサポートを追加 (#52301)
  • メディアアップロード時のエラーのアクセシビリティを改善 (#47120)
  • paginate_links 関数を利用して出力されるページネーションリンクに変更を加えるための新しいフィルター (#44018)

ご協力ください

これからの数週間にわたって 5.7 関連の開発者ノートが Make WordPress Core ブログに掲載されますので目を通してください。

これまでのところ WordPress 5.7 で171件のチケットが貢献者のみなさんの協力により解決されました。これには64件の新機能と機能強化が含まれ、さらに多数のバグ修正が進行中です。

テストをしましょう !

バグのテストはベータステージにあるリリースを磨き上げる上で特に重要な意味を持つ貢献です。✨

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

WordPress 5.7 ベータ 2

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

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


WordPress 5.7 ベータ 2 をテストする準備が整いました ! 🗣

ベータバージョンはこのソフトウェアが未だ開発途上にあることを意味します。従って、このバージョンを本番運用中のサイトで利用することは推奨されません。テスト用の環境を設けてそこで試用することをお勧めします。

WordPress 5.7 ベータ 2 をテストする方法は二通りあります:

現時点で設定されている正式リリース日は3月9日です。正式リリースをできる限り問題の少ないものにできるよう、ぜひご協力をお願いします。

ベータ 2 の主な変更

ベータ 1 のリリース後、38件のバグ修正が行われました。いくつかの主要な変更を以下に整理します:

  • アクセシビリティと可読性の向上のため、イタリック体のテキストを削除 (#47326)
  • メディアモーダルを閉じる際に再生中のメディアを停止する (#48562)
  • Content-Security-Policy スクリプトローダーを追加 (#39941)
  • Twenty Twenty-One テーマのいくつかの修正 (#50454#52432#52433#52473#52477, #52374)
  • Gutenberg エディターで custom-spacing をサポートする (#51760)
  • 中〜大サイズのスクリーンにおけるメニュー UI の問題を解決 (#49576)
  • 管理画面 UI カラーパレット: すべてのインタラクティブ要素に適切なコントラスト比を持たせる (#52402)

ご協力ください

これからの数週間にわたって 5.7 関連の開発者ノートが Make WordPress Core ブログに掲載されますので目を通してください。

これまでのところ WordPress 5.7 で157件のチケットが貢献者のみなさんの協力により解決されました。これには68件の新機能と機能強化が含まれ、さらに多数のバグ修正が進行中です。

テストをしましょう !

バグのテストはベータステージにあるリリースを磨き上げる上で特に重要な意味を持つ貢献です。✨

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

WordPress 5.7 ベータ 1

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

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


WordPress 5.7 ベータ 1 をテストする準備が整いました ! 🗣

ベータバージョンはこのソフトウェアが未だ開発途上にあることを意味します。従って、このバージョンを本番運用中のサイトで利用することは推奨されません。テスト用の環境を設けてそこで試用することをお勧めします。

WordPress 5.7 ベータ 1 をテストする方法は二通りあります:

現時点で設定されている正式リリース日は3月9日です。正式リリースをできる限り問題の少ないものにできるよう、ぜひご協力をお願いします。

で、5.7 で何が変わるの ? 🤔

コアの改良

iframe の遅延読み込み
フロントエンドの iframe タグに loading="lazy" 属性を追加することで iframe の遅延読み込みが実現できるようになります。

HTTP から HTTPS への移行をより効率よく
WordPress サイトを HTTP から HTTPS に切り替えるというのは誰にとっても苦労の大きい作業です。WordPress アドレスとサイトアドレスを更新するだけでは不十分で、HTTP の URL が埋め込まれた本文がそのままデータベースに残ってしまいます。5.7 では HTTPS へのサイト移行がワンクリックでできるようになります。WordPress アドレスとサイトアドレスの両方が HTTPS を使用している場合に、データベース中の URL が自動置換されます。さらに、サイトヘルスに HTTPS ステータスチェックが加わります。

管理画面 CSS: 統一感のあるカラーパレット標準
CSS 中のすべての色指定を再考し、青、緑、赤、黄、グレー、黒、白の各色で利用可能な色調の一つに指定しなおします。新しいカラーパレットは、現行のアクセシビリティガイドラインに従って明色系と暗色系それぞれに大きなコントラストを設定することにより、可読性の高いコンポーネント構築をより簡単なものにします。

jQuery 3.5.1 へのアップデート後の継続的なクリーンアップ
WordPress コアと同梱テーマにおける jQuery の非推奨化された使用の頻度が大幅に減り、通知はよりユーザーにとって理解しやすいものになります。

新しいロボット API
新しいロボット API により、‘robots’ メタタグに含まれるディレクティブをフィルタリングすることが可能になります。また、max-image-preview:large ディレクティブがデフォルトでインクルードされるようになり、検索エンジンで大きな画像のプレビューを表示することが可能になります(ブログの設定で検索エンジンでの表示を制限している場合を除く)。

ブロックエディターの改良

  • ブロックやブロックパターンを直接ドラッグして投稿本文に挿入することが可能になります。
  • 全高アラインメント: Cover ブロックその他のブロックでビューポート全体を覆う程度まで拡大させるオプションがサポートされます。
  • ブロックバリエーション: ブロックバリエーションのアイコンと説明がブロックインスペクターに表示されます。ブロックインスペクターにドロップダウンが新たに導入され、ブロックバリエーション間の切り替えが可能になります。
  • 再利用ブロック: 再利用ブロックのユーザビリティと安定性にいくつかの改良が加えられました。また、再利用ブロックの保存が投稿の保存と同時に行われるようになります。
  • ボタンブロック: ボタンブロックが垂直整列をサポートします。また、ボタンの幅を規定のパーセント値に設定できるようになります。
  • ソーシャルアイコンブロック: ソーシャルアイコンブロック内のアイコンの大きさが変更可能になります。
  • フォントサイズ指定の対象が拡大: リストブロックとコードブロックで新たにフォントサイズの指定が可能になります。
  • その他多数の改良とバグ修正があります。詳細は Gutenberg 各リリース投稿を参照してください: 9.39.49.59.69.79.89.9

ご協力ください

これからの数週間にわたって 5.7 関連の開発者ノートが Make WordPress Core ブログに掲載されますので目を通してください。

これまでのところ WordPress 5.7 で143件のチケットが貢献者のみなさんの協力により解決されました。これには68件の新機能と機能強化が含まれ、さらに多数のバグ修正が進行中です。

テストをしましょう !

バグのテストはベータステージにあるリリースを磨き上げる上で特に重要な意味を持つ貢献です。✨

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

WordPress 5.6 リリース候補2

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

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


WordPress 5.6の2番めのリリース候補版がご利用いただけるようになりました。

WordPress 5.6は2020年12月8日にリリース予定ですが、まだテストしていない方は今が行うべきタイミングです

WordPress 5.6リリース候補版2をテストする方法は2つあります。

ベータ版リリースをテストし、フィードバックをくださったすべての貢献者の方々にお礼を申し上げます。バグ発見のためのテストは、リリースごとにソフトウェアに磨きをかけるための重要な部分であり、WordPress に貢献するための素晴らしい方法です。

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

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

WordPress 5.6に含まれる変更点の詳細については、WordPress 5.6 beta 1の投稿(日本語訳)をご覧ください。WordPress 5.6フィールドガイドも公開されています! 主な変更点の詳細については、このフィールドガイドを参照してください。

協力するには

英語以外の言語を話す方は、WordPress を100言語以上に翻訳するのにご協力ください!

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