WordPress5.3, 管理画面のCSSスタイルの見直し・統一

WordPress5.3では、管理画面の見た目の修正が始まりました。おおらかな人は気づかないくらいの細かいことですが、ボタンなどのコンポーネントの色や線など、見やすくて疲れないように作業のジャマにならないように修正されてます。

UX（ユーザーエクスペリエンス）の向上ですね？

開発者向けの話で、管理画面をイジっている人向けの情報です。ボタンやテキストボックスなどの見た目を変えているだけなので、そこまで重要なものではありません。

WordPress5でGutenbergを採用してから、管理画面のスタイル修正の必要性を感じていたようです。

しかしここで問題がありました。Gutenbergの部分（投稿編集画面）とそれ以外のスタイルがちがったからです。

（たしかに。同じシステムに見えない。）

そこで、Gutenbergのスタイル修正と同時に管理画面全体のスタイルを見直すことにしました。

それが今回の目的です。

ここに書いてあることは、WordPress.orgのフィールドガイドの和訳・解説です。

完全翻訳したあと、ポイントをピックアップして内容を再編集しました。

プラグイン・WordPress開発者の注意点

修正はCSSスタイルのみでHTMLに変更はありません。

（クラス属性も変わらない。）

<form>のスタイルをカスタムでオーバーライドしている場合は、WordPress 5.3 RC 1でのテストが必要です。

またプラグイン開発では、5.3に対応できているかチェックが必要です。

完全なカスタムスタイルを適用している場合は気にしなくていいです。

管理画面のスタイルをカスタマイズしている人向けのオススメの修正方法です。

固定のheightの削除

高さのサイズの絶対値指定はやめようってこと。（pxとか）

%, em, rem , vhなどを使えばいい。

WordPressはフレキシブルに作るのがスタイル・コーディングの標準です。

top, bottom, padding, line-heightの削除

コンテンツの間隔、位置までも考慮して修正されたようです。それを無視する必要性はないってこと。

ボタンのfocus, hoverのカスタムカラー上書き

ボタンにアクションがあるときのカスタムカラーを適用している人は修正しましょうって言ってます。

HTMLに修正がないので、そのままでも大丈夫だと思うが...

『カスタムスタイルに今回の修正点が反映されるかもしれないから気をつけてね？』

ってことです。

フォームフィールド <form>	<input type="text"> <input type="textarea"> <input type="checkbox"> <input type="radio"> <select> そのほか、カラーピッカー: 色を選ぶやつプライマリボタン: クラス属性: is_primary セカンダリボタン: クラス属性: is_secondary
テーブル	<table>
通知	管理画面の上の方に表示されるやつ
メタボックス	なんだろ？

WordPressの開発者チームが、よく使われる上位20のプラグインでテストを行いました。スタイルの修正点や影響を調査するためです。

1	Contact Form 7
2	Yoast
3	Akismet
4	Classic Editor
5	Jetpack
6	WooCommerce
7	WordPress Importer
8	Really Simple SSL
9	Elementor Page Builder
10	Wordfence Security
11	Duplicate Post
12	TinyMCE Advanced
13	All in One SEO Pack
14	WP Forms
15	Google XML Sitemaps
16	Google Analytics Dashboard Plugin for WordPress
17	All-in-One WP Migration
18	UpdraftPlus Backup
19	WP Super Cache
20	Google Analytics Dashboard for WP