@wordpress/block-editor 13.3.0 → 13.4.0

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,27 +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, 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 +73,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 +106,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,
@@ -110,7 +125,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 			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 ] = {
@@ -123,7 +138,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 			}
 
 			// Remove row styles in auto mode
-			if ( rowCount ) {
+			if ( gridLayout.rowCount ) {
 				updates[ gridClientId ] = {
 					layout: {
 						...gridLayout,
@@ -146,23 +161,47 @@ 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, 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

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

@@ -147,7 +147,7 @@ function InserterMenu(
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
 	const showZoomOut =
-		showPatternPanel && window.__experimentalEnableZoomedOutPatternsTab;
+		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
 
 	useZoomOut( showZoomOut );
 

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>
 				) : (

package/src/components/inserter/style.scss

@@ -228,6 +228,13 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
+	// Temporarily disable the component's indicator animation.
+	// TODO: remove in favor of using the native component's styles and behavior,
+	// see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
+	&[aria-orientation="vertical"]::after {
+		content: none;
+	}
+
 	.block-editor-inserter__category-tab {
 		// Account for the icon on the right so that it's visually balanced.
 		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
@@ -284,34 +291,35 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__category-panel {
-	background: $gray-100;
-	border-top: $border-width solid $gray-200;
-	box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-	position: absolute;
-	top: -$border-width;
-	left: 0;
-	height: calc(100% + #{$border-width});
-	width: 100%;
-	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
+	padding: 0 $grid-unit-20;
 
 	@include break-medium {
 		border-left: $border-width solid $gray-200;
 		padding: 0;
 		left: 100%;
 		width: 300px;
-	}
-
-	.block-editor-inserter__media-list,
-	.block-editor-block-patterns-list {
-		padding: 0 $grid-unit-30 $grid-unit-20;
+		position: absolute;
+		top: -$border-width;
+		height: calc(100% + #{$border-width});
+		background: $gray-100;
+		border-top: $border-width solid $gray-200;
+		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+
+		.block-editor-inserter__media-list,
+		.block-editor-block-patterns-list {
+			padding: 0 $grid-unit-30 $grid-unit-20;
+		}
 	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-	padding: $grid-unit-10 $grid-unit-30;
+	padding: $grid-unit-10 0;
+	@include break-medium {
+		padding: $grid-unit-10 $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -326,7 +334,6 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__preview-content {
-	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
 	display: grid;
 	flex-grow: 1;
@@ -516,10 +523,15 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
+		margin-bottom: $grid-unit-30;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
-		&:not(:focus-within) {
-			--wp-components-color-background: #{$white};
+		@include break-medium() {
+			margin-bottom: 0;
+			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
+
+			&:not(:focus-within) {
+				--wp-components-color-background: #{$white};
+			}
 		}
 	}
 }
@@ -643,30 +655,6 @@ $block-inserter-tabs-height: 44px;
 	margin: $grid-unit-20 $grid-unit-20 0;
 }
 
-.reusable-blocks-menu-items__rename-hint {
-	align-items: top;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-	color: $gray-900;
-	display: flex;
-	flex-direction: row;
-	max-width: 380px;
-}
-
-.reusable-blocks-menu-items__rename-hint-content {
-	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
-}
-
-.reusable-blocks-menu-items__rename-hint-dismiss {
-	// The dismiss button has a lot of empty space through its padding.
-	// Apply margin to visually align the icon with the top of the text to its left.
-	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
-}
-
-.components-menu-group .reusable-blocks-menu-items__rename-hint {
-	margin: 0;
-}
-
 .block-editor-patterns__sync-status-filter {
 	.components-input-control__container {
 		select.components-select-control__input {
@@ -691,4 +679,30 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
+
+	// Remove doubled-up shadow that occurs when categories panel is opened, only in zoom out.
+	// Shadow cannot be removed from the source, as it is required when not zoomed out.
+	.block-editor-inserter__category-panel {
+		box-shadow: none;
+	}
+}
+
+.show-icon-labels {
+	@media (max-width: #{ ($break-large - 1) }) {
+		.block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
+			flex-direction: column;
+			.block-editor-patterns__grid-pagination-previous,
+			.block-editor-patterns__grid-pagination-next {
+				flex-direction: column;
+			}
+		}
+	}
+
+	.block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
+		flex-direction: column;
+		.block-editor-patterns__grid-pagination-previous,
+		.block-editor-patterns__grid-pagination-next {
+			flex-direction: column;
+		}
+	}
 }

package/src/components/inserter-draggable-blocks/index.js

@@ -43,6 +43,14 @@ const InserterDraggableBlocks = ( {
 		useDispatch( blockEditorStore )
 	);
 
+	if ( ! isEnabled ) {
+		return children( {
+			draggable: false,
+			onDragStart: undefined,
+			onDragEnd: undefined,
+		} );
+	}
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
@@ -72,9 +80,9 @@ const InserterDraggableBlocks = ( {
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
-					draggable: isEnabled,
-					onDragStart: isEnabled ? onDraggableStart : undefined,
-					onDragEnd: isEnabled ? onDraggableEnd : undefined,
+					draggable: true,
+					onDragStart: onDraggableStart,
+					onDragEnd: onDraggableEnd,
 				} );
 			} }
 		</Draggable>

package/src/components/inspector-controls-tabs/settings-tab.js

@@ -4,7 +4,6 @@
 import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
-import SettingsTabHint from './settings-tab-hint';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
@@ -15,7 +14,6 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 				<AdvancedControls />
 			</div>
 		) }
-		<SettingsTabHint />
 	</>
 );
 

package/src/components/inspector-controls-tabs/style.scss

@@ -5,24 +5,3 @@
 		}
 	}
 }
-
-.block-editor-inspector-controls-tabs__hint {
-	align-items: flex-start;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-	color: $gray-900;
-	display: flex;
-	flex-direction: row;
-	margin: $grid-unit-20;
-	font-size: $default-font-size;
-}
-
-.block-editor-inspector-controls-tabs__hint-content {
-	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
-}
-
-.block-editor-inspector-controls-tabs__hint-dismiss {
-	// The dismiss button has a lot of empty space through its padding.
-	// Apply margin to visually align the icon with the top of the text to its left.
-	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
-}

package/src/components/list-view/block-select-button.js

@@ -10,12 +10,10 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -65,14 +63,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	const positionLabel = blockInformation?.positionLabel
-		? sprintf(
-				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
-				__( 'Position: %1$s' ),
-				blockInformation.positionLabel
-		  )
-		: '';
-
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
 	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
@@ -136,10 +126,10 @@ function ListViewBlockSelectButton(
 						</Truncate>
 					</span>
 				) }
-				{ positionLabel && isSticky && (
-					<Tooltip text={ positionLabel }>
+				{ isSticky && (
+					<span className="block-editor-list-view-block-select-button__sticky">
 						<Icon icon={ pinSmall } />
-					</Tooltip>
+					</span>
 				) }
 				{ images.length ? (
 					<span

package/src/components/list-view/block.js

@@ -465,8 +465,10 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockPropertiesDescription =
-		getBlockPropertiesDescription( isLocked );
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -562,7 +564,12 @@ function ListViewBlock( {
 							ariaDescribedBy={ descriptionId }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
 						</AriaReferencedText>
 					</div>
 				) }