WordPressのブロックエディタに、ブロック単位でタブレット表示とモバイル表示のスタイルを指定できる仕組みが入ろうとしています。開発版プラグインのGutenberg 23.5に含まれた変更で、8月19日に予定されているWordPress 7.1に向けた作業の一部です。7月3日にはコアチームからテスト協力の呼びかけも出ており、いまが仕様に意見を出せる時期でもあります。
これまでブロックエディタの画面幅切り替えは、デスクトップ、タブレット、モバイルという固定の三択でした。しかも切り替えられるのは見え方の確認だけで、余白や文字サイズといった値そのものを画面幅ごとに変えることはできません。細かく詰めたい場合は、テーマ側でCSSを書くか、追加CSSクラスを当てて自前のメディアクエリを用意するのが定番の逃げ道でした。今回の変更は、その前提を編集画面の側から作り直そうとしています。
プレビューの幅を自由にドラッグできるようになった
まず目に見えて変わるのが、エディタキャンバスの幅です。従来のプリセット三択が、任意の幅にドラッグできるリサイズ可能なキャンバスに置き換わりました。ドロップダウンとリサイズハンドルは連動していて、プリセットの幅に一気に飛ぶこともできれば、ハンドルを掴んで数十ピクセル単位で詰めることもできます。
実務では、崩れるのは決まってプリセットの三点ではなく、その間のどこかです。タブレット表示は問題ないのにやや狭い幅でボタンの文字が折り返す、といった話は日常的に出てきます。幅を連続的に動かせるだけで、そうした境目を編集画面の中で見つけやすくなります。ブロックにビューポート別の設定が入っている場合は、幅を動かすとその境目で表示と非表示が実際に切り替わるため、確認の粒度も上がります。
ブロックごとにタブレットとモバイルの値を持たせる
本題はスタイル側です。プレビューのドロップダウンにレスポンシブ編集の切り替えが追加され、これを有効にすると、そのとき選んでいる画面幅に対してスタイル変更が適用されるようになります。つまりタブレット幅で余白を変えれば、それはタブレットだけの指定として保存され、デスクトップの値は元のまま残ります。同じブロックにタブレットとモバイルで別々の値を持たせ、それぞれが独立して記憶される作りです。
対象は文字サイズだけではありません。テスト呼びかけの中でも、グループやボタン、画像といった異なるブロックで、余白や色を含む複数のプロパティを試してほしいと案内されています。加えて、ブロックの表示と非表示をタブレットだけ切り替えるといった指定も扱えます。これまで追加CSSクラスと自作のメディアクエリで運用していた類の調整が、エディタの標準機能の側に寄ってくることになります。
ブロックの作り手にとっての線引き
制作会社の視点で押さえておきたいのは、恩恵が自動で行き渡る範囲がはっきり分かれている点です。標準のブロックサポートを使って実装されたブロックは、特別な対応をしなくてもレスポンシブなスタイル指定に対応します。一方で、独自のコントロールを自前で組んでいるブロックは対象外で、追いつくには手を入れる必要があります。自社製のカスタムブロックや、独自UIを持つプラグインを抱えているサイトほど、この線引きは効いてきます。
もう一点、useResizeCanvas() というフックが非推奨となり動作しなくなりました。getDeviceType() と setDeviceType() は引き続き使えます。エディタの幅制御に手を入れているテーマやプラグインを持っているなら、7.1が出る前に一度検索をかけておくと安全です。この手の変更は、リリース後に管理画面が白くなってから気づくのがいちばん厄介なので、ベータ期間のうちに確認できるのはありがたいところです。
運用の現場でどう効いてくるか
中小企業のサイトでは、公開後の細かな見た目の調整をお客様自身が行う場面が少なくありません。そのとき、スマートフォンだけ余白を詰めたいという要望に対して、これまでは制作側がCSSを書き足すしかありませんでした。ブロックの設定として持てるようになれば、依頼の往復が一段減ります。地方の小さな制作体制ほど、この手の細かい差し戻しが積み上がって時間を食っている実感があります。
ただし現時点ではまだテスト段階で、仕様も細部が動く可能性があります。本番サイトの開発版プラグインで試すのではなく、ステージング環境や検証用サイトで触るのが前提です。逆に言えば、いま試して違和感を報告すれば、8月のリリースに反映される余地があります。ブロックテーマを使っているサイトを一つ用意して、手持ちのブロックがどこまで追従するかを見ておくと、7.1が出たときの案内が具体的になります。
