はじめに
Gutenbergブロックエディターで、本文下にあった「SEO」などのメタボックスを右側のサイドバーへ移動させたあと、元の場所に戻せなくて困ったことはありませんか？
ドラッグ＆ドロップもできず、移動矢印もグレーアウトして動かせなくなるこの現象は、CocoonフォーラムでもUIの不具合として報告されている有名なトラブルです。
この記事では、この方法について説明します。
問題点
本文下にあった最後のメタボックスをサイドバーに移動させると、その後、元の本文下（メインエリア）にドラッグ＆ドロップで戻そうとしても、ドロップする領域が表示されなくなります。
また、メタボックスの設定メニューにある「下移動（▼）」の矢印ボタンも、サイドバーの一番下まで来るとグレーアウトしてしまい、エリアを跨いでの移動ができなくなってしまいます。
原因
Gutenbergエディターの仕様により、本文下にあるメタボックスの数が「ゼロ」になると、画面上から本文下のメタボックス用エリア（コンテナ）自体が完全に非表示になってしまいます。
移動先（受け皿）が画面から消えてしまうため、マウス操作や矢印ボタンによる移動の受け付け自体が拒否されてしまうのが原因です。
対策
画面上のドラッグや矢印ボタンが効かない場合は、以下の方法で解決できます。
Cocoonの場合、一時的にクラシックエディターに切り替えて移動する
Gutenbergエディターとは異なり、従来のクラシックエディターは本文下にメタボックスが「ゼロ」の状態であっても、サイドバーから本文下へ問題なくドラッグ＆ドロップで移動させることができます。
- Cocoon設定→エディター→エディター共通設定 「Gutenbergエディターを有効にする」をオフして保存します。
- 任意の投稿編集画面を開き、サイドバーにあるメタボックスを本文下へドラッグ＆ドロップで移動させます。
- 移動が完了したら、「Cocoon設定」に戻り、チェックをオンにして元のGutenbergエディターに戻します。
空のダミーボックスを配置して「受け皿」を復活させる
以下のコードをfunctions.phpに追加します。
本文下に新しく一時的なメタボックスをコードで追加し、消えてしまったドロップエリアを強制的に画面に復活させます。
復活したら本コードを削除します。
add_action('add_meta_boxes', function () {
add_meta_box(
'dummy_zone_box',
'ここにドロップしてください',
'__return_false',
'post',
'normal',
'high'
);
}Cocoonメタボックスの表示位置
表1に、Cocoon初期状態における各メタボックスの表示位置を示します。
| メタボックス | 表示位置 |
|---|---|
| カスタムフィールド | 本文下 |
| 更新日の変更 | サイドバー |
| メモ | サイドバー |
| ページ設定 | サイドバー |
| その他 | サイドバー |
| リダイレクト | サイドバー |
| レビュー | サイドバー |
| SEO | 本文下 |
| SNS画像 | サイドバー |
| 公告 | サイドバー |
| カスタムJavaScript | 本文下 |
| カスタムCSS | 本文下 |
さいごに
今回紹介した方法を使えば、Gutenbergエディターの仕様によってサイドバーに閉じ込められてしまったメタボックスを、迷うことなく確実に元の本文下へと戻すことができます。
一見するとバグで画面が壊れてしまったように見えますが、コード側から一瞬だけ優先度を上げて配置の記憶を上書きしてあげればすぐに解決できます。
もし同じ現象で操作ができなくなってしまった場合は、ぜひこの手順を試してみてください。
