remove zoom out experiment, control and enable closing inspector on p…

…attern category open (#61509)
WordPress · May 9, 2024 · a661135 · a661135
1 parent 3386d35
commit a661135
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 106 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -13,9 +13,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSync = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-custom-dataviews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomViews = true', 'before' );
 	}

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -55,18 +55,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-zoomed-out-view',
-		__( 'Zoomed out view ', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
-			'id'    => 'gutenberg-zoomed-out-view',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-custom-dataviews',
 		__( 'Custom dataviews', 'gutenberg' ),

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -111,21 +111,13 @@ function InserterMenu(
 		[ onToggleInsertionPoint ]
 	);
 
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView;
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
-			if ( isZoomedOutViewExperimentEnabled ) {
-				__experimentalOnPatternCategorySelection();
-			}
+			__experimentalOnPatternCategorySelection();
 		},
-		[
-			setSelectedPatternCategory,
-			__experimentalOnPatternCategorySelection,
-			isZoomedOutViewExperimentEnabled,
-		]
+		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
 	const showPatternPanel =

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
@@ -15,7 +15,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
-import { listView, plus, chevronUpDown } from '@wordpress/icons';
+import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -39,9 +39,8 @@ function DocumentTools( {
 	listViewLabel = __( 'Document Overview' ),
 } ) {
 	const inserterButton = useRef();
-	const { setIsInserterOpened, setIsListViewOpened, setDeviceType } =
+	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const {
 		isDistractionFree,
 		isInserterOpened,
@@ -50,8 +49,6 @@ function DocumentTools( {
 		listViewToggleRef,
 		hasFixedToolbar,
 		showIconLabels,
-		isVisualMode,
-		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
@@ -77,8 +74,6 @@ function DocumentTools( {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
 
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
@@ -185,28 +180,6 @@ function DocumentTools( {
 						) }
 					</>
 				) }
-
-				{ isZoomedOutViewExperimentEnabled &&
-					isLargeViewport &&
-					! isDistractionFree &&
-					! hasFixedToolbar && (
-						<ToolbarItem
-							as={ Button }
-							className="edit-site-header-edit-mode__zoom-out-view-toggle"
-							icon={ chevronUpDown }
-							isPressed={ isZoomedOutView }
-							/* translators: button label text should, if possible, be under 16 characters. */
-							label={ __( 'Zoom-out View' ) }
-							onClick={ () => {
-								setDeviceType( 'Desktop' );
-								__unstableSetEditorMode(
-									isZoomedOutView ? 'edit' : 'zoom-out'
-								);
-							} }
-							size="compact"
-							disabled={ disableBlockTools }
-						/>
-					) }
 			</div>
 		</NavigableToolbar>
 	);

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -8,69 +8,22 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, page, editor } ) => {
-		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
-
-		const zoomedOutCheckbox = page.getByLabel(
-			'Test a new zoomed out view on'
-		);
-
-		await zoomedOutCheckbox.setChecked( true );
-		await expect( zoomedOutCheckbox ).toBeChecked();
-		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
-
-		// Select a template part with a few blocks.
-		await admin.visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
-	test.afterEach( async ( { admin, page } ) => {
-		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
-		const zoomedOutCheckbox = page.getByLabel(
-			'Test a new zoomed out view on'
-		);
-		await zoomedOutCheckbox.setChecked( false );
-		await expect( zoomedOutCheckbox ).not.toBeChecked();
-		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
-	} );
-
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'Zoom-out button should not steal focus when a block is focused', async ( {
-		page,
-		editor,
-	} ) => {
-		const zoomOutButton = page.getByRole( 'button', {
-			name: 'Zoom-out View',
-			exact: true,
-		} );
-
-		// Select a block for this test to surface the potential focus-stealing behavior
-		await editor.canvas.getByLabel( 'Site title text' ).click();
-
-		await zoomOutButton.click();
-
-		await expect( zoomOutButton ).toBeFocused();
-
-		await page.keyboard.press( 'Enter' );
-
-		await expect( zoomOutButton ).toBeFocused();
-	} );
-
 	test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( {
 		page,
 	} ) => {
-		const zoomOutButton = page.getByRole( 'button', {
-			name: 'Zoom-out View',
-			exact: true,
-		} );
+		// Trigger zoom out on Global Styles because there the inserter is not open.
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Browse styles' } ).click();
 
-		await zoomOutButton.click();
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
 		await page.getByLabel( 'Add pattern' ).first().click();
 		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );