Add toggle for grid types and stabilise Grid block variation. (#59051)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: noisysocks <noisysocks@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
WordPress · Feb 16, 2024 · 0847505 · 0847505
1 parent a5c3dc6
commit 0847505
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 29 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -22,9 +22,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-group-grid-variation', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' );
-	}
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -101,19 +101,6 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-form-blocks',
 		)
 	);
-
-	add_settings_field(
-		'gutenberg-group-grid-variation',
-		__( 'Grid variation for Group block ', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test the Grid layout type as a new variation of Group block.', 'gutenberg' ),
-			'id'    => 'gutenberg-group-grid-variation',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-no-tinymce',
 		__( 'Disable TinyMCE and Classic block', 'gutenberg' ),

diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
@@ -8,9 +8,12 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -64,13 +67,24 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
-		return layout?.columnCount ? (
-			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
-		) : (
-			<GridLayoutMinimumWidthControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+		return (
+			<>
+				<GridLayoutTypeControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+				{ layout?.columnCount ? (
+					<GridLayoutColumnsControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) : (
+					<GridLayoutMinimumWidthControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
+			</>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls() {
@@ -221,3 +235,56 @@ function GridLayoutColumnsControl( { layout, onChange } ) {
 		/>
 	);
 }
+
+// Enables switching between grid types
+function GridLayoutTypeControl( { layout, onChange } ) {
+	const { columnCount, minimumColumnWidth } = layout;
+
+	/**
+	 * When switching, temporarily save any custom values set on the
+	 * previous type so we can switch back without loss.
+	 */
+	const [ tempColumnCount, setTempColumnCount ] = useState(
+		columnCount || 3
+	);
+	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
+		minimumColumnWidth || '12rem'
+	);
+
+	const isManual = !! columnCount ? 'manual' : 'auto';
+
+	const onChangeType = ( value ) => {
+		if ( value === 'manual' ) {
+			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
+		} else {
+			setTempColumnCount( columnCount || 3 );
+		}
+		onChange( {
+			...layout,
+			columnCount: value === 'manual' ? tempColumnCount : null,
+			minimumColumnWidth:
+				value === 'auto' ? tempMinimumColumnWidth : null,
+		} );
+	};
+
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom={ true }
+			label={ __( 'Type' ) }
+			value={ isManual }
+			onChange={ onChangeType }
+			isBlock={ true }
+		>
+			<ToggleGroupControlOption
+				key={ 'manual' }
+				value="manual"
+				label={ __( 'Manual' ) }
+			/>
+			<ToggleGroupControlOption
+				key={ 'auto' }
+				value="auto"
+				label={ __( 'Auto' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
@@ -42,10 +42,7 @@ const variations = [
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
 	},
-];
-
-if ( window?.__experimentalEnableGroupGridVariation ) {
-	variations.push( {
+	{
 		name: 'group-grid',
 		title: __( 'Grid' ),
 		description: __( 'Arrange blocks in a grid.' ),
@@ -54,7 +51,7 @@ if ( window?.__experimentalEnableGroupGridVariation ) {
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'grid',
 		icon: grid,
-	} );
-}
+	},
+];
 
 export default variations;