p.has-background paddingの調整 WordPress Gutenberg

こんにちは。すっかり暖かくなりました。

この二年間で Gutenberg が進化して、今ではとても重宝しています。

記事を書くのが早くなったこと、きれいなレイアウトを簡単に作れること、様々なブロックを再利用できること(仕事全体の生産性の向上)が主なメリットです。

でも、困ったことがひとつ。

困ったこと(現象)

段落ブロックに背景色を付けると、has-background クラスが自動的に付与されるのですが、この padding が広いです。モバイルでは、余白がもったいない。PCでも見栄えが … 。

WordPress デフォルトのスタイルの抜粋はこんな感じです。

p.has-background {
    padding: 20px 30px;
}

そこで、子テーマのスタイルシートに

p.has-background {
    padding: 15px;
}

を追加しましたが … 残念ながら、padding は元のままでした。(Chrome F12 などで確認できます)

元々の Gutenberg Editor のスタイル(サイト側)が適用されたままなのです。( ;∀;)

背景色は、拡張Aをきちんと定義して、好みのカラーになったのに、余白がうまくいきません。

解決策

カスタムブロックを作るとか、大仰なことはしたくありません。

試行錯誤 ・・・ 時間がもったいない。しかし、ここで早まってはいけません。!important は使わないでください。

こんな時は、現場の知恵。

スタイル適用時の優先順位を決める「重み」(点数)が同じ場合、後から読み込まれる Gutenberg Editor のスタイル指定には勝つことができません。

スタイルの優先順位の重み(点数)は、
 ① HTMLタグ内の記述 style=” ” : 1,000
 ② ID セレクタ  #something : 100
 ③ class セレクタ .somthing : 10   
 ④ 属性セレクタ a[href*=”something”] : 10
 ⑤ HTML要素名 div : 1
 ⑥ 擬似要素 :first-child : 1
 ⑦ ユニバーサルセレクタ * : 0
となっています。

ということは、点数が一点でも多ければ、そのスタイルが優先されますので、<p>タグのひとつ上のタグを確認して、

div p.has-background {
    padding: 15px;
}

として、無事解決。点数が1点上がって、順位が変わりました。

簡単CSSレシピでした。

お使いのテンプレート(テーマ)で、p.has-background のひとつ上の親要素を確認してください。今回は <div> でした。(多分、皆そうだと思うけど、念のため)

WordPress 6.1 以降のブロックエディタでは、以下のように書いてください。(カラーパレットのaccentの場合)

div p.has-accent-background-color {
    padding: 15px;
}