Lint: use recommended components instead of deprecated Jetpack components by simison · Pull Request #49284 · Automattic/jetpack

simison · 2026-05-29T19:29:35Z

Pairs with #48487 where we direct folks to use @wordpress/ui instead of @wordpress/component library.

Proposed changes

As part of modernising componentry, there are plenty of duplicates in Jetpack primitive componentry that aren't justified, as we can just use @wordpress/ui or @wordpress/components instead.

The eslint rule discourages new_ usage of select Jetpack components & primitives; we list the current offending files in the exceptions list.

The list of Jetpack components here is a preliminary list, and can be extended later to include more Jetpack components.

In the denylist

These will trigger @automattic/jetpack/use-recommended-jetpack-components:

Export	Suggested replacement
`Alert`	`@wordpress/ui` `Notice`
`Button`	`@wordpress/ui` `Button`
`Chip`	`@wordpress/ui` `Badge`
`Col`	`@wordpress/ui` `Stack`
`Container`	`@wordpress/ui` `Stack`
`DecorativeCard`	`@wordpress/ui` `Card`
`Dialog`	`@wordpress/ui` `Dialog`
`DonutMeter`	`@automattic/charts` `PieChart`
`GlobalNotices`	`@wordpress/notices`
`globalNoticesStore`	`@wordpress/notices`
`H2`	`@wordpress/ui` `Text` (heading variant)
`H3`	`@wordpress/ui` `Text` (heading variant)
`IconTooltip`	`@wordpress/ui` `Tooltip` + `Icon`
`IndeterminateProgressBar`	`@wordpress/components` `Spinner` / `ProgressBar`
`NavigatorModal`	`@wordpress/ui` `Dialog` + `@wordpress/components` `Navigator`
`Notice`	`@wordpress/ui` `Notice`
`NumberControl`	`@wordpress/components` `__experimentalNumberControl`
`NumberSlider`	`@wordpress/components` `RangeControl`
`Popover`	`@wordpress/ui` `Popover`
`ProgressBar`	`@wordpress/components` `ProgressBar` / `Spinner`
`RadioControl`	`@wordpress/components` `RadioControl`
`Spinner`	`@wordpress/components` `Spinner`
`SplitButton`	`@wordpress/ui` `Button` (+ `Dropdown` if needed)
`Status`	`@wordpress/ui` `Badge`
`Text`	`@wordpress/ui` `Text`
`Title`	`@wordpress/ui` `Text`
`ToggleControl`	`@wordpress/components` `ToggleControl`
`useBreakpointMatch`	`@wordpress/viewport`
`useGlobalNotices`	`@wordpress/notices`

Subpath imports also flagged:

@automattic/jetpack-components/button
@automattic/jetpack-components/global-notices

Not in the denylist (allowed by this rule)

These exports from @automattic/jetpack-components are not flagged:

Branding / logos

JetpackLogo, JetpackSearchLogo, JetpackProtectLogo, JetpackVaultPressBackupLogo, JetpackVideoPressLogo
AutomatticBylineLogo, AutomatticIconLogo, AutomatticForAgenciesLogo
JetpackFooter

Jetpack-specific UI

ActionButton, ActionPopover
AdminPage, AdminSection, AdminSectionHero
BoostScoreBar, BoostScoreGraph
ContextualUpgradeTrigger
CopyToClipboard
DetailsViewer, DiffViewer, MarkedLines
DotPager, DonutMeter is in denylist - skip
LoadingPlaceholder
PricingCard, PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem
ProductOffer, IconsCard, ProductPrice
QRCode
RecordMeterBar
StatCard
Testimonials, TermsOfService
UpsellBanner
ZendeskChat
Gravatar
ThemeProvider

Icons (all allowed)

AntiSpamIcon, BackupIcon, BoostIcon, CrmIcon, ExtrasIcon, ProtectIcon, ScanIcon, SearchIcon, SocialIcon, VideopressIcon, StarIcon, CheckmarkIcon, ClipboardIcon, JetpackIcon, ShareIcon, AiIcon, StatsIcon, SocialServiceIcon
getIconBySlug, plus related types

Utilities / helpers

getRedirectUrl, getProductCheckoutUrl, isFirstMonthTrial
getUserLocale, cleanLocale

Types only (not typically linted as imports)

ButtonProps, GravatarProps, icon-related types

Related product discussion/links

p1780394658185679-slack-C0D96691V

Does this pull request change what data or activity we track or use?

Testing instructions

Lint passing
List of components makes sense, see Jetpack Storybook -> Components for details.

github-actions · 2026-05-29T19:30:40Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

simison · 2026-06-02T09:50:59Z

