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

* Custom CSS: add deprecation warning for Start Fresh option * Fix Phan warning * Make wordpress.org link external * Add deprecation date * Include deprecated mention in label * Update initial state in the Jetpack dashboard and settings only * Add warning in the frontend * Update notice content * Add missing check for the FE warning * Inline styles * Quit early start fresh check for block based themes * Update projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js Co-authored-by: Karen Attfield <[email protected]> --------- Co-authored-by: Karen Attfield <[email protected]>
Automattic · Jun 26, 2024 · cca4617 · cca4617
1 parent e3a5254
commit cca4617
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 19 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
@@ -28,9 +28,12 @@ import {
 	userCanConnectSite,
 	userIsSubscriber,
 	getConnectionErrors,
+	getSiteAdminUrl,
 } from 'state/initial-state';
 import { getLicensingError, clearLicensingError } from 'state/licensing';
+import { getModule } from 'state/modules';
 import { getSiteDataErrors } from 'state/site';
+import { StartFreshDeprecationWarning } from '../../writing/custom-css';
 import DismissableNotices from './dismissable';
 import JetpackConnectionErrors from './jetpack-connection-errors';
 import PlanConflictWarning from './plan-conflict-warning';
@@ -234,6 +237,11 @@ class JetpackNotices extends React.Component {
 						onDismissClick={ this.props.clearLicensingError }
 					/>
 				) }
+				{ this.props.startFreshEnabled && (
+					<SimpleNotice status="is-warning" showDismiss={ false }>
+						<StartFreshDeprecationWarning siteAdminUrl={ this.props.siteAdminUrl } />
+					</SimpleNotice>
+				) }
 			</div>
 		);
 	}
@@ -258,6 +266,8 @@ export default connect(
 			isReconnectingSite: isReconnectingSite( state ),
 			licensingError: getLicensingError( state ),
 			hasConnectedOwner: hasConnectedOwner( state ),
+			siteAdminUrl: getSiteAdminUrl( state ),
+			startFreshEnabled: !! getModule( state, 'custom-css' )?.options?.replace,
 		};
 	},
 	dispatch => {

diff --git a/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx b/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx
@@ -1,5 +1,5 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink, Notice } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Button from 'components/button';
@@ -29,6 +29,30 @@ const trackVisitCustomizer = () => {
 	} );
 };
 
