WordPress5.3にアップデートしたらブロックエディタの表示が崩れたなんてことないかな。

わたしは崩れましたorz

ブロックエディタのCSSは、クラシック時代から使っているcssを自動的に置換してくれてるんだよね。

同一CSSでブロックエディタとクラシックエディタのスタイルを適用できるのはいいんだけど。

それに頼りっきりだと今回のように予期せぬ表示崩れがありそうです。

ということでこの記事では、ブロックエディタとクラシックエディタで同じCSSを使いつつも、自動置換のせいで崩れないようにする方法を考えてみました。

※ここでいうクラシックエディタのCSSとはビジュアルエディタでの話です。

従来のエディタのスタイルの記述の仕方

目次へ戻る

これまではbodyやh1、h2、p、ul…って感じでした。

テーマによって様々だと思うけど、実際に記事が表示された時と同じように少なくともh1、h2、h3とかの見出しは装飾してるんじゃないかな。

わたしは可能な限り同じになるように意識してます。

ブロックエディタのスタイル

目次へ戻る

やり方はいくつかあるけど、クラシックエディタと同じCSSをブロックエディタに読み込むと、自動的に置換して適用してくれます。

例えば、

body{
  font-size:15px
}

これが、

.editor-styles-wrapper{
  font-size:15px
}

こうなります。

同じCSSで、ブロックエディタとクラシックエディタのスタイルを設定できるのは楽チン～♪

わたしはやったことないから調べてないけど、ブロックエディタとクラシックエディタで別々のCSSを読み込ませる方法もあるのかな？

それなら予期せぬ表示崩れはないだろうけど、管理がめんどくさそうだよね。

横幅が崩れる・・・

目次へ戻る

わたしの場合、上記の自動置換のせいで崩れたのは横幅です。

body{
  max-width:800px
}

これが、

.editor-styles-wrapper{
   max-width:800px
}

になってしまい、ブロックエディタだとこの指定では崩れてしまいました。

色々と調べている人なら分かると思うけど、横幅を変えたい時は「.wp-block」に指定しなきゃなんだよね。

単に 「.wp-block」 を追加すればいいのかな～と試したけど、どうもbodyから置換された.editor-styles-wrapperの指定が悪さをしてしまい；；

ブロックエディタとクラシックエディタで同じCSSを使うにも、横幅の指定にbodyを使ってはいけなそうです。

クラシックエディタのみでスタイルを適用するには

目次へ戻る

クラシックエディタのソースを見るとbodyクラスに色々指定してありました。

<body id=” tinymce” class=”mce-content-body content post-type-post post-status-auto-draft post-format-standard page-template-default locale-ja mceContentBody webkit wp-editor wp-autoresize html5-captions” data-id=”content” contenteditable=”true” style=”overflow-y: hidden;”>

中でも汎用性がありそうな「content」を使ってみることに。

以下のように指定すると、クラシックエディタのみで横幅が反映されるようになりました。

body.content{
   max-width:800px
}

よし、一歩前進♪

他のスタイルも、

h1　→　body.content h1

p　→　body.content p

ul　→　body.content ul

のように「body.content」を付ければクラシックエディタのみの指定ができました。

ブロックエディタでのみでスタイルを反映させるには

目次へ戻る

ブロックエディタのみで使用されているクラスやIDを付ければ、何でもOKなのかな～と単純に考えましたがうまくいかずorz

軽くハマった後、深く考えるのは諦めました。

結論を言うと、「.wp-block」を付ければブロックエディタのみで反映されました。

h1　→　.wp-block h1

p　→　.wp-block p

ul　→　.wp-block ul

といった具合です。

もしクラシックエディタとブロックエディタで別々に指定したいという時があればお試しください。

横幅の崩れを直す

目次へ戻る

以下のように書き換えたらうまくいきました。

body.content,.wp-block{
   max-width:800px
}

bodyがうまく置換されればいいものを・・・

.editor-styles-wrapper が強敵でした(;´Д｀)

おまけ：クラシックエディタのみに<p>タグのスタイルを適用する

目次へ戻る

クラシックエディタの時は、<p>タグにも実際に記事が表示された時と同じスタイルを適用させている人は多いんじゃないかな？

この<p>タグだけど、ブロックエディタでは専用の入力エリアができてるからなくてもいいよね。

スタイルによっては逆におかしくなることもありそう。

ということで、<p>タグについてはクラシックエディタのみでスタイルが当たるようにする指定がこちら。

body.content p{
   padding:1em 0;
   margin:0;
}

paddingとかmarginとか、スタイルは一例です。

あとがき

目次へ戻る

記事を書く時に、実際に公開されるのと同じ見た目なのは気持ちがいいと感じるのはわたしだけじゃないはず。

気持ちがいいというかスッキリするかな。

テーマカスタマイザーみたいにプレビュー見ながら設定変えられるのもそうだし。

今回修正したことによって、わたしが作ったテーマでは以下のようなエディタの見た目になりました。

クラシックエディタ
クラシックエディタ
ブロックエディタ

※クリックかタップで拡大できます。

記事を書きやすいっていうのは、装飾のしやすさもあるだろうけど、エディタと公開される記事の見た目があまり変わらないこともあるんじゃないかなと思いました。

今後の課題としては、画像の配置関係かな～。

上に画像を挿入してみて分かったけど、クラシックエディタとは違うクラスで囲ってあるので、ブロックエディタ用にスタイルを用意しなければいけませんでした。

それがまぁ大変で大変で。

ここら辺は今後のバージョンアップで変わる可能性もあるので、ある程度同じになるようにしたら妥協したさ(*´ω`*)