diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 352fa1c35d3a90..2af7cafb4838ca 100644
--- a/lib/experimental/editor-settings.php
+++ b/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' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 38d954a71a0bb1..5147edda0deec5 100644
--- a/lib/experiments-page.php
+++ b/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'
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
index 04f25ade4880d5..f91598fb7a61cc 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
+++ b/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 ;
+}
+
+export function PatternCategoryPreviewPanel( props ) {
+ // When the pattern panel is showing, we want to use zoom out mode
+ if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+ return ;
+ }
+
+ return ;
+}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ddaec9d15a34a9..4649402aa41e52 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/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 = () => {};
@@ -267,9 +266,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' ) {