WordPressのブロック開発まわりの月次まとめが公開されていて、9月分にはテーマを書く側や制作会社の実務に効きそうな変更がいくつか入っていた。派手な新機能というより、納品したあとのサイトをどう保つかに関わる調整が多い。

背景として、8月に出たWordPress 7.1では、ホバーやフォーカスといった状態のスタイルと、画面幅ごとのスタイルを管理画面から指定できるようになった。CSSを書かずに見た目を触れる範囲が広がったわけだが、これは同時に、制作側が整えたデザインを運用側が意図せず崩せる範囲も広がったということでもある。

状態スタイルの編集をテーマ側で閉じられる

Gutenberg 23.8で、ブロックの状態スタイル編集と、画面幅ごとの編集のそれぞれにオプトアウトの設定が追加された。blockStatesEditingEnabledとresponsiveEditingEnabledの2つで、どちらも既定は有効、block_editor_settings_allフィルターからfalseにできる。

使えると感じたのは、無効にしても表示が壊れない点だ。theme.jsonやグローバルスタイル、ブロックのstyle属性ですでに定義してあるスタイルは、どちらの設定でもそのまま出力される。編集画面から触れなくなるだけなので、作り込んだデザインを保ったまま運用担当者に渡せる。サイトを納品して、その後の更新はお客様側で、という進め方をしている案件では出番がありそうだ。

運用者が見る画面まわりでは、投稿の編集画面とウィジェット編集画面が、管理画面で選んだ配色を引き継ぐようになった。あわせてgetAdminThemeColors()が公開の関数として使えるようになっていて、管理画面の本文クラスから配色を読み取り、主要色と背景色を返す。独自の管理画面を追加しているプラグインでも、同じ二行の囲みを入れておけば利用者が選んだ配色に合う。細かい話ではあるが、追加した画面だけ色が違うという座りの悪さは減らせる。

グローバルスタイルで扱える要素が広がった

Gutenberg 23.9では、theme.jsonの要素スタイルにlabelが加わった。styles.elements.labelで指定でき、label要素を出力するマークアップ全般に効く。コアでは検索、フォーム入力、コメントフォーム、アーカイブ、カテゴリーの各ブロックが対象で、サードパーティ製のブロックにも適用される。

引用元表示のcite、テキスト入力、セレクトの3つは、以前からtheme.jsonでは指定できたものの、エディター上のスタイル画面からは触れなかった。これがタイポグラフィと色のパネルから編集できるようになっている。グループブロックはブロック間隔の対応を縦横それぞれに宣言するようになり、theme.json側では文字列だけでなくtopとleftを持つオブジェクトも受け取る。リストブロックの幅広と全幅、クエリーループのブロック間隔といった細かい対応追加も入った。

theme.jsonが無効扱いされる場面が減る

7.1で入った状態スタイルは、記述を検証するスキーマのほうが追いついていなかった。Gutenberg 23.8では、スタイルバリエーション向けの状態、状態が要素ではなくブロックに固有である点、擬似クラス指定の誤りといった箇所に修正が入っている。コードエディターでtheme.jsonを開いたときに、正しい記述が無効として警告される場面が減るという話だ。地味な変更だが、テーマを書いている時間にはそのまま効いてくる。

公式ドキュメントの例をその場で動かせる

もうひとつ、開発者向けリファレンスに載っているコード例が、ブラウザ上で実行できるようになった。関数のページで実行ボタンを押すと、Playgroundで動く本物のWordPressに対してスニペットが走る。例はDocBlockの中にphp interactiveという名前のコードフェンスで書かれていて、ドキュメントと関数の定義が同じファイルに並ぶ形になっている。挙動を確かめるために手元へ環境を作らなくてよくなる分、調べ物の往復は短くなるはずだ。

次のWordPress 7.2は、ベータ版が10月下旬、正式版が12月上旬の予定とされている。独自ブロックを持っている場合、内部ブロックのテンプレート指定がInnerBlocksのプロパティからブロックタイプの設定へ移り、従来の書き方は非推奨になった点は早めに手を入れておきたい。複数人が同時に編集する機能への対応が理由とされていて、今後この種の書き換えはもう少し続きそうだ。