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 <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · May 22, 2024 · 9722b82 · 9722b82 · github-actions · May 22, 2024
1 parent c43627a
commit 9722b82
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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' );
 	} );