Dashboard: restrict widget icons to just SVGs (no dashicons)#78440
Conversation
|
Size Change: 0 B Total Size: 7.97 MB ℹ️ View Unchanged
|
3396532 to
a4f04ca
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| .widgetChromeHeaderIcon { | ||
| display: inline-flex; | ||
| color: var(--wpds-color-fg-content-neutral-weak); | ||
| color: var(--wpds-color-fg-content-neutral); |
There was a problem hiding this comment.
Not that I disagree but this seems a bit unrelated?
There was a problem hiding this comment.
Aye, totally sneaked it in just because it was just icon related 😁
retrofox
left a comment
There was a problem hiding this comment.
Using SVG icon for now sgtm. We can iterate later in order to support SVG from the server side
|
Flaky tests detected in a4f04ca. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26102064265
|
|
I'll see separately if we can enforce icon colors too. |
What?
Spin-off from #78060
@wordpress/icons)Why?
Supporting dashicons (like blocks do) would require us to use
Iconfrom@wordpress/iconsand which generally also means increased bytes loaded for everyone. If we just support SVGs (which@wordpress/iconsare) we're simplifying things and enforcing modern looking icons at dashboard.In future, we might be able to support backend-registered widgets with SVGs easily with a new API shaping up up at #78332
How?
Restrict by using
Iconfrom@wordpress/ui(which doesn't support dashicons) and by setting types to requires SVGs.Testing Instructions
String value at
widgets/hello-world/widget.tswould just fail to output an icon now. in thewidget.jsonyou need to temporarily remove"presentation": "full-bleed"to test the icon.Testing Instructions for Keyboard
Screenshots or screencast
Colour difference
Before

After

Use of AI Tools