@wordpress/block-editor 15.19.1-next.v.202605131006.0 → 15.20.0

package/src/hooks/layout-child.js

@@ -22,12 +22,36 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/const
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
+// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
+const RESPONSIVE_BREAKPOINTS = {
+	mobile: '@media (width <= 480px)',
+	tablet: '@media (480px < width <= 782px)',
+};
 
-function useBlockPropsChildLayoutStyles( { style } ) {
-	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
-	} );
-	const layout = style?.layout ?? {};
+function serializeRule( { selector, declarations } ) {
+	return `${ selector } {
+		${ Object.entries( declarations )
+			.map( ( [ property, value ] ) => `${ property }: ${ value }` )
+			.join( '; ' ) };
+	}`;
+}
+
+export function getChildLayoutStyleRules( {
+	selector,
+	layout = {},
+	viewportOverrides,
+	parentLayout = {},
+	includeContainerQuery = true,
+} ) {
+	const hasViewportOverrides = viewportOverrides !== undefined;
+	const effectiveLayout = hasViewportOverrides
+		? {
+				...layout,
+				...viewportOverrides,
+		  }
+		: layout;
+	const hasViewportOverride = ( key ) =>
+		Object.hasOwn( viewportOverrides || {}, key );
 	const {
 		selfStretch,
 		flexSize,
@@ -35,66 +59,59 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 		rowStart,
 		columnSpan,
 		rowSpan,
-	} = layout;
-	const parentLayout = useLayout() || {};
+	} = effectiveLayout;
 	const { columnCount, minimumColumnWidth } = parentLayout;
-	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
-	const selector = `.wp-container-content-${ id }`;
+	const rules = [];
 
-	// Check that the grid layout attributes are of the correct type, so that we don't accidentally
-	// write code that stores a string attribute instead of a number.
-	if ( process.env.NODE_ENV === 'development' ) {
-		if ( columnStart && typeof columnStart !== 'number' ) {
-			throw new Error( 'columnStart must be a number' );
-		}
-		if ( rowStart && typeof rowStart !== 'number' ) {
-			throw new Error( 'rowStart must be a number' );
-		}
-		if ( columnSpan && typeof columnSpan !== 'number' ) {
-			throw new Error( 'columnSpan must be a number' );
-		}
-		if ( rowSpan && typeof rowSpan !== 'number' ) {
-			throw new Error( 'rowSpan must be a number' );
+	const declarations = {};
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'selfStretch' ) ||
+		hasViewportOverride( 'flexSize' )
+	) {
+		if ( selfStretch === 'fixed' && flexSize ) {
+			declarations[ 'flex-basis' ] = flexSize;
+			declarations[ 'box-sizing' ] = 'border-box';
+		} else if ( selfStretch === 'fill' ) {
+			declarations[ 'flex-grow' ] = '1';
 		}
 	}
 
-	let css = '';
-	if ( shouldRenderChildLayoutStyles ) {
-		if ( selfStretch === 'fixed' && flexSize ) {
-			css = `${ selector } {
-				flex-basis: ${ flexSize };
-				box-sizing: border-box;
-			}`;
-		} else if ( selfStretch === 'fill' ) {
-			css = `${ selector } {
-				flex-grow: 1;
-			}`;
-		} else if ( columnStart && columnSpan ) {
-			css = `${ selector } {
-				grid-column: ${ columnStart } / span ${ columnSpan };
-			}`;
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'columnStart' ) ||
+		hasViewportOverride( 'columnSpan' )
+	) {
+		if ( columnStart && columnSpan ) {
+			declarations[
+				'grid-column'
+			] = `${ columnStart } / span ${ columnSpan }`;
 		} else if ( columnStart ) {
-			css = `${ selector } {
-				grid-column: ${ columnStart };
-			}`;
+			declarations[ 'grid-column' ] = `${ columnStart }`;
 		} else if ( columnSpan ) {
-			css = `${ selector } {
-				grid-column: span ${ columnSpan };
-			}`;
+			declarations[ 'grid-column' ] = `span ${ columnSpan }`;
 		}
+	}
+
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'rowStart' ) ||
+		hasViewportOverride( 'rowSpan' )
+	) {
 		if ( rowStart && rowSpan ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart } / span ${ rowSpan };
-			}`;
+			declarations[ 'grid-row' ] = `${ rowStart } / span ${ rowSpan }`;
 		} else if ( rowStart ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart };
-			}`;
+			declarations[ 'grid-row' ] = `${ rowStart }`;
 		} else if ( rowSpan ) {
-			css += `${ selector } {
-				grid-row: span ${ rowSpan };
-			}`;
+			declarations[ 'grid-row' ] = `span ${ rowSpan }`;
 		}
