Place "Write mode" functionality behind a Gutenberg experiment (#67008)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: mcsf <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Nov 21, 2024 · ec4b881 · ec4b881
1 parent b5732a5
commit ec4b881
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 64 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -37,6 +37,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-editor-write-mode', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEditorWriteMode = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -187,6 +187,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-editor-write-mode',
+		__( 'Editor write mode', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable write mode in editor.', 'gutenberg' ),
+			'id'    => 'gutenberg-editor-write-mode',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2774,6 +2774,9 @@ export function isNavigationMode( state ) {
  */
 export const __unstableGetEditorMode = createRegistrySelector(
 	( select ) => ( state ) => {
+		if ( ! window?.__experimentalEditorWriteMode ) {
+			return 'edit';
+		}
 		return (
 			state.settings.editorTool ??
 			select( preferencesStore ).get( 'core', 'editorTool' )

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -4615,68 +4615,97 @@ describe( 'getBlockEditingMode', () => {
 		).toBe( 'contentOnly' );
 	} );
 
-	it( 'in navigation mode, the root section container is default', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
-			)
-		).toBe( 'default' );
-	} );
+	describe( 'navigation mode', () => {
+		const writeModeExperiment = window.__experimentalEditorWriteMode;
+		beforeAll( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
+		afterAll( () => {
+			window.__experimentalEditorWriteMode = writeModeExperiment;
+		} );
+		it( 'in navigation mode, the root section container is default', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( 'default' );
+		} );
 
-	it( 'in navigation mode, anything outside the section container is disabled', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'6cf70164-9097-4460-bcbf-200560546988'
-			)
-		).toBe( 'disabled' );
-	} );
+		it( 'in navigation mode, anything outside the section container is disabled', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'6cf70164-9097-4460-bcbf-200560546988'
+				)
+			).toBe( 'disabled' );
+		} );
 
-	it( 'in navigation mode, sections are contentOnly', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'b26fc763-417d-4f01-b81c-2ec61e14a972'
-			)
-		).toBe( 'contentOnly' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
-			)
-		).toBe( 'contentOnly' );
-	} );
+		it( 'in navigation mode, sections are contentOnly', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'b26fc763-417d-4f01-b81c-2ec61e14a972'
+				)
+			).toBe( 'contentOnly' );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+				)
+			).toBe( 'contentOnly' );
+		} );
 
-	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		hasContentRoleAttribute.mockReturnValueOnce( true );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
-			)
-		).toBe( 'contentOnly' );
+		it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			hasContentRoleAttribute.mockReturnValueOnce( true );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+				)
+			).toBe( 'contentOnly' );
 
-		hasContentRoleAttribute.mockReturnValueOnce( true );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
-			)
-		).toBe( 'contentOnly' );
-	} );
+			hasContentRoleAttribute.mockReturnValueOnce( true );
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
+				)
+			).toBe( 'contentOnly' );
+		} );
 
-	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
-		dispatch( preferencesStore ).set( 'core', 'editorTool', 'navigation' );
-		expect(
-			getBlockEditingMode(
-				navigationModeStateWithRootSection,
-				'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
-			)
-		).toBe( 'disabled' );
+		it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+			dispatch( preferencesStore ).set(
+				'core',
+				'editorTool',
+				'navigation'
+			);
+			expect(
+				getBlockEditingMode(
+					navigationModeStateWithRootSection,
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
+				)
+			).toBe( 'disabled' );
+		} );
 	} );
 } );
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
@@ -60,8 +60,9 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
 			showTools:
-				getRenderingMode() !== 'post-only' ||
-				getCurrentPostType() === 'wp_template',
+				!! window?.__experimentalEditorWriteMode &&
+				( getRenderingMode() !== 'post-only' ||
+					getCurrentPostType() === 'wp_template' ),
 		};
 	}, [] );
 

diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -7,19 +7,19 @@ test.describe( 'Write/Design mode', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
-
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { admin, page } ) => {
+		await page.addInitScript( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
 			canvas: 'edit',
 		} );
 	} );
-
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
-
 	test( 'Should prevent selecting intermediary blocks', async ( {
 		editor,
 		page,

diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
@@ -19,6 +19,9 @@ test.describe( 'Style Book', () => {
 	} );
 
 	test.beforeEach( async ( { admin, editor, styleBook, page } ) => {
+		await page.addInitScript( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
 		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 		await styleBook.open();