WordPress Gutenbergの再利用ブロックを効率的に使うテクニック

再利用ブロックの登場で記事を書く効率が大幅にアップしました。

ブロックエディター（Gutenberg）登場当時はビジュアルエディター（クラシックエディター）と比べ操作し辛い！わかりにくい！と声を上げる方も多かったですが、今や多くの方がブロックエディターへ移行しています。

そこで更に再利用ブロックを効率的に使うべく、ブロックのショートカット呼び出しを効率的に行いましょう！

Gutenbergのショートカット入力

まず初めに抑えておきたい事、Gutenbergは/ブロック名という形式を段落ブロックに入力するとブロックが呼び出せる点です。

ブロック名	呼び出せるブロック
/heading	見出しブロック
/list	リストブロック
/image	画像ブロック
/table	テーブルブロック
/quote	引用ブロック

その他にも使っているテーマ側で用意されている専用ブロックも呼び出すことができます。

以下は日本国内で人気が高いGutenberg対応テーマの専用ブロックまとめです。

再利用ブロックも同じように呼び出せる

実はこのショートカット入力、標準のブロックやテーマ専用のブロックを呼び出すように再利用ブロックを呼び出すこともできます。

やり方はとても簡単、/再利用ブロックのタイトルという形で呼び出します。

再利用ブロックのタイトルにブロック名を入力して管理すると呼び出しが楽

/再利用ブロックのタイトル形式で呼び出せる便利な再利用ブロックですが、いちいち名前を覚えているのがとても大変。

5個10個ぐらいならなんとか覚えておけそうですが、本当にたまにしか使わない再利用ブロックを延々と覚えているのは少しつらいですよね。

そこで再利用ブロックのタイトルに構成されるブロック名をカテゴリーとして登録しておくととても入力が楽になるので僕が採用している方法をご紹介します。

再利用ブロックを構成するブロック名を付与する

再利用ブロックとして登録してあるが、通常ブロックに変換して使用するというテンプレート代わりの利用をされている方は多いと思います。

例えば上記の動画は以下のブロックを組み合わせて作られており、通常ブロックに変換して記事作成を進める前提です。

• Cocoonの2カラムブロック
• 画像ブロック
• Cocoonのアコーディオン（トグル）ブロック
• アコーディオンの中にリストブロック
• Cocoonのボタンブロック
• Rinkerブロック

この再利用ブロックは「2カラムの画像・アコーディオン（リスト）・ボタン・Rinker付評価レイアウト」というタイトルをつけてありますが、その後ろに「2column image accordion list button rinker layout」という英単語を続けて付与してあります。

こうすることで、例えば/layoutや/2column、/rinkerとどれを打ってもこの再利用ブロックが候補として表示されるようになります。

同じようなブロックが増えてきたら半角スペースや半角ハイフン区切りで「/button 2column」や「/rinker-layout」のように絞り込み検索を行うこともできます。

「あのブロックの名前なんだったかな・・・」と覚えておく必要がないんです、作成段階で構成するブロック名を入れておくだけ。

必要な時に「あのボタンを使ったレイアウト・・・/buttonって入力すれば出てくるな」と覚えておけばOK。

だいぶハードル下がりましたよね笑。

ブロック名を覚えるほうが遥かに簡単

「いや、それでも覚えられないよ！」って思うかも知れませんが、独自に付けたタイトルを覚えてるよりも構成するブロック名を覚えるほうが遥かに簡単です。

ぶっちゃけよく使うブロックなんて限られています。

• 見出しブロック
• 画像ブロック
• リストブロック
• ボタンブロック
• Rinkerブロック
• 2カラムブロック

ご自身がよく使われるブロックにもよりますが、僕の場合大体この辺のブロックが構成ブロックとして入っています。

こっちを覚えるほうが遥かに簡単です、どれもブロック名自体は単調ですからね。

Gutenbergのレイアウトは再利用ブロックよりパターンを使った方が良い？

WordPress5.5で新たにパターン機能が登場しました。

