WordPress 7.0 の 追加 CSS の使い方

ブロックに CSS を記述できるようになった

WordPress 7.0 でブロックの設定画面に CSS を記述してスタイルを設定できるようになりました。

メリット

これにより以下のメリットが得られます。

• ブロックをコピペして他のページ・他のサイトで使い回せる。
• 編集画面にもスタイルが反映されるので、どのように表示されるのかを確認しながら作業ができる。

デメリット（使用上の注意点）

デメリットというほどではないのですが、以下のことを注意しながら制作する必要があります。

• CSS を記述できる場所が増えたので、一定のルールを決めておかないと、CSS がどこに記述されているのかわかりづらくなってしまう。

この 追加 CSS の使い方をまとめてみました。

ブロックにスタイルを指定する

セレクタを指定せずに宣言だけ記述すれば、スタイルがブロックに適用されます。

color: #f00;

セレクタ名として & を指定する書き方もあります。

& {
    color: #f00;
}

入力する文字数が増えますが、後者のルール（必ずセレクタを指定するルール）で覚えておく方が後述する疑似要素や子要素などのスタイル指定の記述ルールと統一されるのでわかりやすいですね。

VK Blocks Pro の カスタム CSS に慣れている私としては、
selector → &
という置換で考えられる後者の方が馴染みやすいです。

マウスホバー時のスタイルを指定する

&:hover {
    color: #f00;
}

::before / ::after 擬似要素を指定する

セレクタ名として &::before または &::after を指定すると疑似要素を指定できます。

&::before {
    content: "★";
}

子要素のスタイルを指定する

セレクタ名として& の後ろに半角スペースで区切って子要素を指定すると、子要素のスタイルを指定できます。

& a {
    color: #f00;
}