WordPress ブロックエディタの見えにくいブロックを可視化しよう

2020年8月24日2023年9月4日

WordPress のブロックエディタ(グーテンベルク)は使いやすいのですが、いつの間にか何も入力していない段落ブロックが入ってしまうことがあります。

この未入力の段落ブロックによって記事のデザインがズレたりすることもあるので、編集画面に残しておきたくないですよね。しかし、この空のブロックはどこにあるのかパッと見て分かりにくいのです。

ブロックエディタでは見えにくいブロックを分かりやすく表示すれば、不要な段落ブロックを削除しやすくなりますよね。

この記事ではWordPressの空の段落ブロックと、スペーサーを可視化する方法を紹介します。

空の段落ブロックがあるとデザインが崩れる

WordPress の編集画面で何も入力していない段落ブロックは、実際の記事では<p></p>という中身がなにもないタグとして出力されます。これによって意図せず表示がズレたりするので困ったブロックです。

ブロックの可視化前と可視化後

可視化前のブロック

この画像には2つの未入力の段落ブロックと、1つスペーサーがあります。

何も入力していない段落ブロックは「文章を入力、または / でブロックを選択」と表示されます。

余白を調整する スペーサー はブロックを選択しない状態だと、表示がされないのでひと目見ただけではどこにあるのが分かりません。

空の段落ブロックはカラムや複雑なデザインに組み込んでしまうと、どこにあるのか分からなくなってしまう厄介なブロックなのです。

空の段落ブロックと、スペーサーを可視化

可視化後

未入力の段落ブロックとスペーサーの背景を暗くしたので、ひと目でどこにあるのかが確認できるようになりました。

段落に文字を入力すると背景色はもとに戻ります。

ブロック可視化の手順

2つの方法を紹介します。

editor-style.css を編集する
Chrome拡張「Stylus」を使う

おすすめなのは Chrome ブラウザの拡張機能「Stylus」を使う方法で、WordPressのファイルを全くいじらないので安心です。

editor-style.css を使う方法

子テーマ内の「editor-style.css」(なければ新規作成)にコードを追記しましょう。

/*--------------------------------------
ブロックを可視化
--------------------------------------*/
.block-library-spacer__resize-container {
    background: #333;
    position: relative;
}
.block-library-spacer__resize-container:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content: "スペーサー";
    color: #ccc;
}
.block-library-spacer__resize-container.is-selected {
    background: #555;
}
p[aria-label^="空のブロック"] {
    background: #555;
    color: #fff;
}

設定しても反映されない場合には、まずeditor-style.css を利用できるようにする必要があります。

下記のコードを、子テーマ内の「functions.php」に追記します。重要なファイルなので、必ずバックアップをとってから作業してください。

/*************************************************
//　エディタスタイル適用
**************************************************/
add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css' );
} );