Gutenbergのスタイル調整で1時間近くハマったので備忘録

見出しのCSSを調整するときに、ハマって一時間ほどかかったのがくやしいのでどこにハマったのかを残しておくことにしました。

デザインはこんなよくある感じのやつです！ほんとよくありますよね…。

CSSはこんな感じ。

h2 {
   color: #363636;
   text-align: center;

   &::after {
      content: '';
      display: block;
      width: 50px;
      height: 2px;
      background: #cb80e3;
      margin: 13px auto 0;
   }
}

でも、ちょっとまって！Gutenbergのエディターでは、見出しは配置が選べます。（旧エディターでも選べた気はする）つまり、エディターで中央配置を設定するのは間違いなのです。

そして、当然ですがafter要素の位置も右・中央・左と移動しないといけません…。

ということで、私はこんなCSSに修正しました！

h2 {
   color: #363636;

   &::after {
      content: '';
      display: block;
      width: 50px;
      height: 2px;
      background: #cb80e3;
      margin-top: 13px;
   }

   &[style*="text-align:center"] {
      &::after {
         margin-left: auto;
         margin-right: auto;
      }
   }

   &[style*="text-align:right"] {
      &::after {
         margin-left: auto;
         margin-right: 0;
      }
   }
}

属性セレクタの部分一致を使いました。
通常のh2だとafterの位置は左。配置を中央や右に変えることで、afterの位置も変わります。

フロントで確認したらこれで問題なく表示されていたので、やれやれと思いながら管理画面に戻ると……そこにはafterが左寄せになったままの見出しが！

確かにtext-alignはJSで切り替わっているけども…。スタイル変えるだけなのに効かないのはおかしい、書き方が駄目なのか？って小一時間ほど悩んだ結果、コードはこうなりました。

h2 {
   color: #363636;

   &::after {
      content: '';
      display: block;
      width: 50px;
      height: 2px;
      background: #cb80e3;
      margin-top: 13px;
   }

   &[style*="text-align: center"],
   &[style*="text-align:center"] {
      &::after {
         margin-left: auto;
         margin-right: auto;
      }
   }

   &[style*="text-align: right"],
   &[style*="text-align:right"] {
      &::after {
         margin-left: auto;
         margin-right: 0;
      }
   }
}

……正解は、text-alignのコロンのあとに半角スペースを入れた指定を追加すること。
ちなみに気づいたのは一緒にお仕事をしているToro_Unitさん。なんでだーなんでだーって画面共有したときに気づかれて「うわあああああーーー私の一時間！！！！！」って普通に言いました。

値の方はまだ正規表現が使えないようです。管理画面では半角スペースが入って、フロントでは入らない。なんという罠。ということでくやしいエントリー。

最近GutenbergのエディターCSSを触っているのでこれからもなんかちょこちょここういう変なハマり方をしそうですが、その度備忘録してやろうと思います。