Command Palette: Command Palette App

[rcrdortiz]

Related to:

• https://github.com/Automattic/dotcom-forge/issues/5493 Depends on:
• https://github.com/Automattic/wp-calypso/pull/87790

Proposed Changes

• Create a command palette app that can be consumed.

Testing Instructions

• Open the live link and check that there are no regressions when using the command palette.
• On Atomic sites you can load the command palette with https://github.com/Automattic/jetpack/pull/35635
• Check that the command palette works on Atomic sites as expected (the command list isn't complete)
• Load the code from https://github.com/Automattic/jetpack/pull/35635 on your sandbox and check on wp-admin that the command palette is working.

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99043

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99043&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~459 bytes added 📈 [gzipped])

name                                   parsed_size           gzip_size
async-load-automattic-command-palette      +4080 B  (+4.8%)     +459 B  (+1.7%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mmtr]

I don't get this work on Simple sites. The script is definitely loaded, but when I press ⌘K, nothing shows up:

[dsas]

I don't get this work on Simple sites. The script is definitely loaded, but when I press ⌘K, nothing shows up

Fixed it over in jetpack-mu on https://github.com/Automattic/jetpack/pull/35635/commits/e08dce47f855a0bc6163f6a7aa9775c2d53b0976 but it's still not 100%

[dsas]

The CSS file is being fetched, but for some reason the styles it has aren't being applied. I've tried a bunch of stuff but haven't got anywhere. I'm going to call it a day on that, because it seems like the two of you have some experience with it.

[mmtr]

We need to disable the API call to the /sites endpoint made by the package

This is something we can tackle on a follow-up too. Right now is fine to have a broken WP Admin app.

[rcrdortiz]

The CSS file is being fetched, but for some reason the styles it has aren't being applied. I've tried a bunch of stuff but haven't got anywhere. I'm going to call it a day on that, because it seems like the two of you have some experience with it.

Fixed on the PR about loading the command palette.

[mmtr]

@tyxla do you have any idea why the TC "Build Calypso Apps" script is failing with this error? It looks totally unrelated to the changes here.

/home/teamcity-3/buildAgent/work/c4a9d5b38c1dacde/client/devdocs/design/wordpress-components-gallery/card.tsx SyntaxError: /home/teamcity-3/buildAgent/work/c4a9d5b38c1dacde/client/devdocs/design/wordpress-components-gallery/card.tsx: importSource cannot be set when runtime is classic.

I see you recently added the @jsxImportSource annotation in https://github.com/Automattic/wp-calypso/pull/86503/commits/36c02ca104399d03f3f8802fa6082dc36a858716

[tyxla]

@tyxla do you have any idea why the TC "Build Calypso Apps" script is failing with this error? It looks totally unrelated to the changes here.

/home/teamcity-3/buildAgent/work/c4a9d5b38c1dacde/client/devdocs/design/wordpress-components-gallery/card.tsx SyntaxError: /home/teamcity-3/buildAgent/work/c4a9d5b38c1dacde/client/devdocs/design/wordpress-components-gallery/card.tsx: importSource cannot be set when runtime is classic.

I see you recently added the @jsxImportSource annotation in 36c02ca

Yeah, I added this due to a TS error - emotion's css() types that come from @wordpress components seem to cause a TS2590: Expression produces a union type that is too complex to represent error.

I think we can fix this alternatively, though, without changing the jsxImportSource on runtime, so let me come up with an alternative.

[tyxla]

Here's a fix that should do it: https://github.com/Automattic/wp-calypso/pull/87894

I'll ship as soon as it's green. In the meantime, feel free to cherry-pick if you want to try it out quickly.

[tyxla]

Here's a fix that should do it: #87894

I'll ship as soon as it's green. In the meantime, feel free to cherry-pick if you want to try it out quickly.

Seems like it doesn't fix it as I had hoped, but I'll investigate further.

[tyxla]

Came up with an alternative fix in https://github.com/Automattic/wp-calypso/pull/87894 and just landed it. Feel free to rebase, and I expect everything should be green!

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• editing-toolkit
• happy-blocks
• notifications
• o2-blocks
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/command-palette-app on your sandbox.

[oswian]

Seeing a build error on trunk which appears related to this PR.