Workflow: Replace cmdk with the @wordpress/ui Autocomplete primitive

[t-hamano]

Part of #76950

What?

Rebuilds the experimental workflow palette on top of the Autocomplete primitive from @wordpress/ui, replacing cmdk.

Why?

Both the command palette and the workflow palette are built on cmdk. The library has unresolved accessibility issues, and its repository has seen almost no activity. Autocomplete should be able to cover the same ground, and doing so should resolve those issues.

How?

The command palette also owns dynamic command loaders and recently used commands, which makes it a larger change. The workflow palette is far simpler, so it goes first.

Testing Instructions

Enable the Workflow Palette experiment, and open the browser console and run the following to register test abilities:

Test abilities

( () => {
	const { registerAbility, registerAbilityCategory } = wp.data.dispatch( 'core/abilities' );

	registerAbilityCategory( 'sandbox', {
		label: 'Sandbox',
		description: 'Throwaway abilities for testing the palette.',
	} );

	const addAbility = ( name, label, callback ) =>
		registerAbility( {
			name: `sandbox/${ name }`,
			label,
			description: `Test ability: ${ name }`,
			category: 'sandbox',
			callback: callback ?? ( async () => ( { ok: true } ) ),
		} );

	addAbility( 'test', 'Test ability' );

	addAbility( 'long-label', 'Regenerate every single navigation menu, template part and global style variation registered by the active block theme, then flush the object cache' );

	addAbility( 'long-token', `Token ${ 'A'.repeat( 120 ) }` );

	addAbility( 'markup', '<script>alert(1)</script> & <b>bold</b>' );

	addAbility( 'slow', 'Slow ability (3s)', async () => {
		await new Promise( ( r ) => setTimeout( r, 3000 ) );
		return { finished: true };
	} );

	addAbility( 'failing', 'Failing ability', async () => {
		throw new Error(
			'Something went wrong while talking to the remote service. '.repeat( 6 )
		);
	} );

	addAbility( 'huge-output', 'Huge JSON output', async () => ( {
		items: Array.from( { length: 120 }, ( _, i ) => ( {
			id: i,
			token: 'x'.repeat( 90 ),
		} ) ),
	} ) );

	for ( let i = 1; i <= 10; i++ ) {
		addAbility( `bulk-${ i }`, `Bulk ability ${ String( i ).padStart( 3, '0' ) }` );
	}
} )();

• Open the palette with Ctrl+J (Windows/Linux) or ⌘+J (macOS).
• Typing should filter the list.
• Type a random string and confirm the "No results found." state appears.
• Click an item and confirm the ability runs as before, including the slow, failing and large-output cases.

Testing Instructions for Keyboard

• Turn on a screen reader.
• Opening the palette should announce the highlighted item along with the number of items, for example Test ability, 1 of 20.
• Filtering should re-announce the first match and the number of matches, for example Bulk ability 001, 1 of 10.
• ↑ / ↓ should move through the list, Enter should run the highlighted ability, and Esc should close the palette.

Screenshots or screencast

Status	Before	After
Default
Filtered
No results found
Executing ability

Use of AI Tools

The refactor and the test snippet above were written with Claude Code (Opus). The result has been reviewed and manually tested, including with a screen reader.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 3d53bbee-3af6-4705-bef4-0da2266441a6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +63.2 kB (+0.79%)

Total Size: 8.07 MB

📦 View Changed

Filename	Size	Change
build/modules/workflow/index.min.js	81.8 kB	+63.2 kB (+338.99%)	🆘

