diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 352fa1c35d3a9..2af7cafb4838c 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 38d954a71a0bb..5147edda0deec 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 04f25ade4880d..f91598fb7a61c 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 fe9f4e60f0c86..bda1584c22149 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 = () => {}; @@ -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' ) {