+	}
+
+	if ( Object.keys( declarations ).length ) {
+		rules.push( { selector, declarations } );
+	}
+
+	if ( includeContainerQuery && ! hasViewportOverrides ) {
 		/**
 		 * If minimumColumnWidth is set on the parent, or if no
 		 * columnCount is set, the grid is responsive so a
@@ -147,18 +164,118 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			const gridColumnValue =
 				columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
 
-			css += `@container (max-width: ${ Math.max(
-				containerQueryValue,
-				minimumContainerQueryValue
-			) }${ parentColumnUnit }) {
-				${ selector } {
-					grid-column: ${ gridColumnValue };
-					grid-row: auto;
-				}
-			}`;
+			rules.push( {
+				rulesGroup: `@container (max-width: ${ Math.max(
+					containerQueryValue,
+					minimumContainerQueryValue
+				) }${ parentColumnUnit })`,
+				selector,
+				declarations: {
+					'grid-column': gridColumnValue,
+					'grid-row': 'auto',
+				},
+			} );
 		}
 	}
 
+	return rules;
+}
+
+export function getChildLayoutStyles( {
+	selector,
+	layout = {},
+	parentLayout = {},
+	includeContainerQuery = true,
+} ) {
+	return getChildLayoutStyleRules( {
+		selector,
+		layout,
+		parentLayout,
+		includeContainerQuery,
+	} )
+		.map( ( rule ) => {
+			const serializedRule = serializeRule( rule );
+			return rule.rulesGroup
+				? `${ rule.rulesGroup } {
+				${ serializedRule }
+			}`
+				: serializedRule;
+		} )
+		.join( '' );
+}
+
+export function getResponsiveChildLayoutStyles( {
+	style = {},
+	selector,
+	parentLayout = {},
+} ) {
+	const baseLayout = style?.layout ?? {};
+
+	return Object.entries( RESPONSIVE_BREAKPOINTS )
+		.map( ( [ viewport, mediaQuery ] ) => {
+			const viewportLayout = style?.[ viewport ]?.layout;
+			if ( ! viewportLayout || ! Object.keys( viewportLayout ).length ) {
+				return '';
+			}
+
+			const viewportRules = getChildLayoutStyleRules( {
+				selector,
+				layout: baseLayout,
+				viewportOverrides: viewportLayout,
+				parentLayout,
+				includeContainerQuery: false,
+			} );
+			const css = viewportRules.map( serializeRule ).join( '' );
+
+			return css ? `${ mediaQuery }{${ css }}` : '';
+		} )
+		.filter( Boolean )
+		.join( '' );
+}
+
+function useBlockPropsChildLayoutStyles( { style } ) {
+	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
+		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
+	} );
+	const layout = style?.layout ?? {};
+	const { columnStart, rowStart, columnSpan, rowSpan } = layout;
+	const parentLayout = useLayout() || {};
+	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
+	const selector = `.wp-container-content-${ id }`;
+
+	// Check that the grid layout attributes are of the correct type, so that we don't accidentally
+	// write code that stores a string attribute instead of a number.
+	if ( process.env.NODE_ENV === 'development' ) {
+		if ( columnStart && typeof columnStart !== 'number' ) {
+			throw new Error( 'columnStart must be a number' );
+		}
+		if ( rowStart && typeof rowStart !== 'number' ) {
+			throw new Error( 'rowStart must be a number' );
+		}
+		if ( columnSpan && typeof columnSpan !== 'number' ) {
+			throw new Error( 'columnSpan must be a number' );
+		}
+		if ( rowSpan && typeof rowSpan !== 'number' ) {
+			throw new Error( 'rowSpan must be a number' );
+		}
+	}
+
+	let css = '';
+	if ( shouldRenderChildLayoutStyles ) {
+		css = [
+			getChildLayoutStyles( {
+				selector,
+				layout,
+				parentLayout,
+			} ),
+			getResponsiveChildLayoutStyles( {
+				style,
+				selector,
+				parentLayout,
+			} ),
+		].join( '' );
+	}
+
 	useStyleOverride( { css } );
 
 	// Only attach a container class if there is generated CSS to be attached.