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

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

---

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

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

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

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

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

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

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

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

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

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

作り方

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

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

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

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

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

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

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

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

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

他にできること

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

良い名前をつける

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

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

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

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

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

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

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

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

他のサイトに移動する

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

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

試してみましょう

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

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

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

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

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