@wordpress/block-editor 13.2.0 → 13.3.0

package/src/components/global-styles/use-global-styles-output.js

@@ -31,6 +31,7 @@ import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { getDuotoneFilter } from '../duotone/utils';
 import { getGapCSSValue } from '../../hooks/gap';
+import { setBackgroundStyleDefaults } from '../../hooks/background';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
@@ -387,6 +388,20 @@ export function getStylesDeclarations(
 		[]
 	);
 
+	/*
+	 * Set background defaults.
+	 * Applies to all background styles except the top-level site background.
+	 */
+	if ( ! isRoot && !! blockStyles.background ) {
+		blockStyles = {
+			...blockStyles,
+			background: {
+				...blockStyles.background,
+				...setBackgroundStyleDefaults( blockStyles.background ),
+			},
+		};
+	}
+
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
@@ -656,7 +671,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						}
 						const variationSelector =
 							blockSelectors[ blockName ]
-								.styleVariationSelectors?.[ variationName ];
+								?.styleVariationSelectors?.[ variationName ];
 
 						// Process the variation's inner element styles.
 						// This comes before the inner block styles so the
@@ -685,18 +700,18 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 								const variationBlockSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.selector
+										?.selector
 								);
 								const variationDuotoneSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.duotoneSelector
+										?.duotoneSelector
 								);
 								const variationFeatureSelectors =
 									scopeFeatureSelectors(
 										variationSelector,
 										blockSelectors[ variationBlockName ]
-											.featureSelectors
+											?.featureSelectors
 									);
 
 								const variationBlockStyleNodes =
@@ -713,10 +728,10 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									featureSelectors: variationFeatureSelectors,
 									fallbackGapValue:
 										blockSelectors[ variationBlockName ]
-											.fallbackGapValue,
+											?.fallbackGapValue,
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
-											.hasLayoutSupport,
+											?.hasLayoutSupport,
 									styles: variationBlockStyleNodes,
 								} );
 
