WordPress5.6.2→5.7で変わった再利用ブロックの変更点は？使い方は？|Knowledge Base

公開日：2021(令和3)年3月10日／最終更新日： 2021(令和3)年3月10日

個人的には大変使いにくくなってしまった（あえてなってしまったと書きます）再利用ブロックの動作。皆さんどう思われますか？？

とはいえWordPressは、というか、ブロックエディタ部分はどんどん変わっていくことが予想されるので、使いにくいから元に戻す・・・という発想ではなく、どうやってきちんと使っていくか？というのがポイントのような気がします。

今回標準の操作の中で大きく変わってしまった再利用ブロックについて、

何がどう変わったのか？
元のような感じで使うにはどうするか？

について触れておこうと思います。

私がテストした限りでの記事となりますので、ひょっとすると誤っている部分があるかも知れませんから、この記事を参考にご自身の環境でどのようになるのかを再検証されることをおすすめします。

そもそも再利用ブロックって何？という方は以下を参考にしてください

再利用ブロックの作り方や使い方、再編集の方法、特定の再利用ブロックが使われている投稿や固定ページを調べる方法など

投稿編集画面から編集できるようになった

5.6.2までの再利用ブロックは、投稿編集画面上で共通コンテンツ（他の投稿などにも反映される再利用ブロック）として挿入されたものについては、再利用ブロックのタイトルのみの変更が可能でした。

これが5.7になり、公開済みの投稿や固定ページの場合のみ投稿編集画面上での編集が可能になりました。この公開済みの・・というのが操作上ややこしくて、下書き状態だと、編集できたように見えても何も保存されないので、この点に留意が必要です（実際に下書きの投稿へ再利用ブロックを追加して、それを編集して保存しても何も起こりません、いわゆる「なんちゃって」的な動きになります）。

再利用ブロック全体の選択がしにくくなった

5.6.2以前の再利用ブロックでは、再利用ブロック内をクリックすると「ここは再利用ブロックでっせ！」と言わんばかりに上に大きく「通常ブロックへ変換」などが入ったヘッダーが表示されていました（下図のようなイメージ）。

WordPress5.6.2→5.7で変わった再利用ブロックの変更点は？使い方は？|Knowledge Base

これが見た目には、再利用ブロックを挿入した直後には表示されるものの、一旦離れてしまうと、この部分を表示させるのが少々困難になりました。

恐らく編集との兼ね合いで選択しにくくなってしまったと思われますので、編集画面の上にある「三（三本横線）」をクリックして、目的の再利用ブロックを選択するのが一番簡単な方法かと思います（下図参照）。

また、再利用ブロック挿入時には表示される従来の「通常ブロックへの変換」がコピーボタンのようなデザインのボタンになったのもちょっと変わった点です（これをクリックすれば通常のブロックとして利用できます）。

投稿や固定ページの保存時に１段階チェックが入るようになった

先に書いたように、公開済みの投稿や固定ページの編集画面上で、再利用ブロックの編集をすることが可能になったので、再利用ブロックを編集して投稿の保存をしようとすると、１つ手順が追加されるようになりました。

具体的には、以前は編集後、画面右上の「更新」ボタンをクリックすれば完了！！だったものが、再利用ブロックの編集の確認（チェックのON/OFF）をして、画面右上にある「保存」をクリックするという流れになりました（下図のようなチェック画面が追加されました）。

この動作は公開後の投稿や固定ページ上で編集した場合だけでなく、下書きの状態で再利用ブロックを編集後、その投稿や固定ページを公開する時にも同じ動作となりますので注意が必要です

但し、下書き保存状態の投稿や固定ページの再利用ブロックを編集し、下書きのまま保存（下書き保存）する場合には、再利用ブロックの変更は適用されない点に注意が必要です

ちょっとややこしいですね。単純に言えば、再利用ブロックを編集画面上で編集して保存したのに、再利用ブロックの保存画面が表示されないときは、再利用ブロックは変更されないと覚えておけばいいと思います。

投稿や固定ページの編集画面上で再利用ブロックを編集することがないサイトでは

前述したように5.6.2以前では、投稿（固定ページ）編集画面上で再利用ブロックに関しては、通常ブロックへ変換（再利用ブロックでない状態）しない限りは、編集することができませんでした。

その環境に慣れている場合には、今回の変更は戸惑いが生じるかも知れません（私もその一人です）。

今後どのようになっていくのかは分かりませんが、今回の仕様変更が元に戻されるということは考えにくいので、慣れるまでは編集できないようにしておくのが良いかも知れません。

具体的な措置としては

再利用ブロックであることが明確に分かるようにする
再利用ブロックを編集できないようにする

というのが妥当なところでしょう。

私の管理するサイトでは他の人が誤って再利用ブロックを編集してしまったり、「変な画面が（再利用ブロックの保存画面）出たけどどうしたらいいの？」と言われないよう、きちんと説明し、浸透するまでは以下のコードをテーマのCSSへ追加して対応しています。

/***** 編集画面の再利用ブロックへ外枠を付ける *****/
.components-disabled .block-editor-writing-flow {
    border: 10px solid #222;
}

/***** 編集画面の再利用ブロックへ外枠を付け、クリックを禁止する *****/
.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;
}

上記コードでは、投稿編集画面上で一目で分かるように灰色の外枠を付け、クリックを禁止し、「再利用ブロックにつき、ここでは編集できません」という文字を灰色で表示させるというものになります。これで誤って編集されることをひとまず防ぐことができ、編集できない理由も明確に表示できます（編集画面上だけの表示であって、閲覧画面では何も表示されませんからご安心ください）。

テーマの仕様により、投稿編集画面にスタイルが適用されない場合や、適用される場合どこに記述するかに違いがありますから、適用方法について、詳しくはテーマのマニュアルなどを確認してください。

おまけ　管理画面のメニューへ再利用ブロック一覧を表示する項目を追加する方法

詳しくは冒頭で紹介した

再利用ブロックの作り方や使い方、再編集の方法、特定の再利用ブロックが使われている投稿や固定ページを調べる方法など

で書いていますので、ここではさらっと書いておきます。テーマのfunctions.phpへ以下を追加するだけです。

function ha_add_reuse_list_admin_menu() {
  add_menu_page( '再利用ブロック', '再利用ブロック', 'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-screenoptions', 5 );
}
add_action( 'admin_menu', 'ha_add_reuse_list_admin_menu' );

今回の変更とは直接関係ありませんが、内容を編集するのにわざわざ毎回再利用ブロックの挿入画面を開いて「すべての再利用ブロックを管理」リンクをクリックするよりは、操作が楽になるでしょう。

以上がWordPress5.7で変更となった再利用ブロックの動作検証になります。

お役に立てば幸いです。