@wordpress/block-editor 14.3.6 → 14.5.0

package/src/components/iframe/index.js

@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
+	const initialContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+			initialContainerWidth.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -298,14 +298,49 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	const zoomOutAnimationClassnameRef = useRef( null );
+	const handleZoomOutAnimationClassname = () => {
+		clearTimeout( zoomOutAnimationClassnameRef.current );
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		zoomOutAnimationClassnameRef.current = setTimeout( () => {
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+		}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+	};
+
+	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
+	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
+	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
+	// number of dependencies.
 	useEffect( () => {
 		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
 
+		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
+		return () => {
+			handleZoomOutAnimationClassname();
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		};
+	}, [ iframeDocument, isZoomedOut ] );
+
+	// Calculate the scaling and CSS variables for the zoom out canvas
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+
 		const maxWidth = 750;
+		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
+		// initialContainerWidth will be smaller than the full page, and reflow will happen
+		// when the canvas area becomes larger due to sidebars closing. This is a known but
+		// minor divergence for now.
+
 		// This scaling calculation has to happen within the JS because CSS calc() can
 		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
 		// but calc( 100px / 2px ) is not.
@@ -314,7 +349,10 @@ function Iframe( {
 			scale === 'default'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
-						prevContainerWidthRef.current
+						Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						)
 				: scale
 		);
 
@@ -336,13 +374,16 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
+			'--wp-block-editor-iframe-zoom-out-outer-container-width',
+			`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
 		);
 
-		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		// iframeDocument.documentElement.style.setProperty(
+		// 	'--wp-block-editor-iframe-zoom-out-outer-container-width',
+		// 	`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+		// );
 
+		return () => {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
 			);
@@ -359,7 +400,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+				'--wp-block-editor-iframe-zoom-out-outer-container-width'
 			);
 		};
 	}, [
@@ -386,6 +427,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
@@ -459,10 +501,12 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
-					'--wp-block-editor-iframe-zoom-out-container-width':
-						isZoomedOut && `${ containerWidth }px`,
-					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidthRef.current }px`,
+					'--wp-block-editor-iframe-zoom-out-outer-container-width':
+						isZoomedOut &&
+						`${ Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						) }px`,
 				} }
 			>
 				{ iframe }

package/src/components/iframe/style.scss

@@ -9,9 +9,10 @@
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	// This is to offset the movement of the iframe when we open sidebars
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+	width: $outer-container-width;
+	// Position the iframe so that it is always aligned with the right side so that
+	// the scrollbar is always visible on the right side
+	position: absolute;
+	right: 0;
 }

package/src/components/inner-blocks/index.js

@@ -195,14 +195,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				isBlockSelected,
-				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
-				isDragging,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
@@ -213,8 +210,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation';
 			const blockEditingMode = getBlockEditingMode( clientId );
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
@@ -236,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					'__experimentalExposeControlsToChildren',
 					false
 				),
-				hasOverlay:
-					blockName !== 'core/template' &&
-					! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough &&
-					! isDragging(),
 				name: blockName,
 				blockType: getBlockType( blockName ),
 				parentLock: getTemplateLock( parentClientId ),
@@ -254,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 	const {
 		__experimentalCaptureToolbars,
-		hasOverlay,
 		name,
 		blockType,
 		parentLock,
@@ -299,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
-			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
-			{
-				'has-overlay': hasOverlay,
-			}
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames
 		),
 		children: clientId ? (
 			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
@@ -16,12 +16,21 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+// Creates a memoizing caching function that remembers the last value and keeps returning it
+// as long as the new values are shallowly equal. Helps keep dependencies stable.
+function createShallowMemo() {
+	let value;
+	return ( newValue ) => {
+		if ( value === undefined || ! isShallowEqual( value, newValue ) ) {
+			value = newValue;
+		}
+		return value;
+	};
+}
+
 function useShallowMemo( value ) {
-	const [ prevValue, setPrevValue ] = useState( value );
-	if ( ! isShallowEqual( prevValue, value ) ) {
-		setPrevValue( value );
-	}
-	return prevValue;
+	const [ memo ] = useState( createShallowMemo );
+	return memo( value );
 }
 
 /**
@@ -77,10 +86,7 @@ export default function useNestedSettingsUpdate(
 	// otherwise if the arrays change length but the first elements are equal the comparison,
 	// does not works as expected.
 	const _allowedBlocks = useShallowMemo( allowedBlocks );
-
-	const _prioritizedInserterBlocks = useMemo(
-		() => prioritizedInserterBlocks,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	const _prioritizedInserterBlocks = useShallowMemo(
 		prioritizedInserterBlocks
 	);
 

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

@@ -40,7 +40,7 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
-				label={ __( 'Search for patterns' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 		</div>

package/src/components/inserter/block-types-tab.js

@@ -186,7 +186,7 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		if ( rootClientId && item.rootClientId === rootClientId ) {
+		if ( rootClientId && item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {
 			itemsRemaining.push( item );

package/src/components/inserter/category-tabs/index.js

@@ -2,14 +2,10 @@
  * WordPress dependencies
  */
 import { usePrevious, useReducedMotion } from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
 import {
-	__experimentalHStack as HStack,
-	FlexBlock,
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -55,18 +51,12 @@ function CategoryTabs( {
 					<Tabs.Tab
 						key={ category.name }
 						tabId={ category.name }
-						className="block-editor-inserter__category-tab"
 						aria-label={ category.label }
 						aria-current={
 							category === selectedCategory ? 'true' : undefined
 						}
 					>
-						<HStack>
-							<FlexBlock>{ category.label }</FlexBlock>
-							<Icon
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
+						{ category.label }
 					</Tabs.Tab>
 				) ) }
 			</Tabs.TabList>

package/src/components/inserter/hooks/use-block-types-state.js

@@ -2,19 +2,23 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
-import { withRootClientIdOptionKey } from '../../../store/utils';
+import { isFiltered } from '../../../store/utils';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Retrieves the block types inserter state.
@@ -26,7 +30,7 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const options = useMemo(
-		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		() => ( { [ isFiltered ]: !! isQuick } ),
 		[ isQuick ]
 	);
 	const [ items ] = useSelect(
@@ -38,6 +42,10 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 		],
 		[ rootClientId, options ]
 	);
+	const { getClosestAllowedInsertionPoint } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [ categories, collections ] = useSelect( ( select ) => {
 		const { getCategories, getCollections } = select( blocksStore );
@@ -46,16 +54,29 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{
-				name,
-				initialAttributes,
-				innerBlocks,
-				syncStatus,
-				content,
-				rootClientId: _rootClientId,
-			},
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
 			shouldFocusBlock
 		) => {
+			const destinationClientId = getClosestAllowedInsertionPoint(
+				name,
+				rootClientId
+			);
+			if ( destinationClientId === null ) {
+				const title = getBlockType( name )?.title ?? name;
+				createErrorNotice(
+					sprintf(
+						/* translators: %s: block pattern title. */
+						__( 'Block "%s" can\'t be inserted.' ),
+						title
+					),
+					{
+						type: 'snackbar',
+						id: 'inserter-notice',
+					}
+				);
+				return;
+			}
+
 			const insertedBlock =
 				syncStatus === 'unsynced'
 					? parse( content, {
@@ -66,15 +87,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 							initialAttributes,
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
-
 			onInsert(
 				insertedBlock,
 				undefined,
 				shouldFocusBlock,
-				_rootClientId
+				destinationClientId
 			);
 		},
-		[ onInsert ]
+		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
 	);
 
 	return [ items, categories, collections, onSelectItem ];

package/src/components/inserter/hooks/use-insertion-point.js

@@ -71,7 +71,11 @@ function useInsertionPoint( {
 	selectBlockOnInsert = true,
 } ) {
 	const registry = useRegistry();
-	const { getSelectedBlock } = useSelect( blockEditorStore );
+	const {
+		getSelectedBlock,
+		getClosestAllowedInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
 			const {
@@ -79,15 +83,24 @@ function useInsertionPoint( {
 				getBlockRootClientId,
 				getBlockIndex,
 				getBlockOrder,
-			} = select( blockEditorStore );
+				getInsertionPoint,
+			} = unlock( select( blockEditorStore ) );
 			const selectedBlockClientId = getSelectedBlockClientId();
-
 			let _destinationRootClientId = rootClientId;
 			let _destinationIndex;
+			const insertionPoint = getInsertionPoint();
 
 			if ( insertionIndex !== undefined ) {
 				// Insert into a specific index.
 				_destinationIndex = insertionIndex;
+			} else if (
+				insertionPoint &&
+				insertionPoint.hasOwnProperty( 'index' )
+			) {
+				_destinationRootClientId = insertionPoint?.rootClientId
+					? insertionPoint.rootClientId
+					: rootClientId;
+				_destinationIndex = insertionPoint.index;
 			} else if ( clientId ) {
 				// Insert after a specific client ID.
 				_destinationIndex = getBlockIndex( clientId );
@@ -193,21 +206,30 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
-				showInsertionPoint(
-					item.rootClientId,
-					getIndex( {
-						destinationRootClientId,
-						destinationIndex,
-						rootClientId: item.rootClientId,
-						registry,
-					} )
-				);
+			if ( item && ! isBlockInsertionPointVisible() ) {
+				const allowedDestinationRootClientId =
+					getClosestAllowedInsertionPoint(
+						item.name,
+						destinationRootClientId
+					);
+				if ( allowedDestinationRootClientId !== null ) {
+					showInsertionPoint(
+						allowedDestinationRootClientId,
+						getIndex( {
+							destinationRootClientId,
+							destinationIndex,
+							rootClientId: allowedDestinationRootClientId,
+							registry,
+						} )
+					);
+				}
 			} else {
 				hideInsertionPoint();
 			}
 		},
 		[
+			getClosestAllowedInsertionPoint,
+			isBlockInsertionPointVisible,
 			showInsertionPoint,
 			hideInsertionPoint,
 			destinationRootClientId,

package/src/components/inserter/hooks/use-patterns-state.js

@@ -11,33 +11,52 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { isFiltered } from '../../../store/utils';
 
 /**
  * Retrieves the block patterns inserter state.
  *
  * @param {Function} onInsert         function called when inserter a list of blocks.
  * @param {string=}  rootClientId     Insertion's root client ID.
- *
  * @param {string}   selectedCategory The selected pattern category.
+ * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
+ *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
+const usePatternsState = (
+	onInsert,
+	rootClientId,
+	selectedCategory,
+	isQuick
+) => {
+	const options = useMemo(
+		() => ( { [ isFiltered ]: !! isQuick } ),
+		[ isQuick ]
+	);
 	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
-				select( blockEditorStore );
+			const { getSettings, __experimentalGetAllowedPatterns } = unlock(
+				select( blockEditorStore )
+			);
 			const {
 				__experimentalUserPatternCategories,
 				__experimentalBlockPatternCategories,
 			} = getSettings();
 			return {
-				patterns: __experimentalGetAllowedPatterns( rootClientId ),
+				patterns: __experimentalGetAllowedPatterns(
+					rootClientId,
+					options
+				),
 				userPatternCategories: __experimentalUserPatternCategories,
 				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, options ]
+	);
+	const { getClosestAllowedInsertionPointForPattern } = unlock(
+		useSelect( blockEditorStore )
 	);
 
 	const allCategories = useMemo( () => {
@@ -58,6 +77,15 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
+			const destinationRootClientId = isQuick
+				? rootClientId
+				: getClosestAllowedInsertionPointForPattern(
+						pattern,
+						rootClientId
+				  );
+			if ( destinationRootClientId === null ) {
+				return;
+			}
 			const patternBlocks =
 				pattern.type === INSERTER_PATTERN_TYPES.user &&
 				pattern.syncStatus !== 'unsynced'
@@ -77,7 +105,9 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 					}
 					return clonedBlock;
 				} ),
-				pattern.name
+				pattern.name,
+				false,
+				destinationRootClientId
 			);
 			createSuccessNotice(
 				sprintf(
@@ -87,11 +117,18 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 				),
 				{
 					type: 'snackbar',
-					id: 'block-pattern-inserted-notice',
+					id: 'inserter-notice',
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert, selectedCategory ]
+		[
+			createSuccessNotice,
+			onInsert,
+			selectedCategory,
+			rootClientId,
+			getClosestAllowedInsertionPointForPattern,
+			isQuick,
+		]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];