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 のスタイル指定には勝つことができません。

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

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

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

簡単CSSレシピでした。