2019ブロックエディタとクラシックエディタ、同cssで崩れないようにするWordPress2019年11月21日WordPress5.3にアップデートしたらブロックエディタの表示が崩れたなんてことないかな。わたしは崩れましたorzブロックエディタのCSSは、クラシック時代から使っているcssを自動的に置換してくれてるんだよね。同一CSSでブロックエディタとクラシックエディタのスタイルを適用できるのはいいんだけど。それに頼りっきりだと今回のように予期せぬ表示崩れがありそうです。いうことでこの記事では、ブロックエディタとクラシックエディタで同じCSSを使いつつも、自動置換のせいで崩れないようにする方法を考えてみました。※ここでいうクラシックエディタのCSSとはビジュアルエディタでの話です。目次へ戻るこれまではbodyやh1、h2、p、ul...って感じでした。テーマによって様々だと思うけど、実際に記事が表示された時と同じように少なくともh1、h2、h3とかの見出しは装飾してるんじゃないかな。わたしは可能な限り同じになるように意識してます。ブロックエディタのスタイル目次へ戻るやり方はいくつかあるけど、クラシックエディタと同じCSSをブロックエディタに読み込むと、自動的に置換して適用してくれます。font-size:15px}こうなります。同じCSSで、ブロックエディタとクラシックエディタのスタイルを設定できるのは楽チン~♪わたしはやったことないから調べてないけど、ブロックエディタとクラシックエディタで別々のCSSを読み込ませる方法もあるのかな?それなら予期せぬ表示崩れはないだろうけど、管理がめんどくさそうだよね。目次へ戻るわたしの場合、上記の自動置換のせいで崩れたのは横幅です。max-width:800px}になってしまい、ブロックエディタだとこの指定では崩れてしまいました。調べている人なら分かると思うけど、横幅を変えたい時は「.wp-block」に指定しなきゃなんだよね。追加すればいいのかな~と試したけど、どうもbodyから置換された.editor-styles-wrapperの指定が悪さをしてしまい;;ブロックエディタとクラシックエディタで同じCSSを使うにも、横幅の指定にbodyを使ってはいけなそうです。クラシックエディタのみでスタイルを適用するには目次へ戻るクラシックエディタのソースを見るとbodyクラスに色々指定してありました。hidden;”>中でも汎用性がありそうな「content」を使ってみることに。以下のように指定すると、クラシックエディタのみで横幅が反映されるようになりました。ulのように「body.content」を付ければクラシックエディタのみの指定ができました。ブロックエディタでのみでスタイルを反映させるには目次へ戻るブロックエディタのみで使用されているクラスやIDを付ければ、何でもOKなのかな~と単純に考えましたがうまくいかずorz軽くハマった後、深く考えるのは諦めました。結論を言うと、「.wp-block」を付ければブロックエディタのみで反映されました。ulといった具合です。クラシックエディタとブロックエディタで別々に指定したいという時があればお試しください。横幅の崩れを直す目次へ戻る以下のように書き換えたらうまくいきました。́Д`)おまけ:クラシックエディタのみに<p>タグのスタイルを適用する目次へ戻るクラシックエディタの時は、<p>タグにも実際に記事が表示された時と同じスタイルを適用させている人は多いんじゃないかな?この<p>タグだけど、ブロックエディタでは専用の入力エリアができてるからなくてもいいよね。スタイルによっては逆におかしくなることもありそう。いうことで、<p>タグについてはクラシックエディタのみでスタイルが当たるようにする指定がこちら。margin:0;}paddingとかmarginとか、スタイルは一例です。あとがき目次へ戻る記事を書く時に、実際に公開されるのと同じ見た目なのは気持ちがいいと感じるのはわたしだけじゃないはず。気持ちがいいというかスッキリするかな。テーマカスタマイザーみたいにプレビュー見ながら設定変えられるのもそうだし。今回修正したことによって、わたしが作ったテーマでは以下のようなエディタの見た目になりました。クラシックエディタブロックエディタ※クリックかタップで拡大できます。記事を書きやすいっていうのは、装飾のしやすさもあるだろうけど、エディタと公開される記事の見た目があまり変わらないこともあるんじゃないかなと思いました。今後の課題としては、画像の配置関係かな~。上に画像を挿入してみて分かったけど、クラシックエディタとは違うクラスで囲ってあるので、ブロックエディタ用にスタイルを用意しなければいけませんでした。それがまぁ大変で大変で。MEYossybunnyウサギが大好きなフリーランサー。フリーランス歴5年以上。WordPressテーマやプラグインを自作しています。