パターンは事前にレイアウトの枠組みを登録しておき好きな時に呼び出すことで簡単にレイアウトを再利用できることができます。

しかし僕は現状パターンの使い辛さから、基本的に再利用ブロックを通常ブロックに変換する方式を採用しています。

パターンを使ったレイアウト呼び出し

パターンは再利用ブロックのように通常ブロックに変換する必要がなく、パターンを編集しても既に記事内で使用しているレイアウトは影響を受けません。

そのため外側（レイアウト）だけ使いまわしたい、という場合はパターン機能が最適です。

しかしパターンの最大のデメリットは/パターン名という形式で呼び出すことができないこと。

パターンを呼び出すために4つの手順が必要です。

再利用ブロックを使ったレイアウト呼び出し

一方再利用ブロックを使ったレイアウト呼び出しは先述したように/再利用ブロック名の形式で呼び出すことができます。

どう考えてもこっちの方が早いですよね。

再利用ブロック→通常ブロック化したものも、再利用ブロックを編集しても既に記事で利用している元再利用ブロックだったものは影響を受けません。

再利用ブロック名にプレフィックスを付与してレイアウト用だと明示する

より管理しやすくするために再利用ブロック名にプレフィックスを付与する方法もおすすめです。

プレフィックスは接尾辞のことで、再利用ブロックのタイトルに特定の文字列をつけておくことでそれがレイアウト専用、つまり通常ブロックへの変換が前提だと示すことができます。

例えばこの場合、【レイアウト】がプレフィックスです。

こうする事で再利用ブロック選択時に「それがレイアウト用の再利用ブロックである」という事を思い出せます。

プレフィックスは記事におけるカテゴリー、もしくはタグのように扱うと便利です。

広告用の再利用ブロックには【広告】やASP名なんかをプレフィックスにしても良いですね。

記事内で再利用ブロックを編集すると通知される

更に呼び出した側の記事から再利用ブロックの中身を変更する場合、現在記事公開時に「この記事を公開すると○○という再利用ブロックも同時に更新されるよ」という通知がサイドバーに表示されます。

レイアウトの再利用ブロックは100％通常ブロックへの変換が前提なので、そもそもこの通知が表示された時点でおかしいですよね。

ここで「あっ！通常ブロックへ変換する必要があったんだ！」と二重のチェックが行なえて便利です。

Gutenbergに再利用ブロックの背景色を設定する

Gutenbergエディターで再利用ブロックを利用している時に限って背景色を設定するカスタマイズです。

通常ブロックに変換された瞬間に背景色が無くなるので、背景色がある状態で編集しようとする前に気づくことができて非常に便利です。

.is-reusable {
	background-color: hsla(286, 49%, 90%, .5);
}

is-reusableは再利用ブロックのラッパー（再利用ブロック全体を包んでいるdivタグ）に利用されているclassです。

このラッパーは通常ブロックに変換された時点で削除されるので、背景色も同時に消えるためニアミスをかなり減らすことができると思います。

is-reusableはエディター内のみで使われているclassなので、当然記事や固定ページでは背景色は変わりません。

そのため上記のCSSはeditor-style.cssに追記してもOKです。

再利用ブロックへワンクリックでアクセスできるようにする

通常再利用ブロックはGutenbergエディターのメニューからしかアクセスができません。

しかし「WordPressのメニューに再利用ブロックリンクを追加する」で解説しているカスタマイズを取り入れることで、再利用ブロックへのアクセスが大幅に向上します。

ぜひご利用ください！

WordPress Gutenbergの再利用ブロックを効率的に使うテクニック まとめ

再利用ブロックはGutenbergの目玉とも言える機能、再利用ブロックをいかに効率的に使うかによって記事を素早く執筆できるかが変わってきます。

しかし中々とっつきにくく、積極的に利用していない！という方も多いのが現状。

ほんの少し工夫するだけで大幅に利便性を向上できるので、ぜひこの機にGutenbergと再利用ブロックに触れて便利に使いこなしてください！