【ワードプレス5.4】コクーンのブロックエディターでカスタムHTMLのツールバーの表示がずれるので

ワードプレスでブログ ワードプレス
この記事は約2分で読めます。

先月はじめ(2020.04.01)、WordPress(ワードプレス)のバージョンが 5.4 になりました。
いろいろな面で使いやすくなるように、WordPress に機能が追加されたようです。

蚕とまゆ

その機能変更は、WordPress のテーマ「Cocoon(コクーン)」にも少なからず影響を与えました。
ヴィジュアルエディターの横幅がせまくなり、上と下に余分な空白が入ってしまったのです。

どうやら WordPressオリジナルのブロックエディタでも、似たような表示になっています。
ほとんどは我慢できるのですが、操作ミスの原因になりそうな箇所があったので、直してみました。

スポンサーリンク

カスタムHTMLのツールバーの表示がずれるので

表示がずれるギャラリー(3カラムの場合)

ボクはブロックエディターで、HTMLコードを入力できる「カスタムHTML」ブロックをよく使います。
ただ WordPress の対処がまだのようで、5.4.1 になっても依然として「詳細設定」ボタンがずれています。

じきに正式に対処されると思いますが、それまでは暫定的に対処することにしました。

ビジュアルエディターのスタイル定義を修正

ということで、「詳細設定」ボタンを本来の位置へ戻してみました。
それまで隠れていた「プレビュー」ボタンが、しっかりと見られるようになります。

「プレビュー」ボタンが本来の大きさに戻ったので、ボタンを押し間違えにくくなりました。

作業手順:

  1. サイドメニューから、外部 > テーマエディター を開く。
  2. ビジュアルエディターのスタイルシート(editor-style.css)をクリック。
  3. 次の記述を追加して、「ファイルを更新」ボタンをクリック。
.block-editor-block-toolbar__slot {
  flex-shrink: 0;
}

修正内容:

  • ブロックツールバーの下位の枠(フレックスコンテナ)に入った項目を縮まなくした。

あとがき

WordPress 5.4 以降、ブロックエディターの横幅がせまくなってしまい、たいへん困っています。
実際の公開画面でどのよに表示されるのか、いちいち確認しなければなりません。

これまでは、テーマ「Cocoon」の機能によって、エディター画面と公開画面が似ていたので、プレビューをしなくても、ある程度、公開画面を確認できたのですけどね。

流れ星

早く元の仕様に戻してくれるのを、願っています。

コメント

タイトルとURLをコピーしました