見分けにくい再利用ブロックを判別しやすく改善する【WordPress】

WordPressのエディターに搭載される再利用ブロックを使って配置したブロックは、それが再利用ブロックであることが分かりにくいのが難点です。そこでエディター上の再利用ブロックの外観を調整する方法でこの問題を解決します。

使用したバージョン WordPress 5.9.3

再利用ブロックの基本的な仕様
再利用ブロックが判別しにくい問題

再利用ブロックの基本的な仕様

再利用ブロックの作成

エディターで作成した1つ以上のブロックを選択し、ツールバーの「再利用ブロックに追加」を選ぶと再利用ブロックとして登録されます。

登録済の再利用ブロックは同一の投稿内に限らず別の場所に配置することができます。

再利用ブロックの編集

再利用ブロックに対して行われた変更は、他の場所に配置された同一の再利用ブロックにも反映されます。

再利用ブロックの編集は配置されている投稿もしくは再利用ブロックの一覧から可能です。
どちらの場合も他の記事に配置された同一の再利用ブロック全てに反映されます。

通常のブロックへ変換できる

再利用ブロックは「通常のブロックへ変換」することができます。
変換後の編集は他のブロックへは反映されません。再度「再利用ブロックに追加」した場合は別の再利用ブロックとして新規登録されます。

再利用ブロックのままでは “ひな型” のような使い方はできませんが、通常のブロックへ変換することでそういった使い方も可能です。

再利用ブロックが判別しにくい問題

エディター上の再利用ブロックは見分けにくい

参考画像の赤枠で囲まれた部分は1つの段落と1つのリストが含まれた再利用ブロックなのですが、ぱっと見ただけでは再利用ブロックであることが分かりません。

カーソルを合わせて表示されるツールバーを確認して初めて再利用ブロックであることが判別できます。

倉庫番

再利用ブロックであることが気づきにくいと、間違って編集してしまうミスも起こりやすくなってしまいます。

エディター用のCSSを編集して再利用ブロックを判別しやすく改善する

記事編集時のエディターにのみ反映されるCSSを使って再利用ブロックの見た目を変更します。
エディター専用のCSSファイルが無い場合は新規ファイルを用意し、add_editor_style()で読み込みます。

add_editor_style() でブロックエディター（Gutenberg）にサイトと同じCSSを適用する【WordPress】

サイトに適用されているCSSをブロックエディター（Gutenberg）にも反映したい場合の手順です。エディターの表示をサイトに合わせることで記事の完成形をイメー

エディター用CSS

.block-library-block__reusable-block-container {
	border: 5px solid #999;
  pointer-events: none;
  padding: 1em;
}

.block-library-block__reusable-block-container:before {
  position: relative;
  content: '※ 再利用ブロックの編集は制限しています';
  color: #999;
  font-size: 0.8em;
}