Custom CSS: add deprecation warning for Start Fresh option #37193

monsieur-z · 2024-05-02T19:57:38Z

Proposed changes:

The Custom CSS feature will soon be deprecated from Jetpack.

In this PR, we're adding warnings for sites with the Start Fresh option enabled. Since this option prevents the site from loading the theme CSS, removing it will likely break the site design.

Site admins must take action, so these warnings must be visible. We've added them in 4 different places:

The Customizer
At the top of the Jetpack Dashboard and Settings pages
In the Custom CSS section of the Settings page
At the top of the frontend of the site, for admins only

Simple and atomic sites are not concerned by this.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

pfwV0U-4M-p2

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Prerequisites

Spin up a test site with this branch
Install a classic theme (i.e. non block-based) such as Twenty Eleven
Connect Jetpack
Search for the Custom CSS section in the settings page: /wp-admin/admin.php?page=jetpack#/settings?term=css
Enable the CSS customization panel enhancement

Go to the Additional CSS section of the Customizer: /wp-admin/customize.php?autofocus%5Bsection%5D=custom_css
Enable the Start Fresh option

Notices

Refresh the page
Notice the warning at the top of the Customizer sidebar

Go back to the Custom CSS section in the settings section: /wp-admin/admin.php?page=jetpack#/settings?term=css
Verify it now displays a warning

Check that a similar warning is shown at the top of the page (in the Settings and Dashboard pages)

Visit the frontend of the site: check that you see a notice when you're authenticated as an admin only

In the Customizer, disable the Start Fresh option
Check the warnings are not displayed anymore
Optionally, test that the notices do not appear on simple and atomic sites, since the option will still be available in these instances

