From 9c92abe9eb87edd7aae2a0eea21918253c2e2de8 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 14 Nov 2024 16:05:00 +0200 Subject: [PATCH 1/2] Place "Write mode" functionality behind a Gutenberg experiment --- lib/experimental/editor-settings.php | 3 +++ lib/experiments-page.php | 12 ++++++++++++ packages/block-editor/src/store/selectors.js | 3 +++ .../editor/src/components/document-tools/index.js | 5 +++-- 4 files changed, 21 insertions(+), 2 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index afc6d7e220f67..5b36c32b3c829 100644 --- 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 index 946b68283a3e0..9033e3c2d0c1f 100644 --- 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 index 598b6b4ea480d..ac1d178f43de7 100644 --- 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/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index 74118caaf5849..a98def685e93a 100644 --- 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' ), }; }, [] ); From ad31d5a6956ef8451b9d9d8ba3c04b1c05242c2c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 18 Nov 2024 17:48:55 +0200 Subject: [PATCH 2/2] update tests --- .../block-editor/src/store/test/selectors.js | 145 +++++++++++------- .../editor/various/write-design-mode.spec.js | 8 +- test/e2e/specs/site-editor/style-book.spec.js | 3 + 3 files changed, 94 insertions(+), 62 deletions(-) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 00aa085f66709..7c0361449c5fc 100644 --- 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/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js index 2116f9042685a..053f4cb8ff092 100644 --- 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 index d860b05bc8f06..38030892826ec 100644 --- 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();