Limit Global Styles: Update the Pre-Save Notice

[rcrdortiz]

Proposed Changes

Fixes: https://github.com/Automattic/dotcom-forge/issues/1221

• Changed the copy of the pre-save notice.
• Stop showing the reset link in the notice's message.
• Refactor the observer that inserts the notice in the pre-save panel.

Before	After

Testing Instructions

• Setup:
  • Apply these changes to your sandbox: install-plugin.sh editing-toolkit update/gs-pre-save-panel-notice
  • Go to https://wordpress.com/start and create a new free site
  • Add the wpcom-limit-global-styles blog sticker to the new site: add_blog_sticker( 'wpcom-limit-global-styles', 'test', <YOUR_USERNAME>, <YOUR_BLOG_ID>).
  • Sandbox the new site.
• Open the Site Editor.
• Open the Global Styles sidebar.
• ⚠️ (check for regression) Ensure the paid Global Styles modal appears.
• Do some changes in the canvas (not on Global Styles just yet) and click "Save".
• ⚠️ Ensure the Global Styles notice does not appear.
• Do some changes to Global Styles and click "Save" again.
• ⚠️ Ensure the Global Styles notice appears and is appended to the correct entity.
• Try playing around with the Global Styles customizations and toggling the pre-save panel.
• ⚠️ Ensure the Global Styles notice behaves as expected (appears and disappears when it should).

Pre-merge Checklist

• Have you written new tests 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-ajp-p2)?

Related to #

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-3879cddc19a596938d76a4afa97f317bcdbfea8c

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-3879cddc19a596938d76a4afa97f317bcdbfea8c&env=jetpack

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/gs-pre-save-panel-notice on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[dsas]

This isn't working for me 🤔 The 'Are you ready to save' prompt displays but it does not display the warning about needing to upgrade for global styles. I do have the sticker enabled.

The console says

Uncaught TypeError: path is undefined
    trackGlobalStylesMenuSelected wpcom-block-editor-global-styles-menu-selected.js:18
    __WEBPACK_DEFAULT_EXPORT__ delegate-event-tracking.js:116
    __WEBPACK_DEFAULT_EXPORT__ delegate-event-tracking.js:111
    delegateCaptureListener tracking.js:865

[dsas]

Console message comes when switching to e.g. colours in the GS menu, so it's probably unrelated.

I get the same behaviour on blog 212978125 and 212976996 when testing via my sandbox.

Weirdly if I checkout out the branch locally and do a yarn dev --sync it does work 😕

[dsas]

Tried again after nuking my dev ETK and it works. I think earlier I had some dev ETK content on my sandbox and that was being used rather than the sandbox install (which goes to prod). sorry.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7650133

Thank you @rcrdortiz for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.