@wordpress/block-editor 13.2.0 → 13.4.0

package/src/components/grid/style.scss

@@ -12,6 +12,9 @@
 				pointer-events: all;
 			}
 		}
+		.block-editor-inserter * {
+			pointer-events: auto;
+		}
 	}
 }
 
@@ -20,24 +23,55 @@
 }
 
 .block-editor-grid-visualizer__cell {
-	align-items: center;
-	display: flex;
-	justify-content: center;
+	display: grid;
+	position: relative;
+
+	.block-editor-inserter {
+		color: inherit;
+		z-index: 32;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+
+		.block-editor-grid-visualizer__appender {
+			box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor  20%, #0000);
+			color: inherit;
+			overflow: hidden;
+			height: 100%;
+			width: 100%;
+			padding: 0 !important;
+			opacity: 0;
+		}
+
+	}
+
+	&.is-highlighted {
+		.block-editor-inserter,
+		.block-editor-grid-visualizer__drop-zone {
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	&:hover .block-editor-grid-visualizer__appender,
+	.block-editor-grid-visualizer__appender:focus {
+		opacity: 1;
+		background-color: color-mix(in srgb, currentColor  20%, #0000);
+	}
 }
 
 .block-editor-grid-visualizer__drop-zone {
 	background: rgba($gray-400, 0.1);
-	border: $border-width dotted $gray-300;
 	width: 100%;
 	height: 100%;
+	grid-column: 1;
+	grid-row: 1;
 
 	// Make drop zone 8x8 at minimum so that it's easier to drag into. This will overflow the parent.
 	min-width: $grid-unit-10;
 	min-height: $grid-unit-10;
-
-	&.is-highlighted {
-		background: var(--wp-admin-theme-color);
-	}
 }
 
 .block-editor-grid-item-resizer {
@@ -61,3 +95,118 @@
 		}
 	}
 }
+
+.block-editor-grid-item-mover__move-button-container {
+	display: flex;
+	padding: 0;
+	border: none;
+	justify-content: center;
+
+	.block-editor-grid-item-mover-button {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		overflow: hidden;
+		padding-left: 0;
+		padding-right: 0;
+
+		svg {
+			min-width: $grid-unit-30;
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-block-ui;
+			height: $grid-unit-40;
+
+			// Position the focus rectangle.
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus,
+		&:focus:enabled,
+		&:focus::before {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible::before {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+}
+
+
+.block-editor-grid-item-mover__move-vertical-button-container {
+	display: flex;
+	position: relative;
+	@include break-small() {
+		flex-direction: column;
+		justify-content: space-around;
+
+		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+			width: 100%;
+			min-width: 0 !important; // overrides default button width.
+
+			// Focus style.
+			&::before {
+				height: calc(100% - 4px);
+			}
+		}
+
+		.block-editor-grid-item-mover-button.is-up-button svg,
+		.block-editor-grid-item-mover-button.is-down-button svg {
+			flex-shrink: 0;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+		}
+	}
+}
+
+.show-icon-labels {
+
+	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
+		border-right: 1px solid $gray-700;
+		padding-right: 12px;
+	}
+
+	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
+		border-left: 1px solid $gray-700;
+		padding-left: 12px;
+	}
+
+
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		&::before {
+			@include break-small() {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-200;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
+		}
+	}
+
+}
+

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

@@ -2,7 +2,8 @@
  * 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
@@ -11,13 +12,15 @@ import { store as blockEditorStore } from '../../store';
 import { GridRect } from './utils';
 
 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 ]
@@ -27,30 +30,32 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const selectedBlockRect = useMemo(
+		() =>
+			selectedBlockLayout ? new GridRect( selectedBlockLayout ) : null,
+		[ selectedBlockLayout ]
+	);
+
+	const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+
 	useEffect( () => {
 		const updates = {};
 
-		const { columnCount, rowCount = 2 } = gridLayout;
-		const isManualGrid = !! columnCount;
-
-		if ( isManualGrid ) {
-			const rects = [];
-			let cellsTaken = 0;
+		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 || {};
-				cellsTaken += columnSpan * rowSpan;
+				} = getBlockAttributes( clientId ).style?.layout ?? {};
 				if ( ! columnStart || ! rowStart ) {
 					continue;
 				}
-				rects.push(
+				occupiedRects.push(
 					new GridRect( {
 						columnStart,
 						rowStart,
@@ -60,33 +65,27 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 				);
 			}
 
-			// Ensure there's enough rows to fit all blocks.
-			const minimumNeededRows = Math.ceil( cellsTaken / columnCount );
-			if ( rowCount < minimumNeededRows ) {
-				updates[ gridClientId ] = {
-					layout: {
-						...gridLayout,
-						rowCount: minimumNeededRows,
-					},
-				};
-			}
-
 			// When in manual mode, ensure that every block has a columnStart and rowStart value.
 			for ( const clientId of blockOrder ) {
 				const attributes = getBlockAttributes( clientId );
-				const { columnStart, rowStart, columnSpan, rowSpan } =
-					attributes.style?.layout || {};
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout ?? {};
 				if ( columnStart && rowStart ) {
 					continue;
 				}
-				const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
-					rects,
-					columnCount,
-					minimumNeededRows,
+				const [ newColumnStart, newRowStart ] = placeBlock(
+					occupiedRects,
+					gridLayout.columnCount,
 					columnSpan,
-					rowSpan
+					rowSpan,
+					previouslySelectedBlockRect?.columnEnd,
+					previouslySelectedBlockRect?.rowEnd
 				);
-				rects.push(
+				occupiedRects.push(
 					new GridRect( {
 						columnStart: newColumnStart,
 						rowStart: newRowStart,
@@ -105,12 +104,28 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Ensure there's enough rows to fit all blocks.
+			const bottomMostRow = Math.max(
+				...occupiedRects.map( ( r ) => r.rowEnd )
+			);
+			if (
+				! gridLayout.rowCount ||
+				gridLayout.rowCount < bottomMostRow
+			) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: bottomMostRow,
+					},
+				};
+			}
 		} 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 || {};
+					attributes.style?.layout ?? {};
 				// Only update attributes if columnStart or rowStart are set.
 				if ( columnStart || rowStart ) {
 					updates[ clientId ] = {
@@ -121,6 +136,16 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					};
 				}
 			}
+
+			// Remove row styles in auto mode
+			if ( gridLayout.rowCount ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: undefined,
+					},
+				};
+			}
 		}
 
 		if ( Object.keys( updates ).length ) {
@@ -136,32 +161,49 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		gridClientId,
 		gridLayout,
 		blockOrder,
-		// Needed for linter:
+		previouslySelectedBlockRect,
+		// These won't change, but the linter thinks they might:
 		__unstableMarkNextChangeAsNotPersistent,
 		getBlockAttributes,
 		updateBlockAttributes,
 	] );
 }
 
