@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/grid/use-grid-layout-sync.js

@@ -2,52 +2,66 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { GridRect } from './utils';
+import { setImmutably } from '../../utils/object';
 
 export function useGridLayoutSync( { clientId: gridClientId } ) {
-	const { gridLayout, blockOrder } = useSelect(
+	const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getBlockOrder } =
 				select( blockEditorStore );
+			const selectedBlock = select( blockEditorStore ).getSelectedBlock();
 			return {
 				gridLayout: getBlockAttributes( gridClientId ).layout ?? {},
 				blockOrder: getBlockOrder( gridClientId ),
+				selectedBlockLayout: selectedBlock?.attributes.style?.layout,
 			};
 		},
 		[ gridClientId ]
 	);
 
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const selectedBlockRect = useMemo(
+		() =>
+			selectedBlockLayout ? new GridRect( selectedBlockLayout ) : null,
+		[ selectedBlockLayout ]
+	);
+
+	const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+	const previousIsManualPlacement = usePrevious(
+		gridLayout.isManualPlacement
+	);
+	const previousBlockOrder = usePrevious( blockOrder );
+
 	useEffect( () => {
 		const updates = {};
 
-		const { columnCount, rowCount, isManualPlacement } = gridLayout;
-
-		if ( isManualPlacement ) {
-			const rects = [];
+		if ( gridLayout.isManualPlacement ) {
+			const occupiedRects = [];
 
 			// Respect the position of blocks that already have a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
-				const attributes = getBlockAttributes( clientId );
 				const {
 					columnStart,
 					rowStart,
 					columnSpan = 1,
 					rowSpan = 1,
-				} = attributes.style?.layout || {};
+				} = getBlockAttributes( clientId ).style?.layout ?? {};
 				if ( ! columnStart || ! rowStart ) {
 					continue;
 				}
-				rects.push(
+				occupiedRects.push(
 					new GridRect( {
 						columnStart,
 						rowStart,
@@ -65,17 +79,19 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					rowStart,
 					columnSpan = 1,
 					rowSpan = 1,
-				} = attributes.style?.layout || {};
+				} = attributes.style?.layout ?? {};
 				if ( columnStart && rowStart ) {
 					continue;
 				}
-				const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
-					rects,
-					columnCount,
+				const [ newColumnStart, newRowStart ] = placeBlock(
+					occupiedRects,
+					gridLayout.columnCount,
 					columnSpan,
-					rowSpan
+					rowSpan,
+					previouslySelectedBlockRect?.columnEnd,
+					previouslySelectedBlockRect?.rowEnd
 				);
-				rects.push(
+				occupiedRects.push(
 					new GridRect( {
 						columnStart: newColumnStart,
 						rowStart: newRowStart,
@@ -96,8 +112,13 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 			}
 
 			// Ensure there's enough rows to fit all blocks.
-			const bottomMostRow = Math.max( ...rects.map( ( r ) => r.rowEnd ) );
-			if ( ! rowCount || rowCount < bottomMostRow ) {
+			const bottomMostRow = Math.max(
+				...occupiedRects.map( ( r ) => r.rowEnd )
+			);
+			if (
+				! gridLayout.rowCount ||
+				gridLayout.rowCount < bottomMostRow
+			) {
 				updates[ gridClientId ] = {
 					layout: {
 						...gridLayout,
@@ -105,25 +126,70 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Unset grid layout attributes for blocks removed from the grid.
+			for ( const clientId of previousBlockOrder ?? [] ) {
+				if ( ! blockOrder.includes( clientId ) ) {
+					const rootClientId = getBlockRootClientId( clientId );
+
+					// Block was removed from the editor, so nothing to do.
+					if ( rootClientId === null ) {
+						continue;
+					}
+
+					// Check if the block is being moved to another grid.
+					// If so, do nothing and let the new grid parent handle
+					// the attributes.
+					const rootAttributes = getBlockAttributes( rootClientId );
+					if ( rootAttributes?.layout?.type === 'grid' ) {
+						continue;
+					}
+
+					const attributes = getBlockAttributes( clientId );
+					const {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+						...layout
+					} = attributes.style?.layout ?? {};
+
+					if ( columnStart || rowStart || columnSpan || rowSpan ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
 		} else {
-			// When in auto mode, remove all of the columnStart and rowStart values.
-			for ( const clientId of blockOrder ) {
-				const attributes = getBlockAttributes( clientId );
-				const { columnStart, rowStart, ...layout } =
-					attributes.style?.layout || {};
-				// Only update attributes if columnStart or rowStart are set.
-				if ( columnStart || rowStart ) {
-					updates[ clientId ] = {
-						style: {
-							...attributes.style,
-							layout,
-						},
-					};
+			// Remove all of the columnStart and rowStart values
+			// when switching from manual to auto mode,
+			if ( previousIsManualPlacement === true ) {
+				for ( const clientId of blockOrder ) {
+					const attributes = getBlockAttributes( clientId );
+					const { columnStart, rowStart, ...layout } =
+						attributes.style?.layout ?? {};
+					// Only update attributes if columnStart or rowStart are set.
+					if ( columnStart || rowStart ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
 				}
 			}
 
 			// Remove row styles in auto mode
-			if ( rowCount ) {
+			if ( gridLayout.rowCount ) {
 				updates[ gridClientId ] = {
 					layout: {
 						...gridLayout,
@@ -145,24 +211,51 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		// Actual deps to sync:
 		gridClientId,
 		gridLayout,
+		previousBlockOrder,
 		blockOrder,
-		// Needed for linter:
+		previouslySelectedBlockRect,
+		previousIsManualPlacement,
+		// These won't change, but the linter thinks they might:
 		__unstableMarkNextChangeAsNotPersistent,
 		getBlockAttributes,
+		getBlockRootClientId,
 		updateBlockAttributes,
 	] );
 }
 
-function getFirstEmptyCell( rects, columnCount, columnSpan = 1, rowSpan = 1 ) {
-	for ( let row = 1; ; row++ ) {
-		for ( let column = 1; column <= columnCount; column++ ) {
-			const rect = new GridRect( {
+/**
+ * @param {GridRect[]} occupiedRects
+ * @param {number}     gridColumnCount
+ * @param {number}     blockColumnSpan
+ * @param {number}     blockRowSpan
+ * @param {number?}    startColumn
+ * @param {number?}    startRow
+ */
+function placeBlock(
+	occupiedRects,
+	gridColumnCount,
+	blockColumnSpan,
+	blockRowSpan,
+	startColumn = 1,
+	startRow = 1
+) {
+	for ( let row = startRow; ; row++ ) {
+		for (
+			let column = row === startRow ? startColumn : 1;
+			column <= gridColumnCount;
+			column++
+		) {
+			const candidateRect = new GridRect( {
 				columnStart: column,
 				rowStart: row,
-				columnSpan,
-				rowSpan,
+				columnSpan: blockColumnSpan,
+				rowSpan: blockRowSpan,
 			} );
-			if ( ! rects.some( ( r ) => r.intersectsRect( rect ) ) ) {
+			if (
+				! occupiedRects.some( ( r ) =>
+					r.intersectsRect( candidateRect )
+				)
+			) {
 				return [ column, row ];
 			}
 		}

package/src/components/iframe/content.scss

@@ -22,9 +22,9 @@
 }
 
 .block-editor-iframe__html {
+	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: transform 0.3s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -54,7 +54,7 @@
 		display: flex;
 		flex-direction: column;
 
-		> .is-root-container {
+		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;
 			display: flex;
 			flex-direction: column;

package/src/components/iframe/index.js

@@ -242,10 +242,8 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
+		prevContainerWidth.current = containerWidth;
+	}, [ containerWidth ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -305,7 +303,7 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 800;
+		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
@@ -378,10 +376,8 @@ function Iframe( {
 			<iframe
 				{ ...props }
 				style={ {
-					border: 0,
 					...props.style,
 					height: props.style?.height,
-					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }

package/src/components/index.js

@@ -170,8 +170,3 @@ export { useBlockEditingMode } from './block-editing-mode';
 export { default as BlockEditorProvider } from './provider';
 export { useSettings, useSetting } from './use-settings';
 export { useBlockCommands } from './use-block-commands';
-
-/*
- * The following rename hint component can be removed in 6.4.
- */
-export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

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

@@ -132,7 +132,10 @@ function UncontrolledInnerBlocks( props ) {
 		/>
 	);
 
-	if ( Object.keys( blockType.providesContext ).length === 0 ) {
+	if (
+		! blockType?.providesContext ||
+		Object.keys( blockType.providesContext ).length === 0
+	) {
 		return items;
 	}
 

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -22,11 +22,31 @@ import {
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 
-const getShouldDisableSyncFilter = ( sourceFilter ) => sourceFilter !== 'all';
-const getShouldDisableNonUserSources = ( category ) => {
+const getShouldDisableSyncFilter = ( sourceFilter ) =>
+	sourceFilter !== 'all' && sourceFilter !== 'user';
+const getShouldHideSourcesFilter = ( category ) => {
 	return category.name === myPatternsCategory.name;
 };
 
+const PATTERN_SOURCE_MENU_OPTIONS = [
+	{
+		value: 'all',
+		label: _x( 'All', 'patterns' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.directory,
+		label: __( 'Pattern Directory' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.theme,
+		label: __( 'Theme & Plugins' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.user,
+		label: __( 'User' ),
+	},
+];
+
 export function PatternsFilter( {
 	setPatternSyncFilter,
 	setPatternSourceFilter,
@@ -50,10 +70,9 @@ export function PatternsFilter( {
 		currentPatternSourceFilter
 	);
 
-	// We also need to disable the directory and theme source filter options if the category
-	// is `myPatterns` otherwise applying them will also just result in no patterns being shown.
-	const shouldDisableNonUserSources =
-		getShouldDisableNonUserSources( category );
+	// We also hide the directory and theme source filter if the category is `myPatterns`
+	// otherwise there will only be one option available.
+	const shouldHideSourcesFilter = getShouldHideSourcesFilter( category );
 
 	const patternSyncMenuOptions = useMemo(
 		() => [
@@ -75,31 +94,6 @@ export function PatternsFilter( {
 		[ shouldDisableSyncFilter ]
 	);
 
-	const patternSourceMenuOptions = useMemo(
-		() => [
-			{
-				value: 'all',
-				label: _x( 'All', 'patterns' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.directory,
-				label: __( 'Pattern Directory' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.theme,
-				label: __( 'Theme & Plugins' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.user,
-				label: __( 'User' ),
-			},
-		],
-		[ shouldDisableNonUserSources ]
-	);
-
 	function handleSetSourceFilterChange( newSourceFilter ) {
 		setPatternSourceFilter( newSourceFilter );
 		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
@@ -136,19 +130,21 @@ export function PatternsFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Source' ) }>
-							<MenuItemsChoice
-								choices={ patternSourceMenuOptions }
-								onSelect={ ( value ) => {
-									handleSetSourceFilterChange( value );
-									scrollContainerRef.current?.scrollTo(
-										0,
-										0
-									);
-								} }
-								value={ currentPatternSourceFilter }
-							/>
-						</MenuGroup>
+						{ ! shouldHideSourcesFilter && (
+							<MenuGroup label={ __( 'Source' ) }>
+								<MenuItemsChoice
+									choices={ PATTERN_SOURCE_MENU_OPTIONS }
+									onSelect={ ( value ) => {
+										handleSetSourceFilterChange( value );
+										scrollContainerRef.current?.scrollTo(
+											0,
+											0
+										);
+									} }
+									value={ currentPatternSourceFilter }
+								/>
+							</MenuGroup>
+						) }
 						<MenuGroup label={ __( 'Type' ) }>
 							<MenuItemsChoice
 								choices={ patternSyncMenuOptions }

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

@@ -1,11 +1,13 @@
 /**
  * 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';
 
@@ -22,6 +24,17 @@ function CategoryTabs( {
 	onSelectCategory,
 	children,
 } ) {
+	// Copied from InterfaceSkeleton.
+	const ANIMATION_DURATION = 0.25;
+	const disableMotion = useReducedMotion();
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
+
+	const previousSelectedCategory = usePrevious( selectedCategory );
+
 	return (
 		<Tabs
 			className="block-editor-inserter__category-tabs"
@@ -62,9 +75,29 @@ function CategoryTabs( {
 					key={ category.name }
 					tabId={ category.name }
 					focusable={ false }
-					className="block-editor-inserter__category-panel"
 				>
-					{ children }
+					<motion.div
+						className="block-editor-inserter__category-panel"
+						initial={
+							! previousSelectedCategory ? 'closed' : 'open'
+						}
+						animate="open"
+						variants={ {
+							open: {
+								transform: 'translateX( 0 )',
+								transitionEnd: {
+									zIndex: '1',
+								},
+							},
+							closed: {
+								transform: 'translateX( -100% )',
+								zIndex: '-1',
+							},
+						} }
+						transition={ defaultTransition }
+					>
+						{ children }
+					</motion.div>
 				</Tabs.TabPanel>
 			) ) }
 		</Tabs>

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

@@ -25,6 +25,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }

package/src/components/inserter/menu.js

@@ -26,7 +26,7 @@ import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
 import BlockPatternsTab from './block-patterns-tab';
-import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
+import { PatternCategoryPreviews } from './block-patterns-tab/pattern-category-previews';
 import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
@@ -147,7 +147,7 @@ function InserterMenu(
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
 	const showZoomOut =
-		showPatternPanel && window.__experimentalEnableZoomedOutPatternsTab;
+		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
 
 	useZoomOut( showZoomOut );
 
@@ -246,7 +246,7 @@ function InserterMenu(
 				selectedCategory={ selectedPatternCategory }
 			>
 				{ showPatternPanel && (
-					<PatternCategoryPreviewPanel
+					<PatternCategoryPreviews
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
 						onHover={ onHoverPattern }

package/src/components/inserter/preview-panel.js

@@ -30,6 +30,15 @@ function InserterPreviewPanel( { item } ) {
 			innerBlocks: example.innerBlocks,
 		} );
 	}, [ name, example, initialAttributes ] );
+	// Same as height of BlockPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 280;
+	const viewportWidth = example?.viewportWidth ?? 500;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
 
 	return (
 		<div className="block-editor-inserter__preview-container">
@@ -38,10 +47,24 @@ function InserterPreviewPanel( { item } ) {
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
 							blocks={ blocks }
-							viewportWidth={ example?.viewportWidth ?? 500 }
-							additionalStyles={ [
-								{ css: 'body { padding: 24px; }' },
-							] }
+							viewportWidth={ viewportWidth }
+							minHeight={ previewHeight }
+							additionalStyles={
+								//We want this CSS to be in sync with the one in BlockPreviewPanel.
+								[
+									{
+										css: `
+										body { 
+											padding: 24px;
+											min-height:${ Math.round( minHeight ) }px;
+											display:flex;
+											align-items:center;
+										}
+										.is-root-container { width: 100%; }
+									`,
+									},
+								]
+							}
 						/>
 					</div>
 				) : (