RichTextの文字スタイル領域の背景色が変更される仕組みと、背景色のカスタマイズ

ブロックエディター（Gutenberg）では、RichTextや文字列に対してボールドやイタリックと言った文字スタイルを設定したり、リンクを追加すると、その文字スタイルが設定されている文字領域の選択時には背景色が変更されるようになります。
その文字スタイルが設定されている領域のスタイル効果が解りやすくなっています。
この記事では、領域選択時の背景色がどう言う仕様で変更されているか、またそのカスタマイズについて解説します。

ご注意

下記の仕様は、WordPress 5.2で変更されています。WordPress 5.1以前の仕様となります。
WordPress 5.2以降の仕様に関しましては別記事「RichTextの文字スタイル領域が選択されている時のスタイルをカスタマイズ」をご確認ください。

選択時には、領域に対して属性が付与されます

公式の要素では、エリア選択時にdata-mce-selected=”inline-boundary”と言う属性が付与されるようになっています。

属性を設定しているCSS

Gutenbergプラグインや、WordPress 5.0からは、下記のようなスタイルが追加されており、ブロックエディター内で属性が付与された時にその効果が適用されるようになっています。

.editor-rich-text__tinymce:focus a[data-mce-selected],
.editor-rich-text__tinymce:focus b[data-mce-selected],
.editor-rich-text__tinymce:focus code[data-mce-selected],
.editor-rich-text__tinymce:focus del[data-mce-selected],
.editor-rich-text__tinymce:focus em[data-mce-selected],
.editor-rich-text__tinymce:focus i[data-mce-selected],
.editor-rich-text__tinymce:focus ins[data-mce-selected],
.editor-rich-text__tinymce:focus strong[data-mce-selected],
.editor-rich-text__tinymce:focus sub[data-mce-selected],
.editor-rich-text__tinymce:focus sup[data-mce-selected] {
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #e8eaeb;
  background: #e8eaeb;
  color: #191e23;
}
テネーブル

元の記述自体は、packages/editor/src/components/rich-text/style.scssに記述されていると思います。上記の記述は、説明のためにCSS化したものとなります。

テネーブル（アイコン01）

背景色やpaddingなどを変更する場合、上記のようなCSSで記述を上書きすれば各要素に対して背景色を変更したりと言ったカスタマイズが可能です。

設定されているHTMLタグ要素の場合、自動で属性が付与されます

  • aタグ
  • bタグ
  • codeタグ
  • delタグ
  • emタグ
  • iタグ
  • insタグ
  • strongタグ
  • subタグ
  • supタグ

の要素に関しましては、文字スタイル領域を選択時に自動的にdata-mce-selected=”inline-boundary”と言う属性が付与されるようになっているようです。

設定されていないHTMLタグ要素にもdata-mce-selected=”inline-boundary”を付与したい

このdata-mce-selected=”inline-boundary”を付与するのは、クラシックエディターの時代からの制御もあるようで、WordPressのCoreで制御されているようです。少し調査をしてみましたが、実際に付与する為のカスタマイズは現状では難しいと思います。

ルミェール

WordPress 5.2からは、これらの仕様が変わって出来るようになっているよ！
別記事「RichTextの文字スタイル領域が選択されている時のスタイルをカスタマイズ」も参考にしてみてね！

ルミェール（アイコン01）