WordPress wp-block-cover ブロックは、背景画像からimg 要素に移行

gutenberg pluginの更新履歴には何も書かれていないので、変更になったバージョンは定かではありませんが、9.9では、既に変更になっているようです。

公式ディレクトリのテーマでは、今のところ新しい変化に対応しているテーマはまだないようです。

見た目の変化は、上記のように、カバーブロックのレイアウトが崩れていました。

原因を調べていると、プラグインで、カバーブロックのhtmlが変更されているようでした。

WordPress5.6 gutenberg プラグインなしの場合、カバーブロックは、以下のHTMLで保存されます。

WordPress 5.6 + gutenberg プラグインアクティブの場合、カバーブロックは以下のHTMLで保存されます。

WordPress 5.6 プラグインなしでは、画像はbackground プラグインありだとimgに変更になっていました。

この崩れは、gutenbergがアクティブな状態で保存した記事を、gutenbergプラグインをデアクティベートした場合に上記の画像のように表示されます。

対策は難しくなく、プラグインをアクティブにするか、または以下のCSSを追加すると、多分問題は解決します。

このような崩れが発生するのは、gutenbergプラグインを有効、無効にして、テストを繰り返しているような場面や、想像をたくましくすれば、WordPress5.7がリリースされて、しばらく記事を作成した後に、WordPress5.6に戻すといった場面でしか発生しないのかもしれませんが、

カバー画像に限らず、プラグインの改良で、機能が追加されたような場合、プラグインを有効にして作成した投稿が、デアクティベートした状態では、レイアウトや色がおかしくなってしまう事が発生します。また、編集画面も、プラグインをアクティブにしている場合は、エラーなしでもプラグインをデアクティベートしたとたんに、ブロックでエラーが発生したりします(例えば、ソーシャルメニューブロック等)

gutenbergの変化をキャッチし続けようとしている人にとっては、結構しんどい問題かもしれません。

gutenbergの初期には、よくこういった事がありましたが、(gutenberg レイアウトの崩れた時に - CSS note)油断大敵といったところでしょうか、、、

 

現在のところ、ブロック単位では以下のようなメッセージが追加されるブロックもあるようです。

あなたのサイトには「コア/ページリスト」ブロックのサポートが含まれていません。 このブロックはそのままにすることも、完全に削除することもできます。

以下は、カバーブロックの例ですが、こういったものも、エラーのヒントメッセージが表示されると嬉しいですね


新着記事

コメントは受け付けていません。