@@ -924,8 +939,8 @@ export const toStyles = (
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 

package/src/components/global-styles/utils.js

@@ -3,6 +3,11 @@
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
 
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -136,12 +141,18 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-	popoverProps: {
-		placement: 'left-start',
-		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-	},
-};
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}
 
 function findInPresetsBy(
 	features,

package/src/components/grid/grid-item-movers.js

@@ -32,13 +32,9 @@ export function GridItemMovers( {
 	const columnCount = parentLayout?.columnCount;
 	const rowCount = parentLayout?.rowCount;
 
-	const columnCountNumber = parseInt( columnCount, 10 );
-	const rowStartNumber = parseInt( rowStart, 10 );
-	const columnStartNumber = parseInt( columnStart, 10 );
-
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		gridClientId,
-		columnCountNumber
+		columnCount
 	);
 
 	return (
@@ -46,7 +42,7 @@ export function GridItemMovers( {
 			<ToolbarButton
 				icon={ arrowUp }
 				label={ __( 'Move block up' ) }
-				isDisabled={ rowStart <= 1 }
+				disabled={ rowStart <= 1 }
 				onClick={ () => {
 					onChange( {
 						rowStart: rowStart - 1,
@@ -56,17 +52,14 @@ export function GridItemMovers( {
 						[ blockClientId ],
 						gridClientId,
 						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber - 1
-						)
+						getNumberOfBlocksBeforeCell( columnStart, rowStart - 1 )
 					);
 				} }
 			/>
 			<ToolbarButton
 				icon={ arrowDown }
 				label={ __( 'Move block down' ) }
-				isDisabled={ rowCount && rowEnd >= rowCount }
+				disabled={ rowCount && rowEnd >= rowCount }
 				onClick={ () => {
 					onChange( {
 						rowStart: rowStart + 1,
@@ -76,50 +69,41 @@ export function GridItemMovers( {
 						[ blockClientId ],
 						gridClientId,
 						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber + 1
-						)
+						getNumberOfBlocksBeforeCell( columnStart, rowStart + 1 )
 					);
 				} }
 			/>
 			<ToolbarButton
 				icon={ arrowLeft }
 				label={ __( 'Move block left' ) }
-				isDisabled={ columnStart <= 1 }
+				disabled={ columnStart <= 1 }
 				onClick={ () => {
 					onChange( {
-						columnStart: columnStartNumber - 1,
+						columnStart: columnStart - 1,
 					} );
 					__unstableMarkNextChangeAsNotPersistent();
 					moveBlocksToPosition(
 						[ blockClientId ],
 						gridClientId,
 						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber - 1,
-							rowStartNumber
-						)
+						getNumberOfBlocksBeforeCell( columnStart - 1, rowStart )
 					);
 				} }
 			/>
 			<ToolbarButton
 				icon={ arrowRight }
 				label={ __( 'Move block right' ) }
-				isDisabled={ columnCount && columnEnd >= columnCount }
+				disabled={ columnCount && columnEnd >= columnCount }
 				onClick={ () => {
 					onChange( {
-						columnStart: columnStartNumber + 1,
+						columnStart: columnStart + 1,
 					} );
 					__unstableMarkNextChangeAsNotPersistent();
 					moveBlocksToPosition(
 						[ blockClientId ],
 						gridClientId,
 						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber + 1,
-							rowStartNumber
-						)
+						getNumberOfBlocksBeforeCell( columnStart + 1, rowStart )
 					);
 				} }
 			/>

package/src/components/grid/grid-item-resizer.js

@@ -19,7 +19,7 @@ export function GridItemResizer( {
 } ) {
 	const blockElement = useBlockElement( clientId );
 	const rootBlockElement = blockElement?.parentElement;
-	const { columnCount } = parentLayout;
+	const { isManualPlacement } = parentLayout;
 
 	if ( ! blockElement || ! rootBlockElement ) {
 		return null;
@@ -33,7 +33,8 @@ export function GridItemResizer( {
 			rootBlockElement={ rootBlockElement }
 			onChange={ onChange }
 			isManualGrid={
-				!! columnCount && window.__experimentalEnableGridInteractivity
+				isManualPlacement &&
+				window.__experimentalEnableGridInteractivity
 			}
 		/>
 	);

package/src/components/grid/grid-visualizer.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useState, useEffect, forwardRef, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 
@@ -18,6 +18,7 @@ import BlockPopoverCover from '../block-popover/cover';
 import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import ButtonBlockAppender from '../button-block-appender';
 
 export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	const isDistractionFree = useSelect(
@@ -32,11 +33,11 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	}
 
 	const isManualGrid =
-		parentLayout?.columnCount &&
+		parentLayout?.isManualPlacement &&
 		window.__experimentalEnableGridInteractivity;
 	return (
 		<GridVisualizerGrid
-			clientId={ clientId }
+			gridClientId={ clientId }
 			gridElement={ gridElement }
 			isManualGrid={ isManualGrid }
 			ref={ contentRef }
@@ -45,12 +46,11 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 }
 
 const GridVisualizerGrid = forwardRef(
-	( { clientId, gridElement, isManualGrid }, ref ) => {
+	( { gridClientId, gridElement, isManualGrid }, ref ) => {
 		const [ gridInfo, setGridInfo ] = useState( () =>
 			getGridInfo( gridElement )
 		);
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
-		const [ highlightedRect, setHighlightedRect ] = useState( null );
 
 		useEffect( () => {
 			const observers = [];
@@ -88,7 +88,7 @@ const GridVisualizerGrid = forwardRef(
 				className={ clsx( 'block-editor-grid-visualizer', {
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
-				clientId={ clientId }
+				clientId={ gridClientId }
 				__unstablePopoverSlot="block-toolbar"
 			>
 				<div
@@ -96,51 +96,102 @@ const GridVisualizerGrid = forwardRef(
 					className="block-editor-grid-visualizer__grid"
 					style={ gridInfo.style }
 				>
-					{ isManualGrid
-						? range( 1, gridInfo.numRows ).map( ( row ) =>
-								range( 1, gridInfo.numColumns ).map(
-									( column ) => (
-										<GridVisualizerCell
-											key={ `${ row }-${ column }` }
-											color={ gridInfo.currentColor }
-										>
-											<GridVisualizerDropZone
-												column={ column }
-												row={ row }
-												gridClientId={ clientId }
-												gridInfo={ gridInfo }
-												highlightedRect={
-													highlightedRect
-												}
-												setHighlightedRect={
-													setHighlightedRect
-												}
-											/>
-										</GridVisualizerCell>
-									)
-								)
-						  )
-						: Array.from(
-								{ length: gridInfo.numItems },
-								( _, i ) => (
-									<GridVisualizerCell
-										key={ i }
-										color={ gridInfo.currentColor }
-									/>
-								)
-						  ) }
+					{ isManualGrid ? (
+						<ManualGridVisualizer
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+						/>
+					) : (
+						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+							<GridVisualizerCell
+								key={ i }
+								color={ gridInfo.currentColor }
+							/>
+						) )
+					) }
 				</div>
 			</BlockPopoverCover>
 		);
 	}
 );
 
-function GridVisualizerCell( { color, children } ) {
+function ManualGridVisualizer( { gridClientId, gridInfo } ) {
+	const [ highlightedRect, setHighlightedRect ] = useState( null );
+
+	const gridItems = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
+		[ gridClientId ]
+	);
+	const occupiedRects = useMemo( () => {
+		const rects = [];
+		for ( const block of gridItems ) {
+			const {
+				columnStart,
+				rowStart,
+				columnSpan = 1,
+				rowSpan = 1,
+			} = block.attributes.style?.layout || {};
+			if ( ! columnStart || ! rowStart ) {
+				continue;
+			}
+			rects.push(
+				new GridRect( {
+					columnStart,
+					rowStart,
+					columnSpan,
+					rowSpan,
+				} )
+			);
+		}
+		return rects;
+	}, [ gridItems ] );
+
+	return range( 1, gridInfo.numRows ).map( ( row ) =>
+		range( 1, gridInfo.numColumns ).map( ( column ) => {
+			const isCellOccupied = occupiedRects.some( ( rect ) =>
+				rect.contains( column, row )
+			);
+			const isHighlighted =
+				highlightedRect?.contains( column, row ) ?? false;
+			return (
+				<GridVisualizerCell
+					key={ `${ row }-${ column }` }
+					color={ gridInfo.currentColor }
+					className={ isHighlighted && 'is-highlighted' }
+				>
+					{ isCellOccupied ? (
+						<GridVisualizerDropZone
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) : (
+						<GridVisualizerAppender
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) }
+				</GridVisualizerCell>
+			);
+		} )
+	);
+}
+
+function GridVisualizerCell( { color, children, className } ) {
 	return (
 		<div
-			className="block-editor-grid-visualizer__cell"
+			className={ clsx(
+				'block-editor-grid-visualizer__cell',
+				className
+			) }
 			style={ {
 				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+				color,
 			} }
 		>
 			{ children }
@@ -148,15 +199,15 @@ function GridVisualizerCell( { color, children } ) {
 	);
 }
 
-function GridVisualizerDropZone( {
+function useGridVisualizerDropZone(
 	column,
 	row,
 	gridClientId,
 	gridInfo,
-	highlightedRect,
-	setHighlightedRect,
-} ) {
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	setHighlightedRect
+) {
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const {
 		updateBlockAttributes,
 		moveBlocksToPosition,
@@ -168,7 +219,7 @@ function GridVisualizerDropZone( {
 		gridInfo.numColumns
 	);
 
-	const ref = useDropZoneWithValidation( {
+	return useDropZoneWithValidation( {
 		validateDrag( srcClientId ) {
 			const attributes = getBlockAttributes( srcClientId );
 			const rect = new GridRect( {
@@ -221,21 +272,87 @@ function GridVisualizerDropZone( {
 			__unstableMarkNextChangeAsNotPersistent();
 			moveBlocksToPosition(
 				[ srcClientId ],
-				gridClientId,
+				getBlockRootClientId( srcClientId ),
 				gridClientId,
 				getNumberOfBlocksBeforeCell( column, row )
 			);
 		},
 	} );
+}
 
-	const isHighlighted = highlightedRect?.contains( column, row ) ?? false;
-
+function GridVisualizerDropZone( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
 	return (
 		<div
-			ref={ ref }
-			className={ clsx( 'block-editor-grid-visualizer__drop-zone', {
-				'is-highlighted': isHighlighted,
-			} ) }
+			className="block-editor-grid-visualizer__drop-zone"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+		/>
+	);
+}
+
+function GridVisualizerAppender( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	return (
+		<ButtonBlockAppender
+			rootClientId={ gridClientId }
+			className="block-editor-grid-visualizer__appender"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+			style={ {
+				color: gridInfo.currentColor,
+			} }
+			onSelect={ ( block ) => {
+				if ( ! block ) {
+					return;
+				}
+				updateBlockAttributes( block.clientId, {
+					style: {
+						layout: {
+							columnStart: column,
+							rowStart: row,
+						},
+					},
+				} );
+				__unstableMarkNextChangeAsNotPersistent();
+				moveBlocksToPosition(
+					[ block.clientId ],
+					gridClientId,
+					gridClientId,
+					getNumberOfBlocksBeforeCell( column, row )
+				);
+			} }
 		/>
 	);
 }

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,4 @@
 		}
 	}
 }
+