Add static column number option

WordPress · Mar 14, 2023 · 8de907b · 8de907b
1 parent 0e636df
commit 8de907b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 11 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -281,13 +281,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			}
 		}
 	} elseif ( 'grid' === $layout_type ) {
-		$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
 
-		// Workaround because of course core wouldn't support doing anything actually useful with grid.
-		$layout_styles[] = array(
-			'selector'     => $selector,
-			'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(' . $minimum_column_width . ', 1fr))' ),
-		);
+		if ( $layout['isResponsive'] ) {
+			$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
+
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(' . $minimum_column_width . ', 1fr))' ),
+			);
+
+		} else {
+			$number_of_columns = ! empty( $layout['numberOfColumns'] ) ? $layout['numberOfColumns'] : 3;
+
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'grid-template-columns' => 'repeat(' . $number_of_columns . ', 1fr)' ),
+			);
+		}
 
 		if ( $has_block_gap_support && isset( $gap_value ) ) {
 			$combined_gap_value = '';

diff --git a/lib/experimental/kses.php b/lib/experimental/kses.php
@@ -98,7 +98,7 @@ function allow_filter_in_styles( $allow_css, $css_test_string ) {
  */
 function allow_grid_functions_in_styles( $allow_css, $css_test_string ) {
 	if ( preg_match(
-		'/^grid-template-columns:\s*repeat\(auto-fill,[0-9,a-z\s\(\)]*\)$/',
+		'/^grid-template-columns:\s*repeat\([0-9,a-z-\s\(\)]*\)$/',
 		$css_test_string
 	) ) {
 		return true;

diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
@@ -6,6 +6,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	Flex,
 	FlexItem,
+	RangeControl,
+	ToggleControl,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
@@ -23,15 +25,33 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
+		const { isResponsive = true } = layout;
+
 		return (
 			<>
-				<Flex>
+				<Flex direction="column">
 					<FlexItem>
-						<GridLayoutMinimumWidthControl
+						<GridLayoutResponsiveControl
 							layout={ layout }
 							onChange={ onChange }
 						/>
 					</FlexItem>
+					{ isResponsive && (
+						<FlexItem>
+							<GridLayoutMinimumWidthControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						</FlexItem>
+					) }
+					{ ! isResponsive && (
+						<FlexItem>
+							<GridLayoutColumnsControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						</FlexItem>
+					) }
 				</Flex>
 			</>
 		);
@@ -47,7 +67,11 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { minimumColumnWidth = '12rem' } = layout;
+		const {
+			isResponsive = true,
+			minimumColumnWidth = '12rem',
+			numberOfColumns = 3,
+		} = layout;
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
@@ -60,10 +84,14 @@ export default {
 		let output = '';
 		const rules = [];
 
-		if ( minimumColumnWidth ) {
+		if ( isResponsive && minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(${ minimumColumnWidth }, 1fr))`
 			);
+		} else if ( numberOfColumns ) {
+			rules.push(
+				`grid-template-columns: repeat(${ numberOfColumns }, 1fr)`
+			);
 		}
 
 		if ( rules.length ) {
@@ -108,3 +136,41 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 		/>
 	);
 }
+
+// Enables setting number of grid columns
+function GridLayoutColumnsControl( { layout, onChange } ) {
+	const { numberOfColumns = 3 } = layout;
+
+	return (
+		<RangeControl
+			label={ __( 'Columns' ) }
+			value={ numberOfColumns }
+			onChange={ ( value ) => {
+				onChange( {
+					...layout,
+					numberOfColumns: value,
+				} );
+			} }
+			min={ 1 }
+			max={ 12 }
+		/>
+	);
+}
+
+// Toggle between responsive and fixed column grid.
+function GridLayoutResponsiveControl( { layout, onChange } ) {
+	const { isResponsive = true } = layout;
+
+	return (
+		<ToggleControl
+			label={ __( 'Responsive' ) }
+			checked={ isResponsive }
+			onChange={ () => {
+				onChange( {
+					...layout,
+					isResponsive: ! isResponsive,
+				} );
+			} }
+		/>
+	);
+}