新しく記事を書きました。
まじかに迫りつつある Gutenberg ですが、アップデートすると、以前のバージョンで作成した記事に、適切にスタイルが適用されず、レイアウト崩れを起こすことがあります。
スタイルシートのスタイルの調整に入る前に、試しておいたほうがいいこともありますのでそのあたりをメモに残します。
レイアウトが崩れたら、とりあえず再保存してみよう
建前として、gutenberg は、テーマでのスタイルを変更しなくても、gutenbergのブロックが適用されて、それなりのスタイルを提供するということになっていますが、
現実問題として、そのような夢のようなことが実現できるかというと そうでもなさそうです。
gutenberg 4.1.1を通して、アップデートで なぜレイアウト崩れが発生してしまうのか見ていきましょう。
gutenberg 4.1.1では、カバー画像ブロックの更新が行われました。この変更により、古いバージョンでカバー画像を表示する記事を作成していた場合、おそらくカバー画像は、まともに表示されなくなっていることでしょう。
このようなことが発生する仕組みを知っておくと、意外と役に立つのではないかと思います。
4.1.1以前のカバー画像のソース
<!-- wp:cover-image {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
<div class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)">
<p class="wp-block-cover-image-text">Of Mountains & Printing Presses</p>
</div>
<!-- /wp:cover-image -->
4.1.1のカバー画像のソース
<!-- wp:cover {"url":"https://www.example.com/wp/wp-content/uploads/bouquet-1.jpg","align":"wide","id":51340} -->
<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(https://www.example.com/wp/wp-content/uploads/bouquet-1.jpg)">
<p class="wp-block-cover-text">new cover image</p>
</div>
<!-- /wp:cover -->
カバー画像は、4.1.1で、ビデオ背景を持つことができるようになった関係で、クラス名が、wp-block-cover-image が、wp-block-coverに変更されました。
しかし、過去に作ったカバー画像は、投稿に静的に張り付けられているため、wp-block-cover-imageクラスはそのまま残り続けます。しかし、そこにはwp-block-cover-imageのスタイルはありません。
再保存することで、新しいブロック構造に書き換えられて、表示できるようになります。
また、これまでもこういったクラスの変更や、html構造の変更 ギャラリーブロックが、div -> ul に変更されたり、画像ブロックのalignleft alignright aligncenterが、div.wp-block-imageでラップされたりなど、ちょっと理解に窮する変更もたくさん行われています。
というわけで、アップデートすると、過去のグーテンベルグの投稿のスタイルが、崩れるのは頻発します。投稿のコピーを取ってから、まずは、再保存を試しましょう。
プラグインなどで提供される、いろいろなブロックもこういったことは避けられない問題だと思います。ブロックの再構築ツールや、マネージメントツールが今後不可欠になっていくのかもしれませんね。