#7530734 Limit Global Styles: Show modal after opening the styles panel

Fixes 828-gh-Automattic/dotcom-forge

Proposed Changes

Displays a modal after opening the Global Styles panel in order to inform users that it’s a paid feature. It has been implemented as part of the Editing Toolkit plugin, so we can target both Simple and Atomic sites (although Atomic sites are deliberately excluded at this point because of its lack of blog stickers support).

Note that the gating function added in D87564-code has been moved to the ETK plugin as well.

Testing Instructions

• Apply these changes to your sandbox: install-plugin.sh editing-toolkit add/wpcom-global-styles-modal-paid-feature
• 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
• Go to https://wordpress.com
• Go to Appearance > Themes
• Activate a block theme such as Twenty-twenty Two
• Go to Appearance > Editor
• Open the Global Styles sidebar
• Make sure the paid Global Styles modal shows up
• Make sure it’s rendered as expected in both desktop and mobile viewports
• Make sure you can dismiss it by clicking on the X button or on the “Try it out” button
• Reload the site editor (since the modal is only displayed once per session)
• Open the Global Styles sidebar
• Make sure the “Upgrade plan” button redirects you to the plans page
• Switch to either:
  • A Free site created before 2022-09-12
  • A Free site created after 2022-09-12 without the blog sticker
  • A paid site created after 2022-09-12 with the sticker
• Make sure the paid Global Styles modal doesn’t show up

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)?