@wordpress/block-editor 12.20.0 → 12.22.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';
@@ -412,7 +409,9 @@ export function getStylesDeclarations(
 		let ruleValue = rule.value;
 		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = getValueFromObjectPath( tree, refPath );
+			ruleValue = compileStyleValue(
+				getValueFromObjectPath( tree, refPath )
+			);
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! ruleValue || ruleValue?.ref ) {
@@ -431,7 +430,7 @@ export function getStylesDeclarations(
 			 */
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
-				getFluidTypographyOptionsFromSettings( tree?.settings )
+				tree?.settings
 			);
 		}
 
@@ -600,6 +599,7 @@ const STYLE_KEYS = [
 	'filter',
 	'outline',
 	'shadow',
+	'background',
 ];
 
 function pickStyleKeys( treeToPickFrom ) {
@@ -1194,15 +1194,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 +1208,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 +1232,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 +1246,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 +1258,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,32 +6,11 @@ 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. */
-export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
-export const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'captionColor',
-	'buttonColor',
-	'headingColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'textTransform',
-	'padding',
-];
 
 export const PRESET_METADATA = [
 	{
@@ -77,10 +56,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

@@ -106,13 +106,14 @@ function Iframe( {
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
-	expand = false,
 	readonly,
 	forwardedRef: ref,
+	title = __( 'Editor canvas' ),
 	...props
 } ) {
 	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
 		return {
 			resolvedAssets: settings.__unstableResolvedAssets,
 			isPreviewMode: settings.__unstableIsPreviewMode,
@@ -123,8 +124,11 @@ function Iframe( {
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
+	const [
+		contentResizeListener,
+		{ height: contentHeight, width: contentWidth },
+	] = useResizeObserver();
+
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
@@ -139,6 +143,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
@@ -201,6 +207,20 @@ function Iframe( {
 		};
 	}, [] );
 
+	const windowResizeRef = useRefEffect( ( node ) => {
+		const nodeWindow = node.ownerDocument.defaultView;
+
+		const onResize = () => {
+			setIframeWindowInnerHeight( nodeWindow.innerHeight );
+		};
+		nodeWindow.addEventListener( 'resize', onResize );
+		return () => {
+			nodeWindow.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -208,6 +228,7 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		windowResizeRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -218,7 +239,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>
@@ -236,33 +269,63 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	// We need to counter the margin created by scaling the iframe. If the scale
-	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
-	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
-	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
+	useEffect( () => {
+		if ( ! iframeDocument ) {
+			return;
+		}
+
+		const _scale =
+			typeof scale === 'function'
+				? scale( contentWidth, contentHeight )
+				: scale;
+
+		if ( _scale !== 1 ) {
+			// Hack to get proper margins when scaling the iframe document.
+			const bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );
+
+			iframeDocument.body.classList.add( 'is-zoomed-out' );
+
+			iframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;
+			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
+			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
+			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
+			if ( iframeWindowInnerHeight > contentHeight * _scale ) {
+				iframeDocument.body.style.minHeight = `${ Math.floor(
+					( iframeWindowInnerHeight - 2 * frameSize ) / _scale
+				) }px`;
+			}
+
+			return () => {
+				iframeDocument.body.classList.remove( 'is-zoomed-out' );
+				iframeDocument.documentElement.style.transform = '';
+				iframeDocument.documentElement.style.marginTop = '';
+				iframeDocument.documentElement.style.marginBottom = '';
+				iframeDocument.body.style.minHeight = '';
+			};
+		}
+	}, [
+		scale,
+		frameSize,
+		iframeDocument,
+		contentHeight,
+		iframeWindowInnerHeight,
+		contentWidth,
+	] );
+
+	// 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 +334,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 +345,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 +379,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/block-patterns-explorer/index.js

@@ -14,16 +14,11 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
 
-	const patternCategories = usePatternCategories(
-		rootClientId,
-		patternSourceFilter
-	);
+	const patternCategories = usePatternCategories( rootClientId );
 
 	return (
 		<div className="block-editor-block-patterns-explorer">
@@ -33,14 +28,12 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				onClickCategory={ setSelectedCategory }
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
-				patternSourceFilter={ patternSourceFilter }
-				setPatternSourceFilter={ setPatternSourceFilter }
 			/>
 			<PatternList
 				searchValue={ searchValue }
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
-				patternSourceFilter={ patternSourceFilter }
+				rootClientId={ rootClientId }
 			/>
 		</div>
 	);

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -47,10 +47,16 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	);
 }
 
-function PatternList( { searchValue, selectedCategory, patternCategories } ) {
+function PatternList( {
+	searchValue,
+	selectedCategory,
+	patternCategories,
+	rootClientId,
+} ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		rootClientId,
 		shouldFocusBlock: true,
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(

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(