
WordPressのサイト制作で、ACF(Advanced Custom Fields)を使ってカスタムブロックを作る際、「実装は正しいはずなのに、なぜか投稿画面上で入力できない(サイドバーでしか打てない)」「編集モードに切り替える鉛筆アイコンが出ない」という現象に悩まされました。
結論から言うと、原因はコードではなく、インストールしていた「あるプラグイン」にありました。
同じ現象で数時間を溶かしている方のための備忘録です。
直面した問題:入力欄がサイドバーに吸い寄せられる
最新の block.json 形式でACFブロックを作成し、テンプレートも完璧。しかし、投稿画面でブロックを選択しても、以下の不具合が発生しました。
- 投稿エリア内に直接入力フォームが出ない
- ブロックツールバーに「編集(鉛筆マーク)」アイコンが表示されない
- 右側のサイドバーでしか内容を編集できない
本来なら mode: edit や preview で切り替えができるはずなのに、どうやってもサイドバーに強制されてしまう状態です。
解決のために検証したこと
まずは一般的な原因を疑い、以下の4つを試しました。
block.jsonの設定変更:"mode": "edit"を指定しても、挙動が変わらない。- ACFフィールドグループの設定:プレゼンテーションタブの「編集スタイル」を「標準(WPブロック)」や「シームレス」に変更。
- APIバージョンの更新:
"apiVersion": 3を追記。コンソールエラーは減るものの、解決せず。 - 競合プラグインの停止:Jetpackなどのメジャーなプラグインを疑うも、白。
【真犯人】プラグイン版「Gutenberg」の罠
何をやってもダメで、ふとプラグイン一覧を見直した時に見つけたのが、プラグイン版の「Gutenberg」でした。
「ブロックエディタを使うために必要だろう」と昔から入れていたのですが、これが大きな盲点でした。
なぜこれが原因なのか?
プラグイン版のGutenbergは、WordPress本体に正式採用される前の「実験的な最新機能」を試すための開発用プラグインです。
今回の場合、このプラグインが導入している「最新すぎるAPI」や「iframeの挙動」に対して、ACF側の処理が追いついておらず、ツールバーの描画やインライン編集の機能がバグっていたのです。
解決策:プラグインを「無効化」するだけ
プラグイン版「Gutenberg」を無効化(削除)した瞬間、すべてが解決しました。
- ブロック上の鉛筆マークが復活。
- 投稿画面内でシームレスに入力フォームが表示される。
- コンソールの怪しいJS警告も消失。
現在のWordPressには標準でブロックエディタが組み込まれているため、このプラグインを消しても投稿画面が使えなくなることはありません。むしろ、安定したサイト制作には不要なものだったのです。
まとめ:ACFブロックが怪しい動きをしたら
もし、あなたのACFブロックが「ぐるぐる回って設置できない」「サイドバーから動かない」状態になったら、コードを疑う前に以下のチェックリストを確認してみてください。
- プラグイン「Gutenberg」が入っていないか?(真っ先に確認!)
block.jsonのapiVersionは3になっているか?- ACF側のプレゼンテーション設定が「サイドバー」に固定されていないか?
- ブラウザのキャッシュ(Ctrl + F5)を試したか?
灯台下暗し。最新の技術を追いかけるのも大切ですが、まずは「足元のプラグイン」を見直すことが、平和な睡眠への近道でした。