こんにちは。すっかり暖かくなりました。
この二年間で 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レシピでした。
WordPress 6.1 以降のブロックエディタでは、以下のように書いてください。(カラーパレットのaccentの場合)
div p.has-accent-background-color {
padding: 15px;
}