+		"H2": "Use `Text` with `variant=\"heading-*\"` from `@wordpress/ui` instead.",
+		"H3": "Use `Text` with `variant=\"heading-*\"` from `@wordpress/ui` instead.",


Would be good to map to a specific variants.

simison · 2026-06-02T09:58:02Z

+		"Testimonials": "Jetpack-specific component — remove from denylist to allow.",
+		"Text": "Use `Text` from `@wordpress/ui` instead.",
+		"ThemeProvider": "Use `@wordpress/theme` instead.",
+		"Title": "Use `Text` from `@wordpress/ui` instead.",


Would be good to pin a specific variant.

anomiex

Partial review: I didn't look at the code yet, just the structure being added.

github-actions · 2026-06-05T15:14:21Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/use-recommended-components-jetpack-comps branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/use-recommended-components-jetpack-comps

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/use-recommended-components-jetpack-comps

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

…ents

…nded-jetpack-components.test.cjs Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

jp-launch-control · 2026-06-05T15:30:02Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

keoshi

LGTM! Thanks for doing this!

One question: will this trigger warnings for all current gaps, or only when being touched? I'm concerned with the particular case of Col, which was created for a very specific purpose but not applicable today.

References:

Seems like there's not a ton left behind, but wanted to clarify that just so I understand the immediate consequences.

anomiex · 2026-06-08T16:06:42Z

 	"private": true,
 	"description": "Avoid cluttering the monorepo root with random JS script deps by putting them in a workspace. This is intended for simple scripts and third-party scripts that we will only run directly or from the monorepo root.",
+	"scripts": {
+		"test-eslint-plugin-jetpack": "node eslint-plugin-jetpack/tests/use-recommended-jetpack-components.test.mjs"


I note this isn't hooked up to be run in CI anywhere.

What you'd probably want is to add it into the list at

jetpack/composer.json

Lines 71 to 73 in 079abc4

"test-js": [

"cd tools/cli && pnpm test"

],

anomiex · 2026-06-08T16:09:34Z

+import { RuleTester } from 'eslint';
+import rule from '../rules/use-recommended-jetpack-components.mjs';
+
+const __dirname = path.dirname( fileURLToPath( import.meta.url ) );


Suggested change

const __dirname = path.dirname( fileURLToPath( import.meta.url ) );

const __dirname = import.meta.dirname;

Or just use that directly later.

anomiex · 2026-06-08T16:10:17Z

+	'..',
+	'..',
+	'..',
+	'eslint',
+	'jetpack-components-denylist.json'


Any particular reason not to just do

Suggested change

'..',

'..',

'..',

'eslint',

'jetpack-components-denylist.json'

'../../../eslint/jetpack-components-denylist.json'

?

anomiex · 2026-06-08T16:11:13Z

+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname( fileURLToPath( import.meta.url ) );


Suggested change

const __dirname = path.dirname( fileURLToPath( import.meta.url ) );

const __dirname = import.meta.dirname;

Or just use that directly later.

anomiex · 2026-06-08T16:12:38Z

+	'..',
+	'..',
+	'..',
+	'eslint',
+	'jetpack-components-denylist.json'


Any particular reason not to just do

Suggested change

'..',

'..',

'..',

'eslint',

'jetpack-components-denylist.json'

'../../../eslint/jetpack-components-denylist.json'

?

Also, I wonder why you don't move the file into the eslint-plugin-jetpack dir instead of having it at a completely different path.

anomiex · 2026-06-08T16:14:27Z

+	const jetpackComponentsDenylistPath = path.join(
+		rootdir,
+		'tools/eslint/jetpack-components-denylist.json'
+	);


Why not just let the rule use its default, which should be pointing to the exact same file?

github-actions · 2026-08-08T18:46:23Z

This PR has been marked as stale. This happened because:

It has been inactive for the past 3 months.
It hasn't been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Status] Keep Open`, etc.

If this PR is still useful, please do a [trunk merge or rebase](https://github.com/Automattic/jetpack/blob/trunk/docs/git-workflow.md#keeping-your-branch-up-to-date) and otherwise make sure it's up to date and has clear testing instructions. You may also want to ping possible reviewers in case they've forgotten about it. Please close this PR if you think it's not valid anymore — if you do, please add a brief explanation.

If the PR is not updated (or at least commented on) in another month, it will be automatically closed.

github-actions · 2026-09-09T01:07:09Z

This PR has been automatically closed as it has not been updated in some time. If you want to resume work on the PR, feel free to restore the branch and reopen the PR.

github-actions Bot added [Status] In Progress Docs labels May 29, 2026

github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label May 29, 2026

simison mentioned this pull request Jun 1, 2026

Eslint: fix ignored files #49310

Merged