WordPressの次の大型版である7.2は、ベータ1が10月20日、RC1が11月17日、正式版が12月8日という日程で進んでいます。今年最後の大型版にあたり、WordPress公式の開発者向けブログでは、ベータからRCまでの期間に自分のテーマやプラグインを試してほしいと呼びかけています。この時期なら、見つけた不具合の報告がまだ正式版に反映される余地があるからです。

公開されているロードマップには、説明リストのブロックや目次ブロックの安定化、フォーム部品をグローバルスタイルで整える画面、Ipsumという名前の新しい既定テーマなどが並んでいます。Ipsumは、これまでのように年の名前を付けない初めての既定テーマで、余計な装飾を省いた白いキャンバスのような作りだと紹介されています。ただ、制作の現場で気にしておきたいのは、目立つ新機能よりも、既存サイトの見た目に静かに影響しそうな細かい変更のほうです。

コアのブロックに付くクラスが増える

Gutenberg 24.1では、約140件の変更で、既存のブロックサポートをまだ持っていなかったコアのブロックに有効化しました。背景画像、グラデーション、影、リンクやボタンの色、枠線、段組み、文字揃えなどが、ほぼすべてのコアブロックで設定できるようになります。

テーマを作る側から見ると、これまでコードブロックに影を付けたり、最新の投稿ブロックに背景を敷いたりするために書いていた独自のCSSを、theme.jsonのstyles.blocksへ移せるということです。管理画面から調整できる範囲が広がるので、納品後にお客さまが自分で手を入れやすくなる面もあります。

一方で注意したいのが、アコーディオン、タブ、タブパネル、投稿テンプレートの各ブロックがhas-link-colorなどのクラスを出力するようになった点です。これらのブロックの中のリンク色をテーマ側のCSSで指定している場合、新しく付いたクラスとの詳細度の競り合いで、意図しない色に変わる可能性があります。開発者向けブログでも、7.2の前に確かめておくよう勧めています。

アイコンはfillでは色が変わらなくなる

コアのアイコンは描き直しが完了し、約330個が塗りではなく線で描く形式に切り替わりました。それぞれの<svg>にはfill: noneがインラインで指定されるため、fillのプロパティやCSSのfillの指定では色が変わりません。色を変えたいときはcolorを使う形になります。

管理画面の見た目をお客さま向けに調整しているサイトで、svg { fill: … }のような指定をしていれば、アイコンの色が効かなくなる場面が出てきそうです。また、@wordpress/iconsと@wordpress/componentsは同時に更新するよう案内されています。新しいアイコンと古いアイコン部品を組み合わせると、スタイルの統合が外れることがあるためです。

ギャラリーブロックにも変化があります。Gutenberg 24.0でグリッドの種類が加わり、ギャラリーのCSSは:where(.is-layout-flex)の範囲に絞られました。既定は従来どおりフレックスで、既存のギャラリーは切り替えない限り見た目が変わらないとされています。ただ、テーマ側のCSSがギャラリーの規則は常に当たる前提で書かれている場合は、グリッドに切り替えたギャラリーでも崩れないか試しておくと安心です。

自前のブロックやデータベースの設定を持つサイトの場合

独自のブロックを作っている場合は、@wordpress/componentsのDivider、ResponsiveWrapper、Scrollable、ZStack、Elevationの5つが非推奨になった点も押さえておきたいところです。削除は7.4の予定で、ResponsiveWrapperは素のCSSのaspect-ratio、DividerはSeparatorの部品に置き換えるよう案内されています。すぐに動かなくなるわけではありませんが、改修の予定に入れておくと後で慌てずに済みます。

データベースまわりでは、WordPressが自分の接続でNO_BACKSLASH_ESCAPESというSQLモードを外すようになります。大半のサイトには影響しないと説明されていますが、このモードに依存している環境ではincompatible_sql_modesのフィルターで元に戻せます。ただし、プラグインやmu-pluginでは読み込みが遅すぎるため、db.phpのドロップインからでないと効かない点に注意が必要です。

確かめ方としては、ステージング環境にトランク版と最新のGutenbergを入れるか、ブラウザだけで立ち上がるPlaygroundを使うのが手軽です。Playgroundには、PHPやWP-CLIのコマンドを実行できる端末と、wp_mail()で送ったメールをブラウザで確認できる機能も加わりました。

中小企業のサイトでは、制作時に足したCSSがそのまま何年も使われていることがよくあります。正式版が出てから見た目の崩れに気づくより、ベータの期間にいくつかの代表的なページを開いて、リンクの色、アイコン、ギャラリーの3点を見比べておくだけでも、年末の更新作業はずっと落ち着いたものになるはずです。