WordPressバージョン5.7で、再利用ブロックの動作が大きく変わりました。2021年3月10日時点で私が感じるエディタ上の不都合を解消する方法をこちらへ追記しています。また、変更点や操作方法が変わった点などを検証したものをこちらで公開していますので、併せてご覧ください。
WordPressの再利用ブロック、利用していますか？「なんだかよくわからないし・・」という方も多いのではないでしょうか？個人的には「再利用」なんてネーミングだからわからないだけで、「共通コンテンツブロック」ってしたらハードルが下がるのになぁなんて思っています。
そう、再利用ブロックは「共通のコンテンツ」の使いまわしができるブロックなんです。複数の投稿や固定ページで、同じ内容を表示させ、かつ、任意に挿入できるのが特徴です。
ん？「AddQuicktag」プラグインと一緒？と思った方、残念です。何か似た感じではあるのですが、このプラグインができるのは、
あらかじめ作成しておいたコンテンツ（定型文など）をボタンで挿入できるだけ
なんです。対して、再利用ブロックは
再利用ブロックの内容を変更すると、その再利用ブロックが入っているすべての投稿・固定ページの内容も一新される
のです。ある意味本当の意味での共通コンテンツということですね。これと同じ機能を持つプラグインには「Shortcoder」というのがあります。
もちろん、「この投稿だけは変更されないようにしたい！」場合には、一旦再利用ブロックとして挿入した後、再利用ブロックから解除することもできますから、結構便利だと思いますよ。
「AddQuicktag」のように使えるものがいい！ということであれば、挿入してから解体するのもいいですし、別の機能である「ブロックパターン」というのを使う方法もあります。文末の「おまけ 再利用ブロックから離脱する（通常ブロックに戻す）方法」をご覧ください。
ちょっと脱線しますが「ブロックパターン」については以下の別記事で詳しく紹介していますので、そちらも併せてご覧ください。
話を戻して・・再利用ブロックは複数のブロックで作ったものをグループ化して登録することもできるので、結構いろいろな共通コンテンツができますから、なんだか結構無敵な機能なんじゃないかと個人的には思っています。
・・・と主題について書くつもりがいつの間にか再利用ブロックとはという冒頭になってしまいました。
今回はそんな再利用ブロックを使いながら、一歩進んで？
- 作成した再利用ブロックはどうやって編集したらいいの？（単独ブロック）
- 作成した再利用ブロックはどうやって編集したらいいの？（グループ化したブロック）
- 不要になった再利用ブロックはどうやって削除するの？
- その再利用ブロックが使われている投稿や固定ページはどうやって探せばいいの？
について解説していきます。多分わからずにどんどん新たなものを作っては放置・・しているうちに何が何だかという方も多いと思いますので、参考になれば幸いです。
なんて偉そうに言ってますが、実は私も最近再利用ブロックを使い始めたばかりで、上の件についてどうなってんの？と思った一人ですので、一緒に勉強できたらいいなと思います。
再利用ブロックの作成方法、使用方法
まずは「再利用ブロックって何？」「再利用ブロックってどうやって使うの？」という方向けに基本的な使い方を紹介します。
再利用ブロックの作り方（登録の仕方）
「この文章（コンテンツ）、別の投稿でも使いたいなぁ」と思ったときが再利用ブロックの始め時です。基本的には使いまわしたいブロックを選択して、再利用ブロックに追加すれば完了です。
１．再利用（共通コンテンツ化）したいブロックを作成
再利用（共通コンテンツ）にしたいブロックを作ります。例えば↓のようなブロックなどを作ります
２．再利用ブロックとして登録
再利用ブロックに登録するコンテンツができたら、ブロックを選択し、「・・・（縦三つのボタン）」クリック後、「再利用ブロックに追加」をクリックします
適当な名前を付けて、「保存」ボタンをクリックします
※複数のブロックを一緒に再利用ブロックへ登録するときは
１つ目のブロックを選択した後、キーボードの「Shift」をクリックしながら複数のブロックをクリックし、「・・・（縦三つのボタン）」クリック後、「グループ化」をクリックします
後は単独のブロックの時と同じように再利用ブロックへ登録するだけです。
再利用ブロックの使い方（投稿への挿入の仕方）
投稿編集画面で、再利用ブロックを挿入したい場所で「＋」ボタン（ブロックの追加ボタン）をクリックします。
下図のようなブロックのリストが表示されるので、「すべて表示」をクリックします。
下図のような画面が投稿編集画面左側に表示されるので、「再利用可能」タブをクリックします。
再利用ブロックとして登録されているコンテンツの一覧が表示されるので、目的のものをクリックすると挿入されます。
作成した再利用ブロックの編集方法（単独ブロック編）
今回の例に挙げた、リストのブロックが１つだけのものを再利用ブロックとして登録している場合の編集方法を紹介します。
１．編集対象の再利用ブロックを、投稿編集画面のどこかへ挿入します
２．挿入した再利用ブロックのどこかをクリックします
３．再利用ブロックのブロック名の右に表示される「編集」ボタンをクリックします
４．ブロック内の編集をした後にブロック右上の「保存」ボタンをクリックします
これで、同じ再利用ブロックを挿入しているすべての投稿や固定ページへ編集内容が反映されます
この編集方法には１つだけ注意点があります。それは
「通常ブロックへ変換」は絶対しないこと
です。再利用ブロックはブロックのタイトルなどではなく、裏側で「id」という固有の番号で管理されています。一度通常ブロックへ変換したものは、その「id」から解放され、再利用ブロックとして再登録する際には「新しい再利用ブロック」として「id」が付与されます。これを知らずに編集しても、他の投稿や固定ページには全く反映されません（やったつもりになってしまう）ので気を付けましょう。
また、このミスを防ぐために、単独のブロックを使った再利用ブロックであっても、次項のグループ化したブロック編の方法を使って編集することをおすすめします。
作成した再利用ブロックの編集方法（グループ化したブロック編）
１．再利用ブロックを呼び出す
通常の再利用ブロックの挿入方法で、再利用ブロックの一覧までを表示します。投稿編集画面で「＋」ボタンをクリックし、「すべて表示」をクリックします。
「再利用可能」タブをクリックします。
２．再利用ブロックの一覧を呼び出す
再利用ブロックが並んでいる画面一番下の「すべての再利用ブロックを管理」をクリックします。
３．再利用ブロックを編集する
通常の投稿一覧と同じようなリストが表示されるので、編集する再利用ブロックをマウスオーバーし、「編集」をクリックします。
通常の投稿と同じように編集して、画面右上の「更新」をクリックすれば完了です。
複数のブロックを使用した再利用ブロックの登録時には「グループ化」しなければなりませんが、この編集画面ではグループ化が解除された状態で表示され、そのまま編集できます。また、ここ編集画面上で増減させたブロックは、そのまま反映されますので、グループ化の処置をする必要はありません。
【管理画面のメニューから簡単に再利用ブロックのリストを呼び出したいときは】
わざわざ投稿編集画面から再利用ブロックを呼び出さなくても、あらかじめ画面左の管理メニューに「再利用ブロック」という項目があれば、ワンクリックでいつでも再利用ブロックの一覧を表示させることができますよね？
管理画面のメニューへ「再利用ブロック」メニューを追加するには、以下のコードを、有効化しているテーマのfunctions.phpへ追加します。
function ha_add_reuse_list_admin_menu() {
add_menu_page( '再利用ブロック', '再利用ブロック', 'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-screenoptions', 20 );
}
add_action( 'admin_menu', 'ha_add_reuse_list_admin_menu' );コード中の「20」という数字を変更すると、メニュー内の表示位置を変えることができます
参考：WordPress：管理画面にGutenbergの再利用ブロック一覧へのリンクを追加する方法
- 今まで一度もテーマのfunctions.phpに触れたことのない方は、安易に操作しないようにしてください
- functions.phpはWordPressを動作させる上で重要なファイルですので、編集に失敗するとサイトが表示されない等の不具合が出る可能性があります
不要になった再利用ブロックの削除方法
前項の作業とほぼ同じで、再利用ブロックの一覧（投稿一覧と似た画面）まで表示させます。
通常の投稿と同じく、マウスオーバーすると表示される「ゴミ箱へ移動」リンクをクリックすれば削除できます。
ゴミ箱から完全に削除するまでは、削除した再利用ブロックを挿入した投稿（固定ページ）には、内容が表示され続けますが、ゴミ箱から削除（完全に削除）すると、以下の画像のように真っ白な画面になる不具合が発生しますので、削除の際は利用している投稿（固定ページ）がないかを必ず確認しましょう
一旦完全に削除した再利用ブロックを復元することはできません。誤って削除した場合には、もう一度新たに再利用ブロックを作成し、完全削除した再利用ブロックが挿入されていた投稿（固定ページ）すべてに改めて再利用ブロックを設定（挿入）する必要があります。
※再設定の作業はとても面倒ですから、次項の検索方法を使って本当に削除して大丈夫かを必ず確認しましょう。
投稿編集画面では上のように真っ白な画面であっても、実際に表示される画面には何も表示されない状態となりますので、表示には問題はありません。
※万が一投稿（固定ページ）の編集時に上のような部分がある場合は、誤って再利用ブロックが削除されている可能性がありますので、内容をよく確認しましょう。
特定の再利用ブロックが使われている投稿や固定ページの検索方法
投稿の数が少なかったり、再利用ブロックを使った投稿が少ない場合、またはすごい記憶力がある方の場合（笑）を除き、どの投稿（固定ページ）に同じ再利用ブロックが挿入されているかを探すのは骨が折れます。
しかしながら、それを検索するツールは用意されていませんから、以下のようにして検索します。
１．再利用ブロックのIDを調べる
作成した再利用ブロックの編集方法（グループ化したブロック編）を参考に、再利用ブロックの一覧を表示させます。
検索する再利用ブロックのタイトルあたりをマウスオーバーすると、画面下にURLが表示されますので
post=〇〇という部分の数字を覚えます。
Show IDs by 99 Robotsというプラグインを使うと、一覧にIDを表示させることができます
２．投稿や固定ページを検索する
通常の投稿（固定ページ）一覧を表示し、検索窓へ先ほどの〇〇の部分（数字）を入力して検索すれば、対象の再利用ブロックが挿入されている投稿（固定ページ）のみが表示されます。
投稿編集画面で再利用ブロックが挿入されていることが分かりにくいのを解消する方法
再利用ブロックで挿入された部分は、一見すると他のブロックと同じような表示になっていて、フォーカス（クリック）して初めて「ああ、これ再利用ブロックだったんだ」と気づくことも多いと思います（多くない？）
そこで、一目見て「これは再利用ブロック」と分かるように外枠を付ける方法を紹介しておきます。
この方法は、投稿編集画面へデザイン要素（CSS）が適用される環境を持つテーマでのみ有効です。その機能を備えているかどうかは、テーマのマニュアルなどでご確認ください。
上記のようにテーマ側でCSSが投稿編集画面へ反映されるようになっていれば、テーマの追加CSSなどへ以下のコードを追記するだけで簡単に外枠を付けることができます。
※WordPressのバージョンにより、措置が異なりますのでご注意ください
WordPress本体バージョンが5.6.2までの場合
/***** 編集画面の再利用ブロックへ外枠を付ける *****/
.components-disabled .block-editor-writing-flow {
border: 10px solid #222;
}上記例ではsolid(実線)で太さ10px、#222(やや灰色っぽい黒)の枠を作りなさいという指示になっていますので、適宜変更してください。
WordPress本体バージョン5.7以降の場合
バージョン5.7で仕様が大きく変わりました。5.7リリース直後の段階で、5.6.2以前と比べると
- 通常ブロックのように普通に編集できるような動作になる
- 編集して保存しても、反映されなかったり、保存されなかったりする
という感じになっており、個人的にはとても分かりにくく、使いにくくなった印象です。
5.6.2までと同様に「ここは再利用ブロックだよ！」とする以上に、編集できそうでできない部分は編集させないようにする必要がありますから、以下のようなコードを挿入すると管理しやすいのではないかと思います。
/***** 編集画面の再利用ブロックへ外枠を付け、クリックを禁止する *****/
.block-library-block__reusable-block-container {
border: 5px solid #777;
pointer-events: none;
}
.block-library-block__reusable-block-container:before {
content: '※※ 再利用ブロックにつき、ここでは編集できません ※※';
color: #777;
font-size: 0.8em;
}このコードを使うと、再利用ブロックが以下のような表示になります
外枠を付けるほか、クリックできないようにした上で、ブロックの先頭に「再利用ブロックにつき、ここでは編集できません」と表示するようにしています。
この方法は2021年3月10日のバージョン5.7リリース直後にテストしたものですので、修正がかかるなどして適用されないようになることがあるかも知れません。
たったこれだけで各段に見分けが付きやすくなりますから、ぜひやってみてくださいね。
2021年10月11日 追記
前項の再利用ブロックを編集画面上で目立つようにし、かつ、クリック（編集）を禁止する方法について、WordPress5.8.1上でテストした限りでは、テーブルブロックに対してクリック禁止ができてしまうということが確認できました。
いろいろ調べた結果、レイアウトを変更するための機能が邪魔をしている（無効化している）ようでしたので、前項のコードの代わりに以下を使うことで、テーブルブロックも編集不可となるようです。
/***** 編集画面の再利用ブロックへ外枠を付け、クリックを禁止する *****/
.block-library-block__reusable-block-container {
border: 5px solid #777;
pointer-events: none;
}
.block-library-block__reusable-block-container:before {
content: '※※ 再利用ブロックにつき、ここでは編集できません ※※';
color: #777;
font-size: 0.8em;
}
/* テーブルブロックも編集できないようにする */
.block-editor-block-list__layout {
user-select: none;
}pointer-eventsではなく、選択を禁止するuser-selectを使いました
このコードについては、現在私が管理するサイト上で実際に使ってみて、他の部分などに不具合がないかを確認していっていますが、ひょっとすると何かの影響があるかも知れませんので十分にテストを行うことをおすすめします。
おまけ 再利用ブロックをショートコードで呼び出す方法
投稿編集画面上では、普通に再利用ブロックを挿入した方がスマートだし、内容も表示されるので便利だとは思うのですが、逆に内容が表示されない方がいい、投稿などのテンプレート上で表示させたいというニーズもあるのではないかと考え、特定の再利用ブロックをショートコードで呼び出す方法をおまけ情報として紹介しておきます。
以下が挿入するショートコードです。
[ha-reuse-block id=〇〇]ショートコード内の〇〇の部分に再利用ブロックのIDを指定することで、特定の再利用ブロックをショートコードで表示させることができます。
この機能を追加する場合には、有効化しているテーマのfunctions.phpへ以下のコードを追加します。
/***** 再利用ブロックをショートコードで呼び出す *****/
function ha_reuse_block_shortcode($atts){
// get reusable gutenberg block
$reuse_block = get_post($atts[id]);
$reuse_block_content = apply_filters( 'the_content', $reuse_block->post_content);
return $reuse_block_content;
}
add_shortcode('ha-reuse-block','ha_reuse_block_shortcode');また、テーマのテンプレート内で使用するには
<?php echo do_shortcode( '[ha-reuse-block id=〇〇]' ); ?>を目的の場所へ挿入すればOKです。
※〇〇の部分は必ず再利用ブロックのIDに書き換えてください
参考：single.phpの再利用可能なブロック（WordPress公式フォーラム）
おまけ 再利用ブロックから離脱する（通常ブロックに戻す）方法
再利用ブロックとして登録しているものを独立させ、一括で編集されないようにする方法をおまけとして掲載しておきます。
１．再利用ブロックを通常通り挿入します（再利用ブロックの使い方参照）
２．通常ブロックへの変換
挿入した再利用ブロックのどこかをクリックすると、下図のようにブロック上に表示される「通常ブロックへ変換」ボタンをクリックします。
これで再利用ブロックとしての機能から離脱して、いつも使っている通常ブロックとして利用できるようになります。もちろん離脱していますので、ここで編集したものが他の記事へ波及することもありません。
いかがでしたか？今まで再利用ブロックについてあまりご存じなかった方、使ってみたいけど活用方法がわからなかった方、特別なプラグインなどを使わなくても、WordPressの基本機能でここまでできる、再利用ブロックを活用しましょう！！
| 更新日 | 更新内容 |
|---|---|
| 2021年 2月25日 | 「再利用ブロックの作り方や使い方、再編集の方法、特定の再利用ブロックが使われている投稿や固定ページを調べる方法など」を公開しました |
| 2021年 2月25日 | 再利用ブロックをショートコードで呼び出す方法を追加しました |
| 2021年 3月 9日 | 編集画面で再利用ブロックが使われている箇所に黒の外枠を付けて判別しやすくする方法を追加しました。 |
| 2021年 3月16日 | ブロックパターン解説記事へのリンクを設けました |
| 2021年10月11日 | 編集画面上で再利用ブロックの編集を禁止するコードで、テーブルブロックでは編集できてしまう現象に対する追加コード（試験コード）を追記しました |