-function getFirstEmptyCell(
-	rects,
-	columnCount,
-	rowCount,
-	columnSpan = 1,
-	rowSpan = 1
+/**
+ * @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 = 1; row <= rowCount; row++ ) {
-		for ( let column = 1; column <= columnCount; column++ ) {
-			const rect = new GridRect( {
+	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 ];
 			}
 		}
 	}
-	return [ 1, 1 ];
 }

package/src/components/iframe/content.scss

@@ -11,6 +11,7 @@
 .block-editor-iframe__scale-container {
 	width: 100%;
 	height: 100%;
+	display: flex;
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
@@ -53,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/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;
 	}
 
@@ -269,7 +272,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		props.ref,
 		__unstableDisableDropZone ||
 		isDropZoneDisabled ||
-		( layout?.columnCount && window.__experimentalEnableGridInteractivity )
+		( layout?.isManualPlacement &&
+			window.__experimentalEnableGridInteractivity )
 			? null
 			: blockDropZoneRef,
 	] );

package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -2,9 +2,8 @@
  * Internal dependencies
  */
 import { PatternCategoryPreviews } from './pattern-category-previews';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-function PatternCategoryPreviewPanelInner( {
+export function PatternCategoryPreviewPanel( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,17 +23,3 @@ function PatternCategoryPreviewPanelInner( {
 		/>
 	);
 }
-
-function PatternCategoryPreviewPanelWithZoomOut( props ) {
-	useZoomOut();
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}
-
-export function PatternCategoryPreviewPanel( props ) {
-	// When the pattern panel is showing, we want to use zoom out mode
-	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
-		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
-	}
-
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}

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/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 }