Zoom Out: The patterns tab behind a new experiment. (#61601)

* Zoom Out: Remove from the patterns tab until we're ready

* hide the pattern tab zoom out behind an experiment

* Update lib/experiments-page.php

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

---------

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>

lib/experimental/editor-settings.php

@@ -28,6 +28,9 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -127,6 +127,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-zoomed-out-patterns-tab',
+		__( 'Enable zoomed out view when patterns are browsed in the inserter', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable zoomed out view when selecting a pattern category in the main inserter.', 'gutenberg' ),
+			'id'    => 'gutenberg-zoomed-out-patterns-tab',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-export function PatternCategoryPreviewPanel( {
+function PatternCategoryPreviewPanelInner( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,3 +24,17 @@ export function PatternCategoryPreviewPanel( {
 		/>
 	);
 }
+
+function PatternCategoryPreviewPanelWithZoomOut( props ) {
+	useZoomOut();
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}
+
+export function PatternCategoryPreviewPanel( props ) {
+	// When the pattern panel is showing, we want to use zoom out mode
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
+	}
+
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}

packages/block-editor/src/components/inserter/menu.js

@@ -31,7 +31,6 @@ import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
-import { useZoomOut } from '../../hooks/use-zoom-out';
 import { store as blockEditorStore } from '../../store';
 
 const NOOP = () => {};
@@ -282,9 +281,6 @@ function InserterMenu(
 		showMediaPanel,
 	] );
 
-	// When the pattern panel is showing, we want to use zoom out mode
-	useZoomOut( showPatternPanel );
-
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
 		if ( value !== 'patterns' ) {