WordPress 7.2前に確認、Coreアイコンはfill指定で色が変わらない

WordPress公式のDeveloper Blogは2026年10月14日の月次記事「What’s new for developers? (October 2026)」で、開発者が知っておくべき変更を幅広く紹介しています。この記事では、そのうちテーマや管理画面のCSSに関わるものを取り上げます。中でも見落としやすいのは、Coreアイコンが塗り（fill）から線（stroke）に変わり、fillを指定しても色が変わらなくなったことです。7.2のBeta 1は10月20日の予定なので、それまでに自分のテーマとプラグインで確かめたい点をまとめます。

Coreアイコンの約330個が、fill指定では色が変わらない
Accordionなどにhas-link-colorが付き、リンクのCSSと詳細度が衝突しうる
@wordpress/componentsの5つが非推奨に、アイコンは非公開コレクションも可能に
Beta 1の前にやること
エラーが出ないぶん見落としやすいアイコンの変更
参考にした公式情報

Coreアイコンの約330個が、fill指定では色が変わらない

Developer Blogによると、Coreアイコンの描き直しはGutenberg 24.0で始まり、24.1で完了しました。約330個のアイコンがstrokeベースになり、各<svg>にはインラインでfill: noneが付きます。原文には「A fill prop or CSS fill rule no longer recolors them.」とあり、fillのpropsやCSSのfillルールでは色が変わらなくなりました。

色を変えたいときは、CSSのcolorを使います。管理画面のスタイルでCoreアイコンを狙ったsvg { fill: … }のようなルールを書いているなら、効かなくなっていないか確認が必要です。

書き換えのイメージです（筆者による例で、公式のコード例ではありません）。

/* 変更前: fillで色を付けていた */
.my-admin-button svg { fill: #1d2327; }

/* 変更後: 色は color で指定する */
.my-admin-button svg { color: #1d2327; }

注意点がもう1つあります。@wordpress/iconsと@wordpress/componentsは、同時に更新するよう勧められています。古いIconコンポーネントに新しいアイコンを組み合わせると、統合されたスタイルが抜ける場合があるためです。

Gutenberg 24.1の変更点の記事（make.wordpress.org/core）では、残りの238個がstroke化されたことと、アイコンの公開設定がアイコン単位からコレクション単位に移ったことが書かれています。管理画面用のcore-adminコレクションも追加されました。

Accordionなどにhas-link-colorが付き、リンクのCSSと詳細度が衝突しうる

Gutenberg 24.1の主眼は、デザインツールの一貫性です。約140件のPRで、未対応だったCoreブロックに既存のブロックサポートが有効になりました。背景画像、グラデーション、シャドウ、リンクとボタンの色、ボーダー、テキストカラム、テキストの配置などが対象です。

テーマ作者にとっては、うれしい面と注意点の両方があります。

移せるCSS：CodeブロックのシャドウやLatest Postsブロックの背景など、自前のCSSで書いていたものは、theme.jsonのstyles.blocksへ移せる可能性があります。
ぶつかるCSS：Accordion、Tabs、Tab Panel、Post Templateは、has-link-colorなどのクラスを出力するようになりました。これらの中のリンクにテーマ側でスタイルを当てているなら、7.2の前に、詳細度の衝突がないかを確認するよう、Developer Blogが勧めています。

make.wordpress.orgの24.1の記事には、Accordion・Accordion Item・Accordion Panelそれぞれへのリンク・見出し・ボタンの色、Tabsへのボーダー・シャドウ・タイポグラフィ・リンク色など、Post Templateへの背景画像・見出し・ボタンの色・シャドウなどの追加が列挙されています。

@wordpress/componentsの5つが非推奨に、アイコンは非公開コレクションも可能に

24.1では、@wordpress/componentsの5つのコンポーネントが非推奨になりました（Developer Blogは「deprecated since 7.2」と記しています）。

Divider
ResponsiveWrapper
Scrollable
ZStack
Elevation

Developer Blogによると、削除は7.4の予定です。置き換え先として挙げられているのは、素のCSS（ResponsiveWrapperにはaspect-ratio）かSeparatorコンポーネントです。プラグインでこれらを使っているなら、使用箇所を洗い出すのが先です。

また、Gutenberg 24.1で、Icon Registration API（7.1）のコレクションにpublic引数が加わりました。publicをfalseにしたコレクションのアイコンは、wp_get_icon()では使えますが、REST APIからは見えず、Iconブロックもフロントエンドで描画しません。自分のUIでは使うが、投稿には挿入させたくないアイコンを持つプラグインでは、この使い分けが効いてきます。管理バーやメニュー用のアイコンは、Core側がcore-adminコレクションで持つようになりました。

Beta 1の前にやること

管理画面用のCSSやJSで、Coreアイコンへfillを指定している箇所を検索する。見つかったらcolorに替える。
Accordion・Tabs・Post Templateを使うテーマは、リンクの色が意図どおりかをGutenberg最新版で見る。
@wordpress/componentsの非推奨5つの使用箇所を洗い出す。
テストは、WordPress trunkと最新のGutenbergを入れたローカル環境、またはブラウザで動くPlaygroundで行う。

なお、Developer Blogの7.2ロードマップの項目は「積極的に取り組まれているが、最終リリースに必ず入るとは限らない」と注記されています。ここで挙げたGutenberg 24.1の変更については、同記事は7.2の前に確認するよう勧めています。

エラーが出ないぶん見落としやすいアイコンの変更

例外が出る変更なら気づけますが、色が変わらないだけの変更は、画面を見るまで気づけません。管理画面を拡張するプラグインでは、アイコンの色がそろわないという形で影響が表に出ると考えられます。点検するときは、@wordpress/iconsや@wordpress/componentsのアイコンにクラスを当てているCSSを探し、そこにfillの指定がないかを見るのが近道でしょう。自前のSVGに当てているfillは今回の変更の対象外なので、検索にかかっても、そのまま残して構いません。あわせて、package.jsonで@wordpress/iconsと@wordpress/componentsのバージョンがずれていないかも確かめておくと、Beta 1で色以外の見た目が崩れる事態を避けやすくなります。