WordPressのブロックのスタイルで使うと良いCSS

, ,

WordPressでブロックのスタイルを記述する際にブロックのデフォルトスタイルのスタイルが用意されているものとそうでは無いものがあり、スタイルを未選択状態のブロックには .is-style-default などのクラスすら割り当てられません。

なので、 .is-style-default というクラスが無くてもデフォルトスタイルが適用されるようにCSSをかけば良いのですが、単にブロックの .wp-block-group というクラスにCSSを記述してしまうと、スタイルが必要になったグループのブロックにもデフォルトのスタイルが適用されてしまいますので、下記のように記述するのが個人的には好ましいと感じています。

.wp-block-group{
&.is-style-default,
&:not([class*="is-style-"]) {

}
}

このように記述すれば、

  • .wp-block-groupのクラスがあり
  • デフォルトスタイル is-style-default の記述があるものにスタイルを適用
  • デフォルトスタイル以外のスタイル is-style-〇〇 が設定されていないもの

上記の条件に当てはまる純粋なデフォルトスタイルのブロックに対してだけCSSが割り当てられます。