Fix up the styles

WordPress · Jun 25, 2024 · 26c4999 · 26c4999
1 parent 1335528
commit 26c4999
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 45 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -466,29 +466,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			}
 		}
 	} elseif ( 'grid' === $layout_type ) {
-		if ( ! empty( $layout['columnCount'] ) ) {
-			$layout_styles[] = array(
-				'selector'     => $selector,
-				'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
-			);
-			if ( ! empty( $layout['rowCount'] ) ) {
-				$layout_styles[] = array(
-					'selector'     => $selector,
-					'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
-				);
-			}
-		} else {
-			$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
-
-			$layout_styles[] = array(
-				'selector'     => $selector,
-				'declarations' => array(
-					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
-					'container-type'        => 'inline-size',
-				),
-			);
-		}
-
+		// Deal with block gap first so it can be used for responsive computation.
+		$responsive_gap_value = '1.2rem';
 		if ( $has_block_gap_support && isset( $gap_value ) ) {
 			$combined_gap_value = '';
 			$gap_sides          = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
@@ -506,14 +485,46 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				}
 				$combined_gap_value .= "$process_value ";
 			}
-			$gap_value = trim( $combined_gap_value );
+			$gap_value            = trim( $combined_gap_value );
+			$responsive_gap_value = $gap_value;
+		}
 
-			if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
+		if ( ! empty( $layout['columnCount'] ) && ! empty( $layout['minimumColumnWidth'] ) ) {
+			$max_value       = 'max(' . $layout['minimumColumnWidth'] . ', (100% - (' . $responsive_gap_value . ' * (' . $layout['columnCount'] . ' - 1))) /' . $layout['columnCount'] . ')';
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'grid-template-columns' => 'repeat(auto-fill, minmax(' . $max_value . ', 1fr))',
+				),
+			);
+		} elseif ( ! empty( $layout['columnCount'] ) ) {
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
+			);
+			if ( ! empty( $layout['rowCount'] ) ) {
 				$layout_styles[] = array(
 					'selector'     => $selector,
-					'declarations' => array( 'gap' => $gap_value ),
+					'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
 				);
 			}
+		} else {
+			$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
+
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
+					'container-type'        => 'inline-size',
+				),
+			);
+		}
+
+		if ( $has_block_gap_support && null !== $gap_value && ! $should_skip_gap_serialization ) {
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'gap' => $gap_value ),
+			);
 		}
 	}
 

diff --git a/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js b/packages/block-editor/src/components/grid-visualizer/use-grid-layout-sync.js
@@ -30,9 +30,9 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	useEffect( () => {
 		const updates = {};
 
-		const { columnCount, rowCount = 2 } = gridLayout;
+		const { columnCount, rowCount = 2, manualPlacement } = gridLayout;
 
-		const isManualGrid = !! columnCount;
+		const isManualGrid = !! manualPlacement;
 
 		if ( isManualGrid ) {
 			const rects = [];

diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
@@ -59,6 +59,19 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				grid-column: span ${ columnSpan };
 			}`;
 		}
+		if ( rowStart && rowSpan ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart } / span ${ rowSpan };
+			}`;
+		} else if ( rowStart ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart };
+			}`;
+		} else if ( rowSpan ) {
+			css += `${ selector } {
+				grid-row: span ${ rowSpan };
+			}`;
+		}
 		/**
 		 * If minimumColumnWidth is set on the parent, or if no
 		 * columnCount is set, the grid is responsive so a
@@ -106,25 +119,19 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
 			const gridColumnValue = columnSpan ? '1/-1' : 'auto';
 
+			// Unset any existing rowStart values.
+			const gridRowValue =
+				rowStart && ( ! rowSpan || rowSpan === 1 )
+					? 'auto'
+					: `span ${ rowSpan }`;
+
 			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
 				${ selector } {
 					grid-column: ${ gridColumnValue };
+					grid-row: ${ gridRowValue };
 				}
 			}`;
 		}
-		if ( rowStart && rowSpan ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart } / span ${ rowSpan };
-			}`;
-		} else if ( rowStart ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart };
-			}`;
-		} else if ( rowSpan ) {
-			css += `${ selector } {
-				grid-row: span ${ rowSpan };
-			}`;
-		}
 	}
 
 	useStyleOverride( { css } );

diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
@@ -142,7 +142,7 @@ export default {
 		if ( minimumColumnWidth && columnCount ) {
 			const maxValue = `max(${ minimumColumnWidth }, ( 100% - (${
 				blockGapValue || '1.2rem'
-			}*${ ( columnCount || 4 ) - 1 }) ) / ${ columnCount || 4 })`;
+			}*${ columnCount - 1 }) ) / ${ columnCount })`;
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,
 				`container-type: inline-size`
@@ -274,7 +274,7 @@ function GridLayoutColumnsAndRowsControl( {
 	onChange,
 	allowSizingOnChildren,
 } ) {
-	const { columnCount = 3, rowCount } = layout;
+	const { columnCount = 3, rowCount, manualPlacement } = layout;
 
 	return (
 		<>
@@ -300,7 +300,8 @@ function GridLayoutColumnsAndRowsControl( {
 						/>
 					</FlexItem>
 					{ allowSizingOnChildren &&
-						window.__experimentalEnableGridInteractivity && (
+						window.__experimentalEnableGridInteractivity &&
+						manualPlacement && (
 							<FlexItem isBlock>
 								<NumberControl
 									size="__unstable-large"
@@ -324,7 +325,8 @@ function GridLayoutColumnsAndRowsControl( {
 
 // Enables switching between grid types
 function GridLayoutTypeControl( { layout, onChange } ) {
-	const { columnCount, minimumColumnWidth, manualPlacement } = layout;
+	const { columnCount, rowCount, minimumColumnWidth, manualPlacement } =
+		layout;
 
 	/**
 	 * When switching, temporarily save any custom values set on the
@@ -333,6 +335,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 	const [ tempColumnCount, setTempColumnCount ] = useState(
 		columnCount || 3
 	);
+	const [ tempRowCount, setTempRowCount ] = useState( rowCount || 2 );
 	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
 		minimumColumnWidth || '12rem'
 	);
@@ -348,10 +351,16 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
 		} else {
 			setTempColumnCount( columnCount || 3 );
+			setTempRowCount( rowCount || 2 );
 		}
 		onChange( {
 			...layout,
 			columnCount: value === 'manual' ? tempColumnCount : null,
+			rowCount:
+				value === 'manual' &&
+				window.__experimentalEnableGridInteractivity
+					? tempRowCount
+					: null,
 			manualPlacement:
 				value === 'manual' &&
 				window.__experimentalEnableGridInteractivity