From 9722b824b7a0d1b6ba6361f2acef7d3c0cf4a87e Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 May 2024 17:47:27 +0100
Subject: [PATCH] Zoom Out: Hide inserters behind the experiment flag (#61866)

* Zoom Out: Hide inserters behind the experiment flag

* Enable the test before we run the E2E test

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 .../src/components/block-tools/index.js       | 11 +++++-----
 test/e2e/specs/site-editor/zoom-out.spec.js   | 22 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index dba0adbbd8325..ad744a81cca62 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -231,11 +231,12 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
-					<ZoomOutModeInserters
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
+				{ window.__experimentalEnableZoomedOutPatternsTab &&
+					isZoomOutMode && (
+						<ZoomOutModeInserters
+							__unstableContentRef={ __unstableContentRef }
+						/>
+					) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);
diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 2cd0db8b1ebe2..3fed2b49f8e4a 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -8,11 +8,31 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
+
+		const zoomedOutCheckbox = page.getByLabel(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+
+		await zoomedOutCheckbox.setChecked( true );
+		await expect( zoomedOutCheckbox ).toBeChecked();
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
 		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(
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
+		);
+		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' );
 	} );