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

Submitted

Created on September 16, 2022

Prio	Original string	Translation	—
	A powerful new way to style your site	Mehr Power für das Design deiner Website	Details
A powerful new way to style your site A powerful new way to style your site Mehr Power für das Design deiner Website Mehr Power für das Design deiner Website You have to log in to edit this translation. or Cancel Translation Memory Loading… Meta Status: current Date added: 2022-09-16 14:20:46 GMT Translated by: Polly (pollyween) Priority: normal More links: Permalink to this translation All translations of this original Show all translations across locales Show original across locales Show all deliverables with this original (de) Show all deliverables with this original (overview) View deliverable: Limit Global Styles: Show modal after opening the styles panel
	Try it out	Testen	Details
Try it out Try it out Testen Testen You have to log in to edit this translation. or Cancel Translation Memory Loading… Meta Status: current Date added: 2022-09-16 14:21:34 GMT Translated by: Polly (pollyween) Priority: normal More links: Permalink to this translation All translations of this original Show all translations across locales Show original across locales Show all deliverables with this original (de) Show all deliverables with this original (overview) View deliverable: Limit Global Styles: Show modal after opening the styles panel

Legend:

Current

Waiting

Fuzzy

Old

With warnings

Export strings as

Description

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

Unfortunately, no screenshots were provided by the developer.

Show less Show more | Github Pull request