diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 37774e07b27691..b97cb649bb0bc8 100644
--- 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
index bccbed2195958b..6608fbb138c58f 100644
--- 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
index 790998472fd26e..b3965ceb6ff7a9 100644
--- 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 ? (
-
- ) : (
-
+ return (
+ <>
+
+ { layout?.columnCount ? (
+
+ ) : (
+
+ ) }
+ >
);
},
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 (
+
+
+
+
+ );
+}
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 3f5dcc0a45a9e4..8589b7f73fed43 100644
--- 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;