Components: complete Gridicon → @wordpress/icons migration (continues #48164)#48537
Components: complete Gridicon → @wordpress/icons migration (continues #48164)#48537
Conversation
…ges with @wordpress/icons Replace all usages of the Gridicon component exported from @automattic/jetpack-components with the Icon component and named icons from @wordpress/icons. Removes the Gridicon component from js-packages/components entirely.
Add changelog entries for js-packages/components, packages/search, packages/my-jetpack, packages/jetpack-mu-wpcom, plugins/jetpack, and plugins/protect.
The previous commit dropped the Gridicon export from @automattic/jetpack-components but missed this consumer, breaking Storybook with "does not provide an export named 'Gridicon'". Add @wordpress/icons as a Boost dependency, swap lock and checkmark to the equivalent named exports.
After the Gridicon → @wordpress/icons swap, SimpleNotice expects an icon object (not a Gridicon name string). The notice-box consumer still passed 'info-outline' which would render nothing. Switch to the @wordpress/icons info export.
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
github-actions
Bot
added
[JS Package] Components
[Package] Jetpack mu wpcom
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Boost plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Protect plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
github-actions
Bot
added
the
[Status] Needs Author Reply
| <Button href={ siteUrl } target="_blank" className="launched__modal-view-site"> | ||
| <Gridicon icon="domains" size={ 18 } /> | ||
| <Icon icon={ globe } size={ 18 } /> |
There was a problem hiding this comment.
You might want Button with icon here instead. Do check if launched__modal-view-site had some icon-positional styles which can then also be removed.
There was a problem hiding this comment.
Done in 428c605. Kept the inner <span class="launched__modal-view-site-text"> so the existing typography rules (font-weight, font-size, line-height, white-space) still apply — those would be lost otherwise. Open question for follow-up: the parent .launched__modal-view-site still has display: flex; gap: $grid-unit-05 which is now redundant (Button does its own flex internally for the icon+text). Worth a separate pass to clean up the SCSS.
CGastrell
added
[Status] In Progress
and removed
[Status] Needs Author Reply
| <a { ...attributes }> | ||
| <span>{ this.props.children }</span> | ||
| { this.props.icon && <Gridicon icon={ this.props.icon } size={ 24 } /> } | ||
| { this.props.external && <Gridicon icon="external" size={ 24 } /> } | ||
| { this.props.external && <Icon icon={ externalIcon } size={ 24 } /> } | ||
| </a> |
There was a problem hiding this comment.
Might make sense to replace with Link and openInNewTab as you get the icon for free. Otherwise lots of these external links just use ↗ ascii instead of icon.
There was a problem hiding this comment.
Good idea but I'd like to defer this one. It's a structural rewrite rather than a Gridicon swap:
- Replaces the underlying
<a>with<Link>from@wordpress/ui(search currently doesn't depend on@wordpress/ui— would add a dep). Linkbrings its own CSS (variant/tone, focus ring, link-icon span) on top of the existing.dops-notice__actionclass — possible visual delta on every existing notice.- Behavioral surface (a11y label for the auto
↗, focus styles) differs.
I'd rather ship the icon swap as-is for this PR (it's a like-for-like Gridicon → @wordpress/icons replacement) and open this Link migration as a separate follow-up so we can review/QA it on its own.
There was a problem hiding this comment.
Thinking more, the whole Search dashboard notice component doesn't make sense to keep. :-D
The more top-level you replace these things, you don't need to spend time swapping icons and components within them. ;-)
| <Button onClick={ onClose } className="modal-survey-notice__popup-head-close"> | ||
| <Gridicon icon="cross" size={ 16 } /> | ||
| <Icon icon={ close } size={ 16 } /> | ||
| </Button> |
There was a problem hiding this comment.
This looks like <Button icon={ close } /> out of the box would work since it's wp-components Button.
There was a problem hiding this comment.
Done in 428c605. Switched to <Button icon={ close } iconSize={ 16 } label={ __( 'Close', 'jetpack' ) } /> and dropped the now-unused Icon import. Added label so the now-icon-only button keeps an accessible name (it had implicit one via the SVG title before).
Code Coverage SummaryCoverage changed in 1 file.
|
1. boost-score-bar tests queried for `.gridicons-phone` / `.gridicons-computer` CSS classes that no longer exist after the swap to wp-icons desktop / mobile. Replace with a presence check on the SVG inside `.jb-score-bar__label`. 2. The Boost rna-gridicon changelog used "Type: enhancement", but the Boost project's changelogger only accepts security / added / changed / deprecated / removed / fixed. Switch to patch + changed.
Two trivial cleanups suggested in #48537 review: - sso.jsx: SSO survey close button — replace Button + child <Icon /> with <Button icon={close} iconSize={16} />. Adds an explicit `label` for the now-icon-only button so its accessible name stays present. - celebrate-launch-modal.js: "View site" button — same pattern. Keep the inner <span class="launched__modal-view-site-text"> so the existing typography rules (font-weight / size / line-height / white-space) still apply. Drop the now-unused Icon import from sso.jsx. A third suggestion (search NoticeAction → @wordpress/ui Link) was deferred — it's a structural rewrite (adds @wordpress/ui dep, changes underlying CSS / a11y / focus), not a Gridicon swap. Tracking separately.
Replace the local SimpleNotice + NoticeAction wrappers with Notice.* from @wordpress/ui across the search dashboard: - record-meter/notice-box: tier notices use Notice.Root/Title/Description + Notice.Actions/ActionLink (openInNewTab); the legacy jp-search-notice-box__important class becomes intent="error". - pages/sections/first-run-section: indexing notice uses Notice.Root/Title/ Description. - global-notices: snackbar notices use Notice.Root + Notice.Description + Notice.CloseIcon, with auto-dismiss preserved via a useEffect timer. Status strings remain in the redux store; mapped to wp-ui intents at render. Drops vestigial fields the redux notice creators never set anyway (isCompact, isPersistent, displayOnNextPage, notice.button/href). Deletes the SimpleNotice/NoticeAction sources, their stylesheets, and notice-box.scss; strips the dead .dops-notice* overrides from global-notices/style.scss while keeping the snackbar positioning rules. Removes one site of @automattic/jetpack-components Gridicon usage (SimpleNotice's icon-wrapper) — helps the broader modernization sweep. Follow-up to simison review feedback on #48537.
2 participants
Continues #48164 (by @simison) — see "Relationship to #48164" below.
Part of #48160 (UI Modernization).
Proposed changes
Gridiconcomponent from@automattic/jetpack-componentsand replace every consumer with<Icon />+ named exports from@wordpress/icons. Original work by @simison in Replace RNA Gridicon with wp-ui Icon #48164 — those two commits are preserved unchanged in this branch.plugins/boost/.../performance-history/graph-component/graph-component.tsxstill imported and rendered<Gridicon icon="lock" />and<Gridicon icon="checkmark" />. Without this, the Storybook build fails withdoes not provide an export named 'Gridicon'. Adds@wordpress/iconsas a Boost dependency and swaps to<Icon icon={ lock } />/<Icon icon={ check } />.packages/search/.../record-meter/notice-box.jsx: it passedicon={ 'info-outline' }(a Gridicon name string) to<SimpleNotice>, which after the migration expects an icon object. Passicon={ info }from@wordpress/iconsinstead.Visual mapping
Side-by-side comparison of every Gridicon being removed against its
@wordpress/iconsreplacement. Same fill colour, same 32×32 box, no surrounding chrome — what you see here is exactly the SVG that ships. In production the icons inherit color from their consuming component (status notices use blue/green/amber via.dops-noticeCSS, etc.).Icon name mapping (text reference)
@wordpress/iconsreplacementcrossclosechevron-left/chevron-rightchevronLeft/chevronRightcomputer/phonedesktop/mobiledomainsglobeinfo/info-outlineinfoexternalexternalsearchsearchlocklockcheckmark/checkchecknotice(status mapping)cautionhelp-outlinehelpRelated product discussion/links
Does this pull request change what data or activity we track or use?
No.
Testing instructions
git log trunk..HEADshows 4 commits: 2 by @simison (preserved unchanged), 2 follow-ups by @CGastrell (Boost completion + Search consumer fix).Section A — full-page no-regression captures
These were captured against
localhostDocker (Jetpack connected, no Search/Boost premium, no Protect threats, Offline Mode active). Most migrated icons aren't visible on these pages without their gating subscription/state, so the value is "page renders without regression" rather than "you can see the new icon." The visual mapping above is the authoritative icon-shape evidence.Click to expand — 6 before/after page pairs
1. My Jetpack overview —
/wp-admin/admin.php?page=my-jetpack2. Boost dashboard —
/wp-admin/admin.php?page=jetpack-boost3. Protect / Scan tab —
/wp-admin/admin.php?page=jetpack-protect#/scan4. Protect / Firewall tab —
/wp-admin/admin.php?page=jetpack-protect#/firewall5. Jetpack legacy at-a-glance dashboard —
/wp-admin/admin.php?page=jetpack#/dashboard6. Jetpack legacy Security / SSO settings —
/wp-admin/admin.php?page=jetpack#/securitySection B — surfaces NOT reachable in a standard local Docker site
These need a Jurassic Ninja site (or wpcom env) with the relevant subscription / plan / state. Reviewer help here is appreciated.
/wp-admin/admin.php?page=my-jetpack(Protect product card)jetpack_protect_statusoption)/wp-admin/admin.php?page=jetpack-searchinfo-outline→info)search,cross)search)info)lock(free-tier upgrade prompt)/wp-admin/admin.php?page=jetpack-boostcheck(just-upgraded popover)/wp-admin/admin.php?page=jetpack-protect#/firewallcross→close)/wp-admin/admin.php?page=jetpack#/securitySection C — what was caught during this rescue (changes from the original #48164)
graph-component.tsx, lock & checkmark icons) — without this fix, Storybook CI fails. Added@wordpress/iconstoplugins/boost/package.json.notice-box.jsx) —SimpleNoticenow expects an icon object; one consumer was still passing'info-outline'. Changed to pass theinfoimport.SimpleNotice.propTypeschange (PropTypes.string→PropTypes.object) and removal ofNoticeAction.iconare kept as in the original PR — verified that no in-tree consumer was relying on either.Relationship to #48164
git logshows them attributed to Mikael Korpela).