WordPress 7.0 の管理画面UIの調整

5月20日に WordPress 7.0 がリリースされました。WordPress 7.0 では、AIと連携できる「コネクタ」が導入されたほか、ブロックエディタではブロック単位で追加CSSを設定できたり、ブロックをビューポートに応じて非表示にできたり、他にもいくつかの機能が追加されています。

更新後に一目で変わったとわかるのは管理画面のUIで、ボタンやリンクの配色が鮮やかになりました。さらに、ボタン等の余白が大きくなり、画面遷移の動作がスムーズになっています。

この鮮やかな配色が馴染まない場合はプローフィール設定で従来の配色に戻すことができます。
一方で、クラシックエディタの「公開」メタボックスの投稿日編集フィールド等、一部の表示が崩れていて調整が必要になりました。

※現在クラシックエディタは使用しない方向ですが、カスタム投稿タイプで本文欄を非表示とした場合に各メタボックスが強制的にクラシックエディタのUIになりますので、案件によってはブロックエディタとクラシックエディタが混在することがあります。

画面の配色

画面の配色については、プロフィール設定の従来の配色の「モダン」が WordPress 7.0 では「デフォルト」になりました。一方、従来の「デフォルト」は WordPress 7.0 では「フレッシュ」に該当します。よって、プロフィールから管理画面の配色を「フレッシュ」に変更することで、従来の配色に戻すことができます。

クラシックエディタの「公開」メタボックス

クラシックエディタに限ってですが、予約投稿などのために「公開」メタボックスで投稿日を編集しようとした場合に「分」フィールドが折り返してしまっています。また、投稿の複製や書き換えを行うことができるプラグイン「Yoast Duplicate Post」を入れている場合に、複製や書き換えの表示が崩れていました。

この崩れは WordPress やプラグインの次期更新までの一時的なものかもしれませんが、今後クラシックエディタの改善はないかもしれません。とりあえず管理画面に以下のCSSを適用することによって調整しました。

#timestampdiv select {
	padding-left: 8px;
}

#major-publishing-actions {
	display: block;
}

#delete-action {
	float: left;
}

今どき float ? って感じですが、従来のUIで「ゴミ箱へ移動」と「更新」（または「公開」など）の部分に float が使われているので、元に戻した感じです。

この他にもクラシックエディタに限らず、管理画面をCSSでカスタマイズしている場合など、UIの変更によって思わぬ影響があるかもしれません。

余談：追加CSS

ブロック単位で「追加CSS」を設定できる機能は便利ですね。今までは予めCSSファイルに任意の class のスタイルを記述しておいて「追加CSSクラス」を設定したり、カスタムフィールドでページ単位でCSSを追加できるようにしていました。

ブロック単位なので、ブロックの一部とか高度なスタイル設定は難しいのですが、それでもいちいち class を設定したりする手間は省けます。

なお、「追加CSS」を使うとブロック単位でCSSを追加することができますが、HTMLタグに直接記述するインラインCSSではなく、head の中に内部CSSとしてまとめて記述されます。（”wp-custom-css-07300be0″ などというランダムな文字列の class が付与されます。）

一方、見出しブロックで選択を禁止してた h1 が簡単に選べるようになってしまいました。新たな対策を考えなけえれば…。