@wordpress/block-editor 12.20.0 → 12.21.0

package/src/components/global-styles/use-global-styles-output.js

@@ -24,10 +24,7 @@ import {
 	getBlockStyleVariationSelector,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from './typography-utils';
+import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { getDuotoneFilter } from '../duotone/utils';
@@ -431,7 +428,7 @@ export function getStylesDeclarations(
 			 */
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
-				getFluidTypographyOptionsFromSettings( tree?.settings )
+				tree?.settings
 			);
 		}
 
@@ -600,6 +597,7 @@ const STYLE_KEYS = [
 	'filter',
 	'outline',
 	'shadow',
+	'background',
 ];
 
 function pickStyleKeys( treeToPickFrom ) {
@@ -1194,15 +1192,13 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 
 	const isTemplate = blockContext?.templateSlug !== undefined;
 
-	const getBlockStyles = useSelect( ( select ) => {
-		return select( blocksStore ).getBlockStyles;
-	}, [] );
+	const { getBlockStyles } = useSelect( blocksStore );
 
 	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
-		mergedConfig = updateConfigWithSeparator( mergedConfig );
+		const updatedConfig = updateConfigWithSeparator( mergedConfig );
 
 		const blockSelectors = getBlockSelectors(
 			getBlockTypes(),
@@ -1210,18 +1206,18 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		);
 
 		const customProperties = toCustomProperties(
-			mergedConfig,
+			updatedConfig,
 			blockSelectors
 		);
 		const globalStyles = toStyles(
-			mergedConfig,
+			updatedConfig,
 			blockSelectors,
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
 			isTemplate
 		);
-		const svgs = toSvgFilters( mergedConfig, blockSelectors );
+		const svgs = toSvgFilters( updatedConfig, blockSelectors );
 
 		const styles = [
 			{
@@ -1234,7 +1230,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			},
 			// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
 			{
-				css: mergedConfig.styles.css ?? '',
+				css: updatedConfig.styles.css ?? '',
 				isGlobalStyles: true,
 			},
 			{
@@ -1248,11 +1244,11 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		// If there are, get the block selector and push the selector together with
 		// the CSS value to the 'stylesheets' array.
 		getBlockTypes().forEach( ( blockType ) => {
-			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
+			if ( updatedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
 				styles.push( {
 					css: processCSSNesting(
-						mergedConfig.styles.blocks[ blockType.name ]?.css,
+						updatedConfig.styles.blocks[ blockType.name ]?.css,
 						selector
 					),
 					isGlobalStyles: true,
@@ -1260,12 +1256,14 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			}
 		} );
 
-		return [ styles, mergedConfig.settings ];
+		return [ styles, updatedConfig.settings ];
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
+		isTemplate,
+		getBlockStyles,
 	] );
 }
 

package/src/components/global-styles/utils.js

@@ -6,10 +6,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * Internal dependencies
  */
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from './typography-utils';
+import { getTypographyFontSizeValue } from './typography-utils';
 import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
@@ -77,10 +74,7 @@ export const PRESET_METADATA = [
 	{
 		path: [ 'typography', 'fontSizes' ],
 		valueFunc: ( preset, settings ) =>
-			getTypographyFontSizeValue(
-				preset,
-				getFluidTypographyOptionsFromSettings( settings )
-			),
+			getTypographyFontSizeValue( preset, settings ),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],

package/src/components/grid-visualizer/grid-item-resizer.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { getComputedCSS } from './utils';
+
+export function GridItemResizer( { clientId, onChange } ) {
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+	return (
+		<BlockPopoverCover
+			className="block-editor-grid-item-resizer"
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<ResizableBox
+				className="block-editor-grid-item-resizer__box"
+				size={ {
+					width: '100%',
+					height: '100%',
+				} }
+				enable={ {
+					bottom: true,
+					bottomLeft: false,
+					bottomRight: false,
+					left: false,
+					right: true,
+					top: false,
+					topLeft: false,
+					topRight: false,
+				} }
+				onResizeStop={ ( event, direction, boxElement ) => {
+					const gridElement = blockElement.parentElement;
+					const columnGap = parseFloat(
+						getComputedCSS( gridElement, 'column-gap' )
+					);
+					const rowGap = parseFloat(
+						getComputedCSS( gridElement, 'row-gap' )
+					);
+					const gridColumnLines = getGridLines(
+						getComputedCSS( gridElement, 'grid-template-columns' ),
+						columnGap
+					);
+					const gridRowLines = getGridLines(
+						getComputedCSS( gridElement, 'grid-template-rows' ),
+						rowGap
+					);
+					const columnStart = getClosestLine(
+						gridColumnLines,
+						blockElement.offsetLeft
+					);
+					const rowStart = getClosestLine(
+						gridRowLines,
+						blockElement.offsetTop
+					);
+					const columnEnd = getClosestLine(
+						gridColumnLines,
+						blockElement.offsetLeft + boxElement.offsetWidth
+					);
+					const rowEnd = getClosestLine(
+						gridRowLines,
+						blockElement.offsetTop + boxElement.offsetHeight
+					);
+					onChange( {
+						columnSpan: Math.max( columnEnd - columnStart, 1 ),
+						rowSpan: Math.max( rowEnd - rowStart, 1 ),
+					} );
+				} }
+			/>
+		</BlockPopoverCover>
+	);
+}
+
+function getGridLines( template, gap ) {
+	const lines = [ 0 ];
+	for ( const size of template.split( ' ' ) ) {
+		const line = parseFloat( size );
+		lines.push( lines[ lines.length - 1 ] + line + gap );
+	}
+	return lines;
+}
+
+function getClosestLine( lines, position ) {
+	return lines.reduce(
+		( closest, line, index ) =>
+			Math.abs( line - position ) <
+			Math.abs( lines[ closest ] - position )
+				? index
+				: closest,
+		0
+	);
+}

package/src/components/grid-visualizer/grid-visualizer.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { getComputedCSS } from './utils';
+
+export function GridVisualizer( { clientId } ) {
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+	return (
+		<BlockPopoverCover
+			className="block-editor-grid-visualizer"
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<GridVisualizerGrid blockElement={ blockElement } />
+		</BlockPopoverCover>
+	);
+}
+
+function GridVisualizerGrid( { blockElement } ) {
+	const [ gridInfo, setGridInfo ] = useState( () =>
+		getGridInfo( blockElement )
+	);
+	useEffect( () => {
+		const observers = [];
+		for ( const element of [ blockElement, ...blockElement.children ] ) {
+			const observer = new window.ResizeObserver( () => {
+				setGridInfo( getGridInfo( blockElement ) );
+			} );
+			observer.observe( element );
+			observers.push( observer );
+		}
+		return () => {
+			for ( const observer of observers ) {
+				observer.disconnect();
+			}
+		};
+	}, [ blockElement ] );
+	return (
+		<div
+			className="block-editor-grid-visualizer__grid"
+			style={ gridInfo.style }
+		>
+			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+				<div key={ i } className="block-editor-grid-visualizer__item" />
+			) ) }
+		</div>
+	);
+}
+
+function getGridInfo( blockElement ) {
+	const gridTemplateColumns = getComputedCSS(
+		blockElement,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS(
+		blockElement,
+		'grid-template-rows'
+	);
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const numItems = numColumns * numRows;
+	return {
+		numItems,
+		style: {
+			gridTemplateColumns,
+			gridTemplateRows,
+			gap: getComputedCSS( blockElement, 'gap' ),
+			padding: getComputedCSS( blockElement, 'padding' ),
+		},
+	};
+}

package/src/components/grid-visualizer/index.js

@@ -0,0 +1,2 @@
+export { GridVisualizer } from './grid-visualizer';
+export { GridItemResizer } from './grid-item-resizer';

package/src/components/grid-visualizer/style.scss

@@ -0,0 +1,33 @@
+// TODO: Specificity hacks to get rid of all these darn !importants.
+
+.block-editor-grid-visualizer {
+	z-index: z-index(".block-editor-grid-visualizer") !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+	pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+	display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+	border: $border-width dashed $gray-300;
+}
+
+.block-editor-grid-item-resizer {
+	z-index: z-index(".block-editor-grid-visualizer") !important;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+	pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+	border: $border-width solid var(--wp-admin-theme-color);
+
+	.components-resizable-box__handle {
+		pointer-events: all !important;
+	}
+}

package/src/components/grid-visualizer/utils.js

@@ -0,0 +1,5 @@
+export function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}