_{8f40861 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	de22b44	trunk	% Change
timeToFirstByte	60.9 ms +13.05% -8.21%	64.55 ms +3.02% -11.7%	-5.65%
largestContentfulPaint	96 ms +6.25% -4.17%	100 ms +2% -4%	-4%
lcpMinusTtfb	33.8 ms +19.67% -7.99%	32.55 ms +24.42% -4.76%	3.84%
wpBeforeTemplate	31.68 ms +10.86% -10.64%	33.8 ms +4.91% -17.69%	-6.27%
wpTemplate	24.67 ms +7.01% -3.81%	25.94 ms +2.62% -4.74%	-4.9%
wpTotal	56.55 ms +13.05% -7.82%	60.07 ms +2.18% -11.2%	-5.86%
wpMemoryUsage	7.52 MB +0% -0%	7.48 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	de22b44	trunk	% Change
timeToFirstByte	47.05 ms +9.25% -7.76%	43.5 ms +14.83% -2.41%	8.16%
largestContentfulPaint	94 ms +4.26% -6.38%	88 ms +11.36% -0%	6.82%
lcpMinusTtfb	45.8 ms +3.6% -1.2%	45.7 ms +2.3% -1.86%	0.22%
wpBeforeTemplate	27.67 ms +18.76% -6.9%	26.17 ms +12.3% -2.45%	5.73%
wpTemplate	14.72 ms +5.57% -3.74%	14.24 ms +6.32% -1.4%	3.37%
wpTotal	43.74 ms +8.76% -7.66%	40.38 ms +13.32% -1.93%	8.32%
wpMemoryUsage	5.51 MB +0% -0%	5.47 MB +0% -0%	0.65%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	de22b44	trunk	% Change
mediaProcessingJpeg	402.74 ms +1.93% -0.36%	405.92 ms +0.37% -0.68%	-0.78%
mediaProcessingAvif	6200.73 ms +0.39% -0.24%	6196.54 ms +0.11% -0.23%	0.07%
mediaProcessingJpegToAvif	4410.47 ms +0.41% -0.26%	4385.5 ms +0.23% -0.1%	0.57%

media-upload

Metric	de22b44	trunk	% Change
jpegUploadProcessing	1438.03 ms +35.75% -2.35%	1428.03 ms +0.49% -0.71%	0.7%
pngUploadProcessing	214.9 ms +2.24% -2.87%	216.29 ms +7.74% -6.36%	-0.64%
largeJpegUploadProcessing	1410.45 ms +0.91% -0.93%	1415.93 ms +0.47% -0.53%	-0.39%
multipleImageUploadProcessing	1559.96 ms +0.87% -1.32%	1559.76 ms +2.14% -0.93%	0.01%

post-editor

Metric	de22b44	trunk	% Change
serverResponse	523.91 ms +3.66% -1.69%	560.26 ms +1.32% -3.7%	-6.49%
firstPaint	246.41 ms +32.54% -7.11%	217 ms +16.95% -11.02%	13.55%
domContentLoaded	1368.65 ms +3.32% -1.39%	1370.42 ms +0.57% -0.84%	-0.13%
loaded	1370.07 ms +3.34% -1.37%	1371.9 ms +0.55% -0.86%	-0.13%
firstContentfulPaint	468.4 ms +0.22% -3.06%	455.42 ms +2.43% -2.76%	2.85%
firstBlock	3755.94 ms +0.92% -1.85%	3755.15 ms +0.39% -0.88%	0.02%
type	16.05 ms +9.1% -4.74%	15.25 ms +4.39% -3.67%	5.25%
typeWithoutInspector	16.43 ms +3.41% -8.09%	16.08 ms +4.23% -1.68%	2.18%
typeWithTopToolbar	19.55 ms +8.7% -2.71%	19.79 ms +5.71% -8.54%	-1.21%
typeContainer	10.56 ms +13.07% -5.59%	10.74 ms +2.14% -13.69%	-1.68%
focus	91.37 ms +24.49% -12.45%	90.82 ms +4.37% -6.97%	0.61%
firstFocus	192.24 ms +0% -0%	175.74 ms +0% -0%	9.39%
selectAll	606.67 ms +1.97% -2.57%	666.14 ms +3.91% -0.35%	-8.93%
listViewOpen	72.64 ms +7.72% -2.2%	79.48 ms +10% -12.82%	-8.61%
inserterOpen	25.77 ms +4.81% -10.55%	24.44 ms +4.13% -5.69%	5.44%
inserterHover	4.41 ms +8.39% -6.35%	4.14 ms +13.04% -7.97%	6.52%
inserterSearch	8.84 ms +9.16% -9.39%	9.38 ms +4.48% -9.49%	-5.76%
loadPatterns	646.86 ms +4.39% -1.16%	684.86 ms +1.89% -2.58%	-5.55%
wpTotal	513.74 ms +3.67% -1.71%	549.72 ms +1.38% -3.71%	-6.55%
wpMemoryUsage	13.06 MB +0% -0%	13.02 MB +0% -0%	0.28%
wpDbQueries	53.5 +0.93% -0.93%	54 +0% -1.85%	-0.93%

site-editor

Metric	de22b44	trunk	% Change
serverResponse	399.65 ms +3.28% -6.35%	413.8 ms +1.18% -5.07%	-3.42%
firstPaint	241.4 ms +8.04% -14.76%	213.76 ms +30.42% -9.45%	12.93%
domContentLoaded	1258 ms +0.69% -0.52%	1259.5 ms +1.98% -0.98%	-0.12%
loaded	1259.07 ms +0.69% -0.52%	1260.55 ms +1.98% -0.98%	-0.12%
firstContentfulPaint	406.37 ms +1.2% -4.28%	398.93 ms +9.24% -2.46%	1.86%
firstBlock	3908.8 ms +0.5% -0.42%	3854.65 ms +0.63% -0.48%	1.4%
type	14.43 ms +1.46% -8.25%	14.21 ms +10.63% -7.39%	1.55%
navigate	92.17 ms +5.75% -5.71%	99.82 ms +7.15% -4.33%	-7.66%
loadPatterns	1467.46 ms +7.13% -8.15%	1552.54 ms +5.82% -5.64%	-5.48%
loadPages	1129.85 ms +3.94% -3.68%	1154.6 ms +5.2% -7.94%	-2.14%
wpTotal	389.84 ms +3.38% -6.49%	404.42 ms +1.09% -5.27%	-3.61%
wpMemoryUsage	12.07 MB +0% -0%	12.04 MB +0% -0%	0.24%
wpDbQueries	43 +2.33% -0%	43.5 +1.15% -1.15%	-1.15%

_{8f40861 Run}

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

Since the options are filtered from the typed text, mode="none" makes the input expose the wrong aria-autocomplete value.

Should we keep the external filtering but use list autocomplete semantics? Potentially with filteredItems? So that screen readers are told that matching suggestions are available