+const CustomizerLink = ( { children, siteAdminUrl } ) => (
+	<a
+		onClick={ trackVisitCustomizer }
+		href={ `${ siteAdminUrl }customize.php?autofocus%5Bsection%5D=custom_css` }
+		title={ __( 'Edit and add CSS directly on your site from the Customizer.', 'jetpack' ) }
+	>
+		{ children }
+	</a>
+);
+
+export const StartFreshDeprecationWarning = ( { siteAdminUrl } ) =>
+	createInterpolateElement(
+		__(
+			"The <i>Start Fresh</i> option in the <a1>CSS customization panel</a1> is enabled, which means the theme's original CSS is not applied. <b>This option will no longer be supported after August 6, 2024.</b> <a2>See how to keep your site intact</a2>.",
+			'jetpack'
+		),
+		{
+			i: <i />,
+			b: <b />,
+			a1: <CustomizerLink siteAdminUrl={ siteAdminUrl } />,
+			a2: <ExternalLink href={ getRedirectUrl( 'jetpack-support-custom-css' ) } />,
+		}
+	);
+
 /**
  * Custom CSS settings component.
  *
@@ -38,7 +62,7 @@ const trackVisitCustomizer = () => {
 function CustomCss( props ) {
 	const {
 		customCssActive,
-		customCssModule: { name, description, module },
+		customCssModule: { name, description, module, options },
 		isBlockThemeActive,
 		isSavingAnyOption,
 		siteAdminUrl,
@@ -92,16 +116,7 @@ function CustomCss( props ) {
 						'jetpack'
 					),
 					{
-						a: (
-							<a
-								onClick={ trackVisitCustomizer }
-								href={ `${ siteAdminUrl }customize.php?autofocus%5Bsection%5D=custom_css` }
-								title={ __(
-									'Edit and add CSS directly on your site from the Customizer.',
-									'jetpack'
-								) }
-							/>
-						),
+						a: <CustomizerLink siteAdminUrl={ siteAdminUrl } />,
 					}
 				) }
 			</div>
@@ -144,6 +159,15 @@ function CustomCss( props ) {
 	return (
 		<SettingsGroup module={ { module } } support={ supportText() }>
 			<FormLegend className="jp-form-label-wide">{ name }</FormLegend>
+			{ options?.replace && (
+				<Notice
+					className="jp-custom-css__deprecation-warning"
+					isDismissible={ false }
+					status="warning"
+				>
+					<StartFreshDeprecationWarning siteAdminUrl={ siteAdminUrl } />{ ' ' }
+				</Notice>
+			) }
 			{ isBlockThemeActive && recommendSiteEditor() }
 			{ ! isBlockThemeActive && customizerLink() }
 			{ toggleModule() }

diff --git a/projects/plugins/jetpack/_inc/client/writing/style.scss b/projects/plugins/jetpack/_inc/client/writing/style.scss
@@ -51,3 +51,7 @@
 		padding: rem(16px) 0 0;
 	}
 }
+
+.jp-custom-css__deprecation-warning {
+	margin-bottom: 1rem;
+}
diff --git a/projects/plugins/jetpack/changelog/update-custom-css-start-fresh-warning b/projects/plugins/jetpack/changelog/update-custom-css-start-fresh-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Custom CSS: add deprecation warning for Start Fresh option
diff --git a/projects/plugins/jetpack/modules/custom-css/custom-css.php b/projects/plugins/jetpack/modules/custom-css/custom-css.php
@@ -3,6 +3,7 @@
 // phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files.
 
 use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Redirect;
 
 /**
  * Alternate Custom CSS source for 4.7 compat.
@@ -30,6 +31,8 @@ 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' ) );
+		add_action( 'wp_body_open', array( __CLASS__, 'display_frontend_warning' ) );
 
 		// Handle Sass/LESS.
 		add_filter( 'customize_value_custom_css', array( __CLASS__, 'customize_value_custom_css' ), 10, 2 );
@@ -351,10 +354,14 @@ public static function customizer_link( $args = array() ) {
 	 * Handle the enqueueing and localizing for scripts to be used in the Customizer.
 	 */
 	public static function customize_controls_enqueue_scripts() {
+		global $wp_customize;
+
 		wp_enqueue_style( 'jetpack-customizer-css' );
 		wp_enqueue_script( 'jetpack-customizer-css' );
 
+		$setting      = $wp_customize->get_setting( 'jetpack_custom_css[replace]' );
 		$content_help = __( 'Set a different media width for full size images.', 'jetpack' );
+
 		if ( ! empty( $GLOBALS['content_width'] ) ) {
 			$content_help .= sprintf(
 				// translators: the theme name and then the default width.
@@ -371,14 +378,16 @@ public static function customize_controls_enqueue_scripts() {
 				/** This filter is documented in modules/custom-css/custom-css.php */
 				'useRichEditor'        => ! jetpack_is_mobile() && apply_filters( 'safecss_use_ace', true ),
 				'areThereCssRevisions' => self::are_there_css_revisions(),
+				'startFresh'           => isset( $setting ) && $setting->value(),
 				'revisionsUrl'         => self::get_revisions_url(),
 				'cssHelpUrl'           => '//en.support.wordpress.com/custom-design/editing-css/',
 				'l10n'                 => array(
-					'mode'           => __( 'Start Fresh', 'jetpack' ),
-					'mobile'         => __( 'On Mobile', 'jetpack' ),
-					'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' ),
+					'mode'                        => __( 'Start Fresh (deprecated)', 'jetpack' ),
+					'mobile'                      => __( 'On Mobile', 'jetpack' ),
+					'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 after August 6, 2024.", 'jetpack' ),
 				),
 			)
 		);
@@ -743,7 +752,7 @@ public static function customize_register( $wp_customize ) {
 			'wpcom_custom_css_content_width_control',
 			array(
 				'type'     => 'text',
-				'label'    => __( 'Media Width', 'jetpack' ),
+				'label'    => __( 'Media Width (deprecated)', 'jetpack' ),
 				'section'  => 'custom_css',
 				'settings' => 'jetpack_custom_css[content_width]',
 			)
@@ -786,7 +795,7 @@ public static function customize_register( $wp_customize ) {
 				array(
 					'type'     => 'select',
 					'choices'  => $preprocessor_choices,
-					'label'    => __( 'Preprocessor', 'jetpack' ),
+					'label'    => __( 'Preprocessor (deprecated)', 'jetpack' ),
 					'section'  => 'custom_css',
 					'settings' => 'jetpack_custom_css[preprocessor]',
 				)
@@ -998,6 +1007,157 @@ public static function jetpack_content_width( $content_width ) {
 		return $content_width;
 	}
 
+	/**
+	 * Return whether the Start Fresh option of the CSS editor is enabled.
+	 *
+	 * @return boolean
+	 */
+	public static function is_start_fresh_option_enabled() {
+		if ( wp_is_block_theme() ) {
+			return false;
+		}
+
+		$start_fresh = null;
+
+		// $wp_customize is not available here. Let's get the value of the `replace` option from the last
+		// customize_changeset posts.
+		$posts = get_posts(
+			array(
+				'post_type'   => 'customize_changeset',
+				'post_status' => 'trash',
+				'order_by'    => 'post_modified',
+				'order'       => 'DESC',
+			)
+		);
+
+		// Bail as soon as we find a post that defines the `replace` option.
+		foreach ( $posts as $post ) {
+			$content = $post->post_content;
+
+			if ( empty( $content ) ) {
+				continue;
+			}
+
+			$parsed_content = json_decode( $content, true );
+
+			if ( empty( $parsed_content ) ) {
+				continue;
+			}
+
+			foreach ( $parsed_content as $key => $data ) {
+				if ( str_ends_with( $key, '::jetpack_custom_css[replace]' ) ) {
+					$start_fresh = $data['value'];
+					break;
+				}
+			}
+
+			if ( isset( $start_fresh ) ) {
+				break;
+			}
+		}
+
+		return $start_fresh;
+	}
+
+	/**
+	 * Display a deprecation warning on the frontend for site admins only
+	 */
+	public static function display_frontend_warning() {
+		if ( ! current_user_can( 'edit_themes' ) || ! current_user_can( 'edit_theme_options' ) || ! self::is_start_fresh_option_enabled() ) {
+			return;
+		}
+
+		$notice  = '';
+		$notice .= '<style>';
+		$notice .= '
+.jp-custom-css__deprecation-warning {
+	position: absolute;
+	top: 2.5rem;
+	left: 50%;
+	z-index: 99999;
+	transform: translateX( -50% );
+
+	display: flex;
+	align-items: flex-start;
+	width: 80ch;
+
+	background-color: #fef8ee;
+	border: solid 1px #ccc;
+	border-left: solid 5px #f0b849;
+	box-shadow: 0 0 4px 4px rgba( 0, 0, 0, 0.1 );
+
+	font-size: 1rem;
+}
+
+.jp-custom-css__deprecation-warning p {
+	margin: 0;
+	padding: 1em;
+}
+
+.jp-custom-css__deprecation-warning button {
+	min-width: 48px;
+	min-height: 48px;
+
+	border-color: transparent;
+	background-color: transparent;
+
+	font-size: 1.25rem;
+	font-weight: bold;
+}				
+';
+		$notice .= '</style>';
+		$notice .= '<div class="jp-custom-css__deprecation-warning">';
+		$notice .= '<p>' . wp_kses(
+			sprintf(
+				// translators: 1: URL to the CSS customization panel, 2: URL to the theme stylesheet documentation.
+				__(
+					'The <i>Start Fresh</i> option in the <a href="%1$s">CSS customization panel</a> is enabled, which means the theme\'s original CSS is not applied. <b>This option will no longer be supported after August 6, 2024.</b> <a href="%2$s">See how to keep your site intact.</a>',
+					'jetpack'
+				),
+				esc_url( admin_url( 'customize.php?autofocus%5Bsection%5D=custom_css' ) ),
+				esc_url( Redirect::get_url( 'jetpack-support-custom-css' ) )
+			),
+			array(
+				'i' => array(),
+				'b' => array(),
+				'a' => array(
+					'href'   => array(),
+					'target' => array(),
+				),
+			)
+		) . '</p>';
+		$notice .= '<button aria-label="' . esc_html__( 'Dismiss', 'jetpack' ) . '">&times;</button>';
+		$notice .= '</div>';
+		$notice .= '<script>';
+		$notice .= 'document.querySelector(".jp-custom-css__deprecation-warning button").addEventListener("click", (e) => e.currentTarget.parentNode.remove() );';
+		$notice .= '</script>';
+
+		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		echo $notice;
+	}
+
+	/**
+	 * Update the initial state to include the `replace` option (Start Fresh) in the module data.
+	 */
+	public static function update_initial_state() {
+		if ( 'toplevel_page_jetpack' !== get_current_screen()->base ) {
+			return;
+		}
+
+		$val = self::is_start_fresh_option_enabled() ? 'true' : 'false';
+
+		wp_add_inline_script(
+			'react-plugin',
+			"
+try {
+	var options = window.Initial_State?.getModules?.['custom-css']?.options || {};
+	options.replace = $val;
+} catch (e) {}
+",
+			'after'
+		);
+	}
+
 	/**
 	 * Currently this filter function gets called on
 	 * 'template_redirect' action and

diff --git a/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js b/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
@@ -57,6 +57,14 @@
 			}).prependTo( '#css-help-links' );
 		}
 
+		// Show deprecation warning if Start Fresh option is enabled
+		if ( !! window._jp_css_settings.startFresh && window._currentSiteType !== 'atomic' ) {
+			customize.notifications.add( new customize.Notification( 'start-fresh-warning', {
+				message: window._jp_css_settings.l10n.startFreshCustomizerWarning,
+				type: 'warning',
+			} ) );
+		}
+
 		customize( 'jetpack_custom_css[preprocessor]', function( preprocessorSetting ) {
 			preprocessorSetting.bind( function( curr ) {
 				var preprocessor_modes = {