package/src/components/iframe/index.js

@@ -30,7 +30,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-
+import calculateScale from '../../utils/calculate-scale';
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -104,27 +104,53 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	scale = 1,
-	frameSize = 0,
-	expand = false,
+	shouldZoom = false,
 	readonly,
 	forwardedRef: ref,
+	title = __( 'Editor canvas' ),
 	...props
 } ) {
-	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			resolvedAssets: settings.__unstableResolvedAssets,
-			isPreviewMode: settings.__unstableIsPreviewMode,
-		};
-	}, [] );
+	const { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			return {
+				resolvedAssets: settings.__unstableResolvedAssets,
+				isPreviewMode: settings.__unstableIsPreviewMode,
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			};
+		},
+		[]
+	);
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
+	const [
+		contentResizeListener,
+		{ height: contentHeight, width: contentWidth },
+	] = useResizeObserver();
+
+	// When zoom-out mode is enabled, the iframe is scaled down to fit the
+	// content within the viewport.
+	// At 1000px wide, the iframe is scaled to 45%.
+	// At 400px wide, the iframe is scaled to 90%.
+	const scale =
+		isZoomOutMode && shouldZoom
+			? calculateScale(
+					{
+						maxWidth: 1000,
+						minWidth: 400,
+						maxScale: 0.45,
+						minScale: 0.9,
+					},
+					contentWidth
+			  )
+			: 1;
+	const frameSize = isZoomOutMode ? 100 : 0;
+
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
@@ -139,6 +165,8 @@ function Iframe( {
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
+			documentElement.classList.add( 'block-editor-iframe__html' );
+
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -218,7 +246,19 @@ function Iframe( {
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
-		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
+		<style>
+			html{
+				height: auto !important;
+				min-height: 100%;
+			}
+
+			body {
+				margin: 0;
+				/* Default background color in case zoom out mode background
+				colors the html element */
+				background: white;
+			}
+		</style>
 		${ styles }
 		${ scripts }
 	</head>
@@ -241,28 +281,35 @@ function Iframe( {
 	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
 	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
 
+	useEffect( () => {
+		if ( iframeDocument && scale !== 1 ) {
+			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
+			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
+			iframeDocument.documentElement.style.marginBottom = `${
+				-marginFromScaling * 2 + frameSize
+			}px`;
+			return () => {
+				iframeDocument.documentElement.style.transform = '';
+				iframeDocument.documentElement.style.marginTop = '';
+				iframeDocument.documentElement.style.marginBottom = '';
+			};
+		}
+	}, [ scale, frameSize, marginFromScaling, iframeDocument ] );
+
+	// Make sure to not render the before and after focusable div elements in view
+	// mode. They're only needed to capture focus in edit mode.
+	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
+
 	return (
 		<>
-			{ tabIndex >= 0 && before }
+			{ shouldRenderFocusCaptureElements && before }
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
 				style={ {
 					border: 0,
 					...props.style,
-					height: expand ? contentHeight : props.style?.height,
-					marginTop:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginTop,
-					marginBottom:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginBottom,
-					transform:
-						scale !== 1
-							? `scale( ${ scale } )`
-							: props.style?.transform,
+					height: props.style?.height,
 					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
@@ -271,7 +318,7 @@ function Iframe( {
 				// mode. Also preload the styles to avoid a flash of unstyled
 				// content.
 				src={ src }
-				title={ __( 'Editor canvas' ) }
+				title={ title }
 				onKeyDown={ ( event ) => {
 					if ( props.onKeyDown ) {
 						props.onKeyDown( event );
@@ -282,7 +329,7 @@ function Iframe( {
 					// though by doing so we also trigger another React event,
 					// so we need to stop the propagation of this event to avoid
 					// duplication.
-					else if (
+					if (
 						event.currentTarget.ownerDocument !==
 						event.target.ownerDocument
 					) {
@@ -316,7 +363,7 @@ function Iframe( {
 						iframeDocument.documentElement
 					) }
 			</iframe>
-			{ tabIndex >= 0 && after }
+			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
 }

package/src/components/index.native.js

@@ -49,6 +49,7 @@ export { default as MediaUploadProgress } from './media-upload-progress';
 export {
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_PAUSED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
 } from './media-upload-progress/constants';

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -37,11 +37,11 @@ function useShallowMemo( value ) {
  *                                                          in inner blocks.
  * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
  * @param {?WPDirectInsertBlock} defaultBlock               The default block to insert: [ blockName, { blockAttributes } ].
- * @param {?Function|boolean}    directInsert               If a default block should be inserted directly by the appender.
+ * @param {?boolean}             directInsert               If a default block should be inserted directly by the appender.
  *
  * @param {?WPDirectInsertBlock} __experimentalDefaultBlock A deprecated prop for the default block to insert: [ blockName, { blockAttributes } ]. Use `defaultBlock` instead.
  *
- * @param {?Function|boolean}    __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
+ * @param {?boolean}             __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
  *
  * @param {string}               [templateLock]             The template lock specified for the inner
  *                                                          blocks component. (e.g. "all")
@@ -138,6 +138,16 @@ export default function useNestedSettingsUpdate(
 			newSettings.directInsert = directInsert;
 		}
 
+		if (
+			newSettings.directInsert !== undefined &&
+			typeof newSettings.directInsert !== 'boolean'
+		) {
+			deprecated( 'Using `Function` as a `directInsert` argument', {
+				alternative: '`boolean` values',
+				since: '6.5',
+			} );
+		}
+
 		// Batch updates to block list settings to avoid triggering cascading renders
 		// for each container block included in a tree and optimize initial render.
 		// To avoid triggering updateBlockListSettings for each container block

package/src/components/inserter/media-tab/media-preview.js

@@ -211,7 +211,7 @@ export function MediaPreview( { media, onClick, category } ) {
 	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
 	return (
 		<>
-			<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
+			<InserterDraggableBlocks isEnabled blocks={ [ block ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<div
 						className={ classnames(

package/src/components/inserter/menu.js

@@ -66,10 +66,13 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns } = useSelect(
+	const { isZoomOutMode, showPatterns } = useSelect(
 		( select ) => {
-			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
+			const { hasAllowedPatterns, __unstableGetEditorMode } = unlock(
+				select( blockEditorStore )
+			);
 			return {
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				showPatterns: hasAllowedPatterns( destinationRootClientId ),
 			};
 		},
@@ -77,7 +80,8 @@ function InserterMenu(
 	);
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = mediaCategories.length > 0;
+	const showMedia = mediaCategories.length > 0 && ! isZoomOutMode;
+	const showBlocks = ! isZoomOutMode;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -249,19 +253,21 @@ function InserterMenu(
 								__experimentalInsertionIndex
 							}
 							showBlockDirectory
+							showBlocks={ showBlocks }
 							shouldFocusBlock={ shouldFocusBlock }
 						/>
 					</div>
 				) }
 				{ showAsTabs && (
 					<InserterTabs
+						showBlocks={ showBlocks }
 						showPatterns={ showPatterns }
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
 						tabsContents={ inserterTabsContents }
 					/>
 				) }
-				{ ! delayedFilterValue && ! showAsTabs && (
+				{ ! delayedFilterValue && ! showAsTabs && showBlocks && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>

package/src/components/inserter/menu.native.js

@@ -177,7 +177,7 @@ function InserterMenu( {
 
 	return (
 		<BottomSheet
-			isVisible={ true }
+			isVisible
 			onClose={ onClose }
 			onKeyboardShow={ onKeyboardShow }
 			onKeyboardHide={ onKeyboardHide }
@@ -198,10 +198,10 @@ function InserterMenu( {
 				</>
 			}
 			hasNavigation
-			setMinHeightToMaxHeight={ true }
+			setMinHeightToMaxHeight
 			contentStyle={ styles[ 'inserter-menu__list' ] }
 			isFullScreen={ isFullScreen }
-			allowDragIndicator={ true }
+			allowDragIndicator
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (

package/src/components/inserter/mobile-tab-navigation.js

@@ -31,7 +31,7 @@ function ScreenHeader( { title } ) {
 								{ minWidth: 24, padding: 0 }
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
+							size="small"
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<Spacer>

package/src/components/inserter/search-results.js

@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	showBlocks = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -167,7 +168,7 @@ function InserterSearchResults( {
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
-	const blocksUI = !! filteredBlockTypes.length && (
+	const blocksUI = showBlocks && !! filteredBlockTypes.length && (
 		<InserterPanel
 			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
 		>