WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

WordPress 5.5 アップデートでページのレイアウトが微妙に変わる

WordPress 5系からエディターの標準がブロックエディター(Gutenberg)になったのは皆さんご存知の通りですが、そのタイミングで、公開するページのテンプレートに以下のスタイルシートを参照する記述が勝手に追加されるようになったのは、みなさんご存知でしたでしょうか?(具体的には wp_head() 関数で自動で呼び出すようになっています)
/wp-includes/css/dist/block-library/style.min.css
なんでも、ブロックエディターで作ったレイアウトを実際のページに出力するためのスタイルシートなのだそうで。

そして、上記ファイル内において、バージョン5.5で新たなスタイルが追加され、それによって微妙にレイアウトが変わってしまったという報告が各方面から寄せられているので、今回はそのご紹介。

問題となっているのは次の記述です。

html :where(img) {
    height: auto;
    max-width: 100%;
}

これによって、画像のmax-widthを100%以外で設定していたり、あるいはそもそもmax-widthを定義していなかったりすると、アップデート前後で画像のサイズに微妙な差異が生じることになります。

デザインに関するスタイルは利用する側が設定するんだから、わざわざWordPress側に用意してもらわなくても結構ですっ!という方にとっては、自分で記述したオリジナルのスタイルに干渉するだけの邪魔な存在ですよね。
そこで、邪魔だな、と思う方は、思い切ってこのファイルを読み込まないようにしてしまいましょう。

function dequeue_plugins_style() {
	wp_dequeue_style('wp-block-library');
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);

わりとこの現象にぶつかるサイト運営者の方、多いんじゃないかと思うので、ぜひ参考にしてください。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!