github-actions · 2024-05-02T19:58:49Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for July 2, 2024 (scheduled code freeze on July 1, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

github-actions · 2024-05-02T19:59:00Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the update/custom-css-start-fresh-warning branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/custom-css-start-fresh-warning

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

monsieur-z · 2024-05-02T20:41:11Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

@@ -30,6 +30,7 @@ public static function add_hooks() {
 		add_action( 'load-revision.php', array( __CLASS__, 'load_revision_php' ) );

 		add_action( 'wp_enqueue_scripts', array( __CLASS__, 'wp_enqueue_scripts' ) );
+		add_action( 'admin_footer', array( __CLASS__, 'update_initial_state' ) );


I don't know if that's the most appropriate hook to use. Let me know if there's a more suited one.

monsieur-z · 2024-05-02T20:44:22Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

+	 */
+	public static function update_initial_state() {
+		$start_fresh = null;
+		// $wp_customize is not available here. Let's get the value of the `replace` option from the last


Since $wp_customize is unavailable here, I had to go with a more imperative approach to fetch the value of the Start Fresh option. Let me know if there's a better alternative.

monsieur-z · 2024-05-02T20:46:27Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

+			'react-plugin',
+			"
+try {
+	var options = window.Initial_State?.getModules?.['custom-css']?.options || {};


This seems the most straightforward way to make the value of the Start Fresh option available to client pages (the Customizer case is handled separately).

coder-karen · 2024-05-03T07:45:23Z

projects/plugins/jetpack/_inc/client/writing/custom-css.jsx

+			i: <i />,
+			b: <b />,
+			a1: <CustomizerLink siteAdminUrl={ siteAdminUrl } />,
+			a2: <a href="https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/" />,


As it's an external link, should this open in a new tab instead, with rel="noopener noreferrer" and target="_blank"?

Maybe we could rely on ExternalLink here, to handle both the display and the markup at once?

coder-karen · 2024-05-03T08:00:55Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

+					'contentWidth'                => $content_help,
+					'revisions'                   => _x( 'See full history', 'Toolbar button to see full CSS revision history', 'jetpack' ),
+					'css_help_title'              => _x( 'Help', 'Toolbar button to get help with custom CSS', 'jetpack' ),
+					'startFreshCustomizerWarning' => __( "The Start Fresh option in the Additional CSS panel is enabled, which means the theme's original CSS is not applied. This option will no longer be supported.", 'jetpack' ),


With this, along with StartFreshDeprecationWarning, I wonder if we may need design/marketing input on the wording itself here? The part I am stumbling on in particular is 'This option will no longer be supported.' - I wonder if we need to allude to a sense of urgency even if not giving a date.

Yes, I came here to suggest the same thing. I think we need a date for it to be really useful. I would recommend giving a date matching the July or August monthly release (first Tuesday of the month) to give folks time to make the changes.

jeherve

Building on @coder-karen 's comment about wording and timing, I think it may be worth asking folks on Jetpack Design for their input on wording and the best combination of messages to ensure folks understand:

How and when the Custom CSS feature is going away
What that means for them
If they have to take action (i.e. if they use the start fresh), what they should do.

It may be worth p2'ing this on their p2 to get their full input on it maybe, so they can work on the different possible flows?

jeherve · 2024-05-06T13:14:18Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

@@ -724,6 +731,8 @@ public static function customize_register( $wp_customize ) {
 			}
 		}

+		$deprecated_suffix = ' (' . __( 'deprecated', 'jetpack' ) . ')';


I think it may be best to edit the strings directly to add "(deprecated)". It will make easier for translators to provide meaningful, since not all languages would use this "term (deprecated)" format in the first place (RTL languages come to mind).

Yes, that will mean the strings will become untranslated for a bit, but I think it would still be a better experience in the end.

jeherve · 2024-05-06T13:17:03Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

+	/**
+	 * Update the initial state to include the `replace` option (Start Fresh) in the module data.
+	 */
+	public static function update_initial_state() {


Since this is only meant to be useful in the Jetpack dashboard, I think we should limit it to that page. We don't want to run a posts query on dashboard pages where it won't be used.

Hooking into admin_enqueue_scripts instead of admin_footer should give you more control there.

admin_enqueue_scripts won't work: the call to wp_add_inline_script in the callback will fail. But I could check the current page and bail out early if it's not the Jetpack dashboard.

jeherve · 2024-05-06T13:20:48Z

projects/plugins/jetpack/modules/custom-css/custom-css.php

+					'contentWidth'                => $content_help,
+					'revisions'                   => _x( 'See full history', 'Toolbar button to see full CSS revision history', 'jetpack' ),
+					'css_help_title'              => _x( 'Help', 'Toolbar button to get help with custom CSS', 'jetpack' ),
+					'startFreshCustomizerWarning' => __( "The Start Fresh option in the Additional CSS panel is enabled, which means the theme's original CSS is not applied. This option will no longer be supported.", 'jetpack' ),


Yes, I came here to suggest the same thing. I think we need a date for it to be really useful. I would recommend giving a date matching the July or August monthly release (first Tuesday of the month) to give folks time to make the changes.

monsieur-z · 2024-05-14T14:53:20Z

I've updated the link the notices, and added a notice in the frontend. I've updated the instructions accordingly.

coder-karen

On self hosted this looks good :)

As for an Atomic test site though (WoA dev site using rsync, and regular AT site using the beta tester plugin), I noticed that the dashboard notices weren't showing up. After digging a bit further, that appears to be because this.props.startFreshEnabled returns false when it should be true.

If this is replicable I think personally we'd want notices to display on the dashboard for Atomic sites as well, if it's possible.

monsieur-z · 2024-05-23T18:08:07Z

Thanks @coder-karen!

As for an Atomic test site though (WoA dev site using rsync, and regular AT site using the beta tester plugin), I noticed that the dashboard notices weren't showing up.

Interesting. I haven't been able to reproduce the issue on a regular AT site. Did you hit the Publish button in the Customizer after checking the option?

As for WoA sites, they shouldn't be impacted by this PR since they load their own plugin instead of the Jetpack module.

monsieur-z · 2024-06-21T20:18:00Z

Instructions updated. PR's ready for review.

…-customizer-css.core-4.9.js Co-authored-by: Karen Attfield <karenlattfield@gmail.com>

sergeymitr

Works well, looks great 👍

github-actions bot added [Feature] Custom CSS [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress Admin Page React-powered dashboard under the Jetpack menu labels May 2, 2024

monsieur-z commented May 2, 2024

View reviewed changes

monsieur-z marked this pull request as ready for review May 2, 2024 20:46

monsieur-z requested a review from a team May 2, 2024 20:46

monsieur-z self-assigned this May 2, 2024

monsieur-z added [Status] Needs Team Review and removed [Status] In Progress labels May 2, 2024

coder-karen reviewed May 3, 2024

View reviewed changes

jeherve reviewed May 6, 2024

View reviewed changes

monsieur-z added [Status] In Progress and removed [Status] Needs Team Review labels May 10, 2024

monsieur-z force-pushed the update/custom-css-start-fresh-warning branch from 5b038c8 to 82fca2d Compare May 14, 2024 14:40

monsieur-z requested review from a team, coder-karen and jeherve May 14, 2024 14:52

monsieur-z added [Status] Needs Team Review and removed [Status] In Progress labels May 14, 2024

coder-karen reviewed May 15, 2024

View reviewed changes

fgiannar added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Team Review labels May 20, 2024

monsieur-z force-pushed the update/custom-css-start-fresh-warning branch from 82fca2d to 39e9f61 Compare May 23, 2024 18:08

monsieur-z enabled auto-merge (squash) June 3, 2024 19:44

monsieur-z added [Status] In Progress and removed [Status] Needs Team Review labels Jun 7, 2024

monsieur-z mentioned this pull request Jun 7, 2024

Forms Block: Cannot add more than two entries to Dropdown Field #37565

Closed

monsieur-z force-pushed the update/custom-css-start-fresh-warning branch from a756659 to bcf4250 Compare June 21, 2024 18:51

monsieur-z added [Status] Needs Team Review and removed [Status] In Progress labels Jun 21, 2024

monsieur-z requested review from a team, darssen and coder-karen June 21, 2024 20:18

monsieur-z and others added 13 commits June 25, 2024 08:51

Custom CSS: add deprecation warning for Start Fresh option

0a1d47b

Fix Phan warning

c87dc54

Make wordpress.org link external

ac4568b

Add deprecation date

a7a4d24

Include deprecated mention in label

4905781

Update initial state in the Jetpack dashboard and settings only

54d13cf

Add warning in the frontend

69a3a12

Update notice content

0646fc9

Add missing check for the FE warning

a9dbb70

Inline styles

c8329b8

Quit early start fresh check for block based themes

ddbe820

Update projects/plugins/jetpack/modules/custom-css/custom-css/js/core…

7668289

…-customizer-css.core-4.9.js Co-authored-by: Karen Attfield <karenlattfield@gmail.com>

Revert blank.css

7651571

monsieur-z force-pushed the update/custom-css-start-fresh-warning branch from 7c6ff0f to 7651571 Compare June 25, 2024 12:52

sergeymitr approved these changes Jun 26, 2024

View reviewed changes

monsieur-z merged commit cca4617 into trunk Jun 26, 2024
56 checks passed

monsieur-z deleted the update/custom-css-start-fresh-warning branch June 26, 2024 12:59

sergeymitr removed the [Status] Needs Team Review label Jun 26, 2024

github-actions bot added this to the jetpack/13.6 milestone Jun 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom CSS: add deprecation warning for Start Fresh option #37193

Custom CSS: add deprecation warning for Start Fresh option #37193

monsieur-z commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading

monsieur-z May 2, 2024

monsieur-z May 2, 2024

monsieur-z May 2, 2024

coder-karen May 3, 2024

jeherve May 3, 2024

coder-karen May 3, 2024

jeherve May 6, 2024

jeherve left a comment •

edited

Loading

jeherve May 6, 2024

jeherve May 6, 2024

monsieur-z May 6, 2024

jeherve May 6, 2024

monsieur-z commented May 14, 2024

coder-karen left a comment •

edited

Loading

monsieur-z commented May 23, 2024

monsieur-z commented Jun 21, 2024

sergeymitr left a comment

Custom CSS: add deprecation warning for Start Fresh option #37193

Custom CSS: add deprecation warning for Start Fresh option #37193

Conversation

monsieur-z commented May 2, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Prerequisites

Notices

github-actions bot commented May 2, 2024 • edited Loading

github-actions bot commented May 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeherve left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

monsieur-z commented May 14, 2024

coder-karen left a comment • edited Loading

Choose a reason for hiding this comment

monsieur-z commented May 23, 2024

monsieur-z commented Jun 21, 2024

sergeymitr left a comment

Choose a reason for hiding this comment

monsieur-z commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading

github-actions bot commented May 2, 2024 •

edited

Loading

jeherve left a comment •

edited

Loading

coder-karen left a comment •

edited

Loading