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>

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>
 	);

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' );
 	} );