Cocoon のビジュアルエディターの画像、クラシックエディターに CSS 追加

Cocoon のビジュアルエディターの画像が、白背景だと境界わかりにくく、box-shadow を適用したい。
また、クラシックエディターが背景に溶け込んで、境界がどこにあるかわからなくなるため、これも border を付けたい、ということで設定してみた。

ビジュアルエディターの画像、クラシックエディターの境界線

下記の画像のように、画像は box-shadow がないと、境界線がわかりにくくなってしまう。
クラシックエディターはもっと深刻で、どこをクリックすればクラシックエディターなのかが、わからない。

Chrome 開発ツールから CSS クラス調査

カスタム CSS を適用するため、CSS クラスの調査を行った。
Chrome の開発ツールを Ctrl + Shift + I で起動して、開発ツール一番左上のボタンを押して、要素を選択

styles に表示されている一番上は、element そのもののため、上から2番目の CSS クラスに、border を追加してみる。

.editor-block-list__layout .editor-block-list__block[data-type="core/freeform"], .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/freeform"] {
    clear: both;
    border: 1px solid #DDD;
}

左の画面に border が表示され、これでビンゴだった。
微調整して、#DDD を枠線として付けることにした。

image の方についても同様に調査して、以下の CSS クラスを追加することとした。
（box-shadow は、本番環境で使う画像のカスタム CSS と同じ値にした。）

.wp-block-image .components-resizable-box__container img {
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%);
}

ビジュアルエディター用の CSS 追加

Cocoon のビジュアルエディター用の CSS は、「外観」→「テーマファイルエディター」→「ビジュアルエディターのスタイルシート」から追加する。

追加した CSS

.wp-block-image .components-resizable-box__container img {
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%);
}

.editor-block-list__layout .editor-block-list__block[data-type="core/freeform"], .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/freeform"] {
    border: 1px solid #DDD;
}

完成

画像とクラシックエディターに枠線が追加され、境界がみやすくなった。
特にクラシックエディターは、必須じゃないかというくらい、わかりやすくなった。