WordPressの新旧エディタをeditor-style.cssでなんとかする方法

WordPressの標準エディタがブロックエディタになって、しばらく経ちますが、クラシックエディタ (TinyMCE) を使っている方も、まだ多いように感じます。

また、ブロックエディタには、クラシックエディタの機能が使えるクラシックブロック (wp-block-freeform) もあるため、クラシックエディタと、もうしばらく付き合う必要があります。

そこで、今回はブロックエディタとクラシックエディタの両方のスタイルを整えることができる、editor-style.cssの作り方を紹介します。

ブロックエディタでeditor-style.cssを使用するための設定

まず、ブロックエディタでeditor-style.cssを使用するためには、次のようなPHPコードをテーマのfunctions.phpに追加する必要があります。

add_action( 'after_setup_theme', function() {
  add_theme_support( 'editor-styles' );
} );

ブロックエディタでのeditor-style.cssの適用方法

クラシックエディタは、文字を入力する部分が、iframe要素によって読み込まれる、別ファイルのような扱いのため、editor-style.cssに書かれたCSSコードが、そのまま適用されます。

しかし、ブロックエディタは、そのようになっていないため、editor-style.cssのコードを一部修正して適用します。

具体的には、「.editor-styles-wrapper」というクラス値をセレクタの先頭に追加します。セレクタの先頭が、html、body、:root擬似クラスの場合は、それらを置き換えます。

なので、次のようなCSSコードは、

body {
  …
}
body.example {
  …
}
.example {
  …
}

このように修正されます。

.editor-styles-wrapper {
  …
}
.editor-styles-wrapper.example {
  …
}
.editor-styles-wrapper .example {
  …
}

 この仕様を把握しておかないと、「editor-style.cssに書いた内容が反映されない」といった問題に繋がるので、注意が必要です。

ブロックエディタとクラシックエディタ兼用のeditor-style.css

editor-style.cssを、次の5つの部分に分けて記述していきます。

• ブロックエディタとクラシックエディタの両方に適用する部分
• ブロックエディタにのみ適用する部分
• クラシックブロックとクラシックエディタの両方に適用する部分
• クラシックブロックにのみ適用する部分
• クラシックエディタにのみ適用する部分

ブロックエディタとクラシックエディタの両方に適用する部分

この部分は普通に記述します。記述する内容としては、エディタに適用したい、文字色、背景色、フォントや、カスタムプロパティなどです。code要素やkbd要素などには、エディタ独自のスタイルが適用されているので、これらをリセットしてもいいかもしれません。

body {
  --example: …;
  background: …;
  color: …;
  font-family: …;
}
:where(code, kbd) {
  …
}

ブロックエディタの場合、「.editor-styles-wrapper」が追加され、詳細度が上がってしまうので、:where擬似クラスを必要に応じて使用しましょう。

ブロックエディタにのみ適用する部分

「.editor-styles-wrapper」が設定されている要素には、「.block-editor-writing-flow」というクラス値も設定されているので、これを利用してセレクタを作ります。

body:where(.block-editor-writing-flow) {
  …
}
body:where(.block-editor-writing-flow) .example {
  …
}

クラシックブロックとクラシックエディタの両方に適用する部分

冒頭でも述べた通り、ブロックエディタにはクラシックブロック (wp-block-freeform) があります。このクラシックブロックとクラシックエディタに共通する部分を記述していきます。

クラシックブロックとクラシックエディタの両方で、「.mce-content-body」というクラス値が設定されているので、これを利用してセレクタを作ります。

:where(.mce-content-body) {
  …
}
:where(.mce-content-body) .example {
  …
}

クラシックブロックにのみ適用する部分

クラシックブロックには、「.mce-content-body」とともに「.wp-block-freeform」というクラス値が設定されているので、これを利用してセレクタを作ります。

:where(.wp-block-freeform.mce-content-body) {
  …
}
:where(.wp-block-freeform.mce-content-body) .example {
  …
}

クラシックエディタにのみ適用する部分

クラシックエディタの「.mce-content-body」は、body要素に設定されているので、これを利用してセレクタを作ります。

:where(body.mce-content-body) {
  …
}
:where(body.mce-content-body) .example {
  …
}

まとめ

まとめると、次のようになります。

/**
 * Block Editor & Classic Editor
 */
body {
  --example: …;
  background: …;
  color: …;
  font-family: …;
}
:where(code, kbd) {
  …
}

/**
 * Block Editor
 */
body:where(.block-editor-writing-flow) {
  …
}
body:where(.block-editor-writing-flow) .example {
  …
}

/**
 * Classic Block & Classic Editor
 */
:where(.mce-content-body) {
  …
}
:where(.mce-content-body) .example {
  …
}

/**
 * Classic Block
 */
:where(.wp-block-freeform.mce-content-body) {
  …
}
:where(.wp-block-freeform.mce-content-body) .example {
  …
}

/**
 * Classic Editor
 */
:where(body.mce-content-body) {
  …
}
:where(body.mce-content-body) .example {
  …
}

SASSを使用している場合は、次のように書けます。

/**
 * Block Editor & Classic Editor
 */
body {
  --example: …;
  background: …;
  color: …;
  font-family: …;
}
:where(code, kbd) {
  …
}

/**
 * Block Editor
 */
body:where(.block-editor-writing-flow) {
  & {
    …
  }
  .example {
    …
  }
}

/**
 * Classic Block & Classic Editor
 */
:where(.mce-content-body) {
  & {
    …
  }
  .example {
    …
  }
}

/**
 * Classic Block
 */
:where(.wp-block-freeform.mce-content-body) {
  & {
    …
  }
  .example {
    …
  }
}

/**
 * Classic Editor
 */
:where(body.mce-content-body) {
  & {
    …
  }
  .example {
    …
  }
}

〆

このように、editor-style.cssだけで、ブロックエディタとクラシックエディタの両方のスタイルを整えることができる訳ですけど、正直、シンプルでもスマートでもないので、モヤっとしてます。他の制作者さん達はどうしてんだろ？