From 4565b66ea427475a58ec74a98b01fb52c56be47d Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 5 Oct 2022 16:34:17 +0300
Subject: [PATCH] creates the distraction free experiment

---
 lib/experimental/editor-settings.php          | 12 +++++++
 lib/experiments-page.php                      | 11 ++++++
 .../components/header/writing-menu/index.js   | 27 +++++++++------
 .../components/keyboard-shortcuts/index.js    | 34 +++++++++++--------
 .../src/components/preferences-modal/index.js | 21 +++++++-----
 5 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 2b46a401d4b0e9..70bafcca736eb8 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -83,3 +83,15 @@ function gutenberg_enable_zoomed_out_view() {
 }
 
 add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' );
+
+/**
+ * Sets a global JS variable used to trigger the availability of distraction free mode.
+ */
+function gutenberg_enable_distraction_free_mode() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-distraction-free-mode', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDistractionFreeMode = true', 'before' );
+	}
+}
+
+add_action( 'admin_init', 'gutenberg_enable_distraction_free_mode' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 3d09f05bd655c8..6017ae396a501b 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -52,6 +52,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-zoomed-out-view',
 		)
 	);
+	add_settings_field(
+		'gutenberg-distraction-free-mode',
+		__( 'Distraction free mode ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test a new distraction free mode in the post editor.', 'gutenberg' ),
+			'id'    => 'gutenberg-distraction-free-mode',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index d0a599139d390b..d83f76248f33f9 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -51,6 +51,9 @@ function WritingMenu( { onClose } ) {
 		return null;
 	}
 
+	const isDistractionFreeModeExperimentEnabled =
+		window?.__experimentalEnableDistractionFreeMode;
+
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
@@ -81,16 +84,20 @@ function WritingMenu( { onClose } ) {
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="distractionFree"
-				toggleHandler={ toggleDistractionFree }
-				label={ __( 'Distraction free' ) }
-				info={ __( 'Write with calmness' ) }
-				messageActivated={ __( 'Distraction free mode activated' ) }
-				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
-				shortcut={ displayShortcut.primaryShift( '\\' ) }
-			/>
+			{ isDistractionFreeModeExperimentEnabled && (
+				<PreferenceToggleMenuItem
+					scope="core/edit-post"
+					name="distractionFree"
+					toggleHandler={ toggleDistractionFree }
+					label={ __( 'Distraction free' ) }
+					info={ __( 'Write with calmness' ) }
+					messageActivated={ __( 'Distraction free mode activated' ) }
+					messageDeactivated={ __(
+						'Distraction free mode deactivated'
+					) }
+					shortcut={ displayShortcut.primaryShift( '\\' ) }
+				/>
+			) }
 		</MenuGroup>
 	);
 }
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
index e4f708fa43a017..fafa586698c0ac 100644
--- a/packages/edit-post/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -162,21 +162,25 @@ function KeyboardShortcuts() {
 	} );
 
 	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		closeGeneralSidebar();
-		setIsListViewOpened( false );
-		toggleDistractionFree();
-		toggleFeature( 'distractionFree' );
-		const modeState = isFeatureActive( 'distractionFree' )
-			? __( 'on' )
-			: __( 'off' );
-		createInfoNotice(
-			// translators: Mode of distraction free can be 'on' or 'off';
-			sprintf( __( 'Distraction free mode turned %s.' ), modeState ),
-			{
-				speak: true,
-				type: 'snackbar',
-			}
-		);
+		const isDistractionFreeModeExperimentEnabled =
+			window?.__experimentalEnableDistractionFreeMode;
+		if ( isDistractionFreeModeExperimentEnabled ) {
+			closeGeneralSidebar();
+			setIsListViewOpened( false );
+			toggleDistractionFree();
+			toggleFeature( 'distractionFree' );
+			const modeState = isFeatureActive( 'distractionFree' )
+				? __( 'on' )
+				: __( 'off' );
+			createInfoNotice(
+				// translators: Mode of distraction free can be 'on' or 'off';
+				sprintf( __( 'Distraction free mode turned %s.' ), modeState ),
+				{
+					speak: true,
+					type: 'snackbar',
+				}
+			);
+		}
 	} );
 
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index a1fa59c328783a..90084b2c43851f 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -80,6 +80,9 @@ export default function EditPostPreferencesModal() {
 		closeGeneralSidebar();
 	};
 
+	const isDistractionFreeModeExperimentEnabled =
+		window?.__experimentalEnableDistractionFreeMode;
+
 	const sections = useMemo(
 		() => [
 			{
@@ -111,14 +114,16 @@ export default function EditPostPreferencesModal() {
 								'Customize options related to the block editor interface and editing flow.'
 							) }
 						>
-							<EnableFeature
-								featureName="distractionFree"
-								onToggle={ toggleDistractionFree }
-								help={ __(
-									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-								) }
-								label={ __( 'Distraction Free' ) }
-							/>
+							{ isDistractionFreeModeExperimentEnabled && (
+								<EnableFeature
+									featureName="distractionFree"
+									onToggle={ toggleDistractionFree }
+									help={ __(
+										'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+									) }
+									label={ __( 'Distraction Free' ) }
+								/>
+							) }
 							<EnableFeature
 								featureName="focusMode"
 								help={ __(