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

3 min

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

空の段落ブロック

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

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

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

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

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

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

可視化前のブロック

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

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

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

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

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

可視化後

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

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

ブロック可視化の手順

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

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

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

editor-style.css を使う方法

子テーマ内の「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 を利用できるようにする必要があります。

editor-style.css を使えるようにする

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

functions.php
/*************************************************
// editor-style を適用
**************************************************/
add_action( 'enqueue_block_editor_assets', 'add_block_editor_style' );
function add_block_editor_style() {
	wp_enqueue_style( 'block-editor-style', get_theme_file_uri( 'editor-style.css' ) );
}

Stylus(スタイラス) を使う方法

Chrome の拡張機能 「Stylus」を使うことで任意のサイトに好きなスタイルシートを適用することができます。

  1. Stylus を Chrome にインストール
  2. Chrome URL 欄右の Stylus アイコンをクリック、「管理」を選択
  3. ダウンロードした「.json」スタイルファイルをブラウザにドラッグアンドドロップ
スタイラスに追加
適用範囲を指定

WordPress の管理画面だけにこのスタイルを適用するには、Stylus管理画面右下の「適用先」を追加します。(.jsonファイルを使った場合はすでに入力済みです)

正規表現に一致するURL」を選んで以下を入力して保存しましょう。

https?://.*?/wp-admin/.*
スタイルの適用先

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。