ボタン関係のスタイルは読み込ませないのが吉

追加で読み込ませるエディタ用スタイルにボタン絡みのスタイルが含まれていると、エディタのツールバーのスタイルが崩れるケースが多い。何故なら、

[type="button"] { border: 1px solid #ccc }

なんてのがあった場合に、 .editor-styles-wrapper でラッピングされ、

.editor-styles-wrapper [type="button"] { border: 1px solid #ccc }

となり、詳細度が 20 (クラスセレクタ:詳細度10 + 属性セレクタ:詳細度10) になる。まぁ、それでも特別大きな詳細度でない。

ところが、ツールバーのボタンのスタイルを指定しているセレクタが

.components-toolbar__control.components-button

などと、詳細度がこれまた 20 (クラスセレクタ*2) なのである。

詳細度をなるべく低くすることは大切だけれども、追加したスタイル内で属性セレクタを使った時点で、カスケーディングによってツールバーのボタンのスタイルが上書きされてしまい、デザインが崩れてしまう。

enqueue_block_editor_assets でも同様である。

Sassを使ってエディタ用のCSSを作って読み込ませる場合は、フォームコントロール部分を切り分けるか、エディタ上には存在しないクラス名を含めたセレクタに変更したほうが良さそうだ。