Merge branch 'trunk' into fix/wp-env-lazy-descriptive-cache-dir

Author: mcsf

packages/base-styles/CHANGELOG.md

@@ -4,11 +4,12 @@
 
 ### Breaking Changes
 
--   Remove the following entries from the `z-index()` helper ([#77619](https://github.com/WordPress/gutenberg/pull/77619), [#77620](https://github.com/WordPress/gutenberg/pull/77620), [#77621](https://github.com/WordPress/gutenberg/pull/77621), [#77714](https://github.com/WordPress/gutenberg/pull/77714), [#77715](https://github.com/WordPress/gutenberg/pull/77715), [#77717](https://github.com/WordPress/gutenberg/pull/77717)):
+-   Remove the following entries from the `z-index()` helper ([#77619](https://github.com/WordPress/gutenberg/pull/77619), [#77620](https://github.com/WordPress/gutenberg/pull/77620), [#77621](https://github.com/WordPress/gutenberg/pull/77621), [#77714](https://github.com/WordPress/gutenberg/pull/77714), [#77715](https://github.com/WordPress/gutenberg/pull/77715), [#77717](https://github.com/WordPress/gutenberg/pull/77717), [#77774](https://github.com/WordPress/gutenberg/pull/77774)):
     -   `.block-editor-block-contextual-toolbar`
     -   `.block-editor-block-list__block {core/image aligned wide or fullwide}`
     -   `.block-editor-block-list__block::before`
     -   `.block-editor-block-list__block.has-block-overlay`
+    -   `.block-editor-block-list__block .reusable-block-edit-panel *`
     -   `.block-editor-block-list__insertion-point`
     -   `.block-editor-block-switcher__arrow`
     -   `.block-editor-url-input__suggestions`

packages/base-styles/_z-index.scss

@@ -38,8 +38,6 @@ $z-layers: (
 	// The draggable element should show up above the entire UI
 	".components-draggable__clone": 1000000000,
 
-	".block-editor-block-list__block .reusable-block-edit-panel *": 1,
-
 	// Show drop zone above most standard content, but below any overlays
 	".components-drop-zone": 40,
 	".components-drop-zone__content": 50,

packages/block-editor/src/components/block-list/content.scss

@@ -153,10 +153,6 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
-	.reusable-block-edit-panel * {
-		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
-	}
-
 	/**
 	 * Notices
 	 */

packages/grid/src/resolve-fill-widths.ts

@@ -5,12 +5,18 @@ import type { DashboardGridLayoutItem } from './types';
 
 /**
  * Resolves items with `width: 'fill'` by computing how many columns they
- * should span. Simulates CSS Grid row packing to determine remaining space
- * in each row, then assigns that space to fill items.
+ * should span. Simulates CSS Grid's row-sparse auto-flow placement so the
+ * resolved span matches the free run that CSS Grid will actually use.
  *
- * Complexity: O(n). The inner look-ahead breaks at the next fill or full
- * item, so the fixed items between two fills are scanned exactly once —
- * each fixed item is visited by at most one fill's look-ahead.
+ * Two paths:
+ * - Fast path (no `height > 1` items): single-row column tracker, O(n).
+ *   Each fixed item between two fills is visited at most once by a fill's
+ *   look-ahead.
+ * - Multi-row path (any item with `height > 1`): per-column skyline that
+ *   tracks shadow occupation of tall tiles. Placement scans rows in
+ *   row-major order, so worst-case cost depends on both columns and rows
+ *   scanned (rows bounded by the sum of item heights), not only on
+ *   `maxColumns`.
  *
  * @param sortedKeys - Item keys in display order.
  * @param layoutMap  - Map of key to DashboardGridLayoutItem.
@@ -25,11 +31,13 @@ export function resolveFillWidths(
 	const resolved = new Map< string, number >();
 	const n = sortedKeys.length;
 
-	// Pre-extract items into a flat array and pre-compute clamped widths.
-	// This avoids repeated Map.get() and Math.min() calls in the hot loops.
+	// Pre-extract items, clamp widths and heights, detect which path to take.
 	const items = new Array< DashboardGridLayoutItem | undefined >( n );
 	const widths = new Array< number >( n );
+	const heights = new Array< number >( n );
 	let hasFill = false;
+	let hasMultiRow = false;
+	let totalRows = 0;
 
 	for ( let i = 0; i < n; i++ ) {
 		const item = layoutMap.get( sortedKeys[ i ] );
@@ -38,31 +46,127 @@ export function resolveFillWidths(
 			item && typeof item.width === 'number'
 				? Math.min( item.width, maxColumns )
 				: 1;
+		// Clamp to a positive integer so `0`, fractional, or negative
+		// values match the `|| 1` defaulting used in GridItem styles.
+		const h = Math.max( 1, Math.floor( item?.height ?? 1 ) );
+		heights[ i ] = h;
 		if ( item?.width === 'fill' ) {
 			hasFill = true;
 		}
+		if ( h > 1 ) {
+			hasMultiRow = true;
+		}
+		totalRows += h;
 	}
 
 	if ( ! hasFill ) {
 		return resolved;
 	}
 
-	let currentCol = 0;
+	if ( ! hasMultiRow ) {
+		let currentCol = 0;
+
+		for ( let i = 0; i < n; i++ ) {
+			const item = items[ i ];
+			if ( ! item ) {
+				continue;
+			}
+
+			if ( item.width === 'full' ) {
+				currentCol = 0;
+				continue;
+			}
+
+			if ( item.width === 'fill' ) {
+				let reserved = 0;
+				for ( let j = i + 1; j < n; j++ ) {
+					const next = items[ j ];
+					if (
+						! next ||
+						next.width === 'full' ||
+						next.width === 'fill'
+					) {
+						break;
+					}
+					const nextW = widths[ j ];
+					if ( currentCol + 1 + reserved + nextW <= maxColumns ) {
+						reserved += nextW;
+					} else {
+						break;
+					}
+				}
+				const fillCols = Math.max(
+					1,
+					maxColumns - currentCol - reserved
+				);
+				resolved.set( item.key, fillCols );
+				currentCol += fillCols;
+			} else {
+				const w = widths[ i ];
+				if ( currentCol + w > maxColumns ) {
+					currentCol = 0;
+				}
+				currentCol += w;
+			}
+
+			if ( currentCol >= maxColumns ) {
+				currentCol = 0;
+			}
+		}
+
+		return resolved;
+	}
+
+	// `rowOccupancy[ col ]` is the index of the next free row at that
+	// column; rows below it are taken by previously placed items. This
+	// captures the "shadow" of tall tiles into the rows they span.
+	const rowOccupancy = new Array< number >( maxColumns ).fill( 0 );
+	let cursorRow = 0;
+	let cursorCol = 0;
 
 	for ( let i = 0; i < n; i++ ) {
 		const item = items[ i ];
 		if ( ! item ) {
 			continue;
 		}
 
+		const h = heights[ i ];
+
 		if ( item.width === 'full' ) {
-			currentCol = 0;
+			let r = cursorRow;
+			for ( let c = 0; c < maxColumns; c++ ) {
+				if ( rowOccupancy[ c ] > r ) {
+					r = rowOccupancy[ c ];
+				}
+			}
+			for ( let c = 0; c < maxColumns; c++ ) {
+				rowOccupancy[ c ] = r + h;
+			}
+			cursorRow = r + h;
+			cursorCol = 0;
 			continue;
 		}
 
 		if ( item.width === 'fill' ) {
-			// Look ahead: reserve columns for subsequent
-			// non-fill items that fit in this row.
+			let r = cursorRow;
+			let c = cursorCol;
+			scan: for ( ; r <= totalRows; r++ ) {
+				const start = r === cursorRow ? cursorCol : 0;
+				for ( c = start; c < maxColumns; c++ ) {
+					if ( rowOccupancy[ c ] <= r ) {
+						break scan;
+					}
+				}
+			}
+			const fillStartRow = r;
+			const fillStartCol = c;
+			let runLength = 0;
+			while (
+				fillStartCol + runLength < maxColumns &&
+				rowOccupancy[ fillStartCol + runLength ] <= fillStartRow
+			) {
+				runLength++;
+			}
 			let reserved = 0;
 			for ( let j = i + 1; j < n; j++ ) {
 				const next = items[ j ];
@@ -74,28 +178,46 @@ export function resolveFillWidths(
 					break;
 				}
 				const nextW = widths[ j ];
-				// 1 = minimum span for the fill item itself
-				if ( currentCol + 1 + reserved + nextW <= maxColumns ) {
+				if ( 1 + reserved + nextW <= runLength ) {
 					reserved += nextW;
 				} else {
 					break;
 				}
 			}
-
-			const fillCols = Math.max( 1, maxColumns - currentCol - reserved );
+			const fillCols = Math.max( 1, runLength - reserved );
 			resolved.set( item.key, fillCols );
-			currentCol += fillCols;
-		} else {
-			const w = widths[ i ];
-			if ( currentCol + w > maxColumns ) {
-				currentCol = 0;
+			for ( let k = 0; k < fillCols; k++ ) {
+				rowOccupancy[ fillStartCol + k ] = fillStartRow + h;
 			}
-			currentCol += w;
+			cursorRow = fillStartRow;
+			cursorCol = fillStartCol + fillCols;
+			continue;
 		}
 
-		if ( currentCol >= maxColumns ) {
-			currentCol = 0;
+		const w = widths[ i ];
+		let r = cursorRow;
+		let c = cursorCol;
+		place: for ( ; r <= totalRows; r++ ) {
+			c = r === cursorRow ? cursorCol : 0;
+			while ( c + w <= maxColumns ) {
+				let blocked = -1;
+				for ( let k = 0; k < w; k++ ) {
+					if ( rowOccupancy[ c + k ] > r ) {
+						blocked = c + k;
+						break;
+					}
+				}
+				if ( blocked === -1 ) {
+					break place;
+				}
+				c = blocked + 1;
+			}
+		}
+		for ( let k = 0; k < w; k++ ) {
+			rowOccupancy[ c + k ] = r + h;
 		}
+		cursorRow = r;
+		cursorCol = c + w;
 	}
 
 	return resolved;

packages/grid/src/test/resolve-fill-widths.test.ts

@@ -183,4 +183,68 @@ describe( 'resolveFillWidths', () => {
 		const result = resolveFillWidths( [], new Map(), 6 );
 		expect( result.size ).toBe( 0 );
 	} );
+
+	describe( 'with multi-row items (height > 1)', () => {
+		it( 'accounts for the shadow of a tall tile on the left', () => {
+			const items: DashboardGridLayoutItem[] = [
+				{ key: 'tall', width: 3, height: 2 },
+				{ key: 'header', width: 9, height: 1 },
+				{ key: 'sub', width: 3, height: 1 },
+				{ key: 'fill', width: 'fill', height: 1 },
+			];
+			const result = resolveFillWidths(
+				keys( items ),
+				makeMap( items ),
+				12
+			);
+			expect( result.get( 'fill' ) ).toBe( 6 );
+		} );
+
+		it( 'accounts for the shadow of a tall tile in the middle', () => {
+			const items: DashboardGridLayoutItem[] = [
+				{ key: 'a', width: 3, height: 1 },
+				{ key: 'b', width: 3, height: 2 },
+				{ key: 'c', width: 6, height: 1 },
+				{ key: 'd', width: 3, height: 1 },
+				{ key: 'fill', width: 'fill', height: 1 },
+			];
+			const result = resolveFillWidths(
+				keys( items ),
+				makeMap( items ),
+				12
+			);
+			expect( result.get( 'fill' ) ).toBe( 6 );
+		} );
+
+		it( 'accounts for the shadow of a tall tile on the right', () => {
+			const items: DashboardGridLayoutItem[] = [
+				{ key: 'a', width: 3, height: 1 },
+				{ key: 'b', width: 6, height: 1 },
+				{ key: 'c', width: 3, height: 2 },
+				{ key: 'd', width: 6, height: 1 },
+				{ key: 'fill', width: 'fill', height: 1 },
+			];
+			const result = resolveFillWidths(
+				keys( items ),
+				makeMap( items ),
+				12
+			);
+			expect( result.get( 'fill' ) ).toBe( 3 );
+		} );
+
+		it( 'tracks shadow across multiple rows for height > 2', () => {
+			const items: DashboardGridLayoutItem[] = [
+				{ key: 'tall', width: 3, height: 3 },
+				{ key: 'a', width: 9, height: 1 },
+				{ key: 'b', width: 9, height: 1 },
+				{ key: 'fill', width: 'fill', height: 1 },
+			];
+			const result = resolveFillWidths(
+				keys( items ),
+				makeMap( items ),
+				12
+			);
+			expect( result.get( 'fill' ) ).toBe( 9 );
+		} );
+	} );
 } );

packages/ui/CHANGELOG.md

@@ -24,6 +24,7 @@
 -   Remove the transitive peer dependency on `date-fns` / `@date-fns/tz` ([#77520](https://github.com/WordPress/gutenberg/pull/77520)), resolving [#77395](https://github.com/WordPress/gutenberg/issues/77395).
 -   `Text`: Apply both heading and paragraph CSS defenses regardless of variant, so the correct defense kicks in based on the rendered element rather than the typographic variant ([#77461](https://github.com/WordPress/gutenberg/pull/77461)).
 -   `CollapsibleCard`: Fix missing keyboard focus ring on the header chevron icon when rendered inside wp-admin ([#77468](https://github.com/WordPress/gutenberg/pull/77468)).
+-   `CollapsibleCard`: Prevent the focus ring of focusable descendants from being clipped by the panel's overflow once the panel is fully expanded ([#77667](https://github.com/WordPress/gutenberg/pull/77667)).
 -   `Tabs`: Fix missing keyboard focus ring on the panel in Windows High Contrast mode when rendered inside wp-admin ([#77469](https://github.com/WordPress/gutenberg/pull/77469)).
 
 ### Enhancements

packages/ui/src/collapsible-card/content.tsx

@@ -17,7 +17,18 @@ export const Content = forwardRef< HTMLDivElement, ContentProps >(
 		return (
 			<Collapsible.Panel
 				ref={ ref }
-				className={ clsx( styles.content, className ) }
+				// @ts-expect-error Base UI supports the callback-style
+				// version of the `className` prop, but we're purposefully
+				// not advertising it in our `@wordpress/ui` re-export.
+				className={ ( state ) =>
+					clsx(
+						styles.content,
+						state.open &&
+							state.transitionStatus === 'idle' &&
+							styles.overflowVisible,
+						className
+					)
+				}
 				hiddenUntilFound={ hiddenUntilFound }
 				{ ...restProps }
 			>