Attempt (WIP) to solve the issue with a new widget

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -138,14 +138,21 @@ class ColumnsBlockEdit extends React.Component {
   componentDidUpdate(prevProps) {
     const cols = this.props.data.data?.blocks_layout?.items || [];
     const prevCols = prevProps.data.data?.blocks_layout?.items || [];
-    if (cols.length !== prevCols.length) {
+
+    console.log('val', this.props.data.gridCols);
+    if (
+      cols.length !==
+      prevCols.length /* ||
+      this.props.data.gridCols?.length === 0 */
+    ) {
       const available_variants = variants.filter(
         ({ defaultData }) => defaultData?.gridCols?.length === cols.length,
       );
       const variant = available_variants?.[0];
       if (variant) {
         this.props.onChangeBlock(this.props.block, {
           ...this.props.data,
+          gridSize: variant.defaultData.gridSize,
           gridCols: variant.defaultData.gridCols,
         });
       }

src/ColumnsBlock/schema.js

@@ -36,6 +36,7 @@ export const ColumnsBlockSchema = () => ({
     },
     gridCols: {
       title: 'Layout',
+      widget: 'layout_select',
       choices: [],
     },
   },

src/Widgets/LayoutSelectWidget.jsx

@@ -0,0 +1,88 @@
+/**
+ * LayoutSelectWidget component.
+ * @module volto-columns-block/Widgets/LayoutSelectWidget
+ */
+
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+import {
+  Option,
+  DropdownIndicator,
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+const Select = loadable(() => import('react-select'));
+
+/**
+ * SelectWidget component class.
+ * @function SelectWidget
+ * @returns {string} Markup of the component.
+ */
+export class LayoutSelectWidget extends Component {
+  state = {
+    selectedOption: null,
+  };
+
+  componentDidMount() {
+    this.setState({
+      selectedOption: {
+        value: this.props.value,
+        label: this.props.choices.find((x) => x[0] === this.props.value)?.[1],
+      },
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        selectedOption: {
+          value: this.props.value,
+          label: this.props.choices.find((x) => x[0] === this.props.value)?.[1],
+        },
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, onChange } = this.props;
+
+    console.log('value', value);
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Select
+          id={`field-${id}`}
+          key={this.props.choices}
+          name={id}
+          value={this.state.selectedOption}
+          isDisabled={this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={choices.map((x) => {
+            return { value: x[0], label: x[1] };
+          })}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          onChange={(data) => {
+            this.setState({ selectedOption: data });
+            return onChange?.(id, data.value);
+          }}
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export default compose(injectIntl)(LayoutSelectWidget);

src/Widgets/index.js

@@ -1,2 +1,2 @@
-import ColumnsWidget from './ColumnsWidget';
-export default ColumnsWidget;
+export ColumnsWidget from './ColumnsWidget';
+export LayoutSelectWidget from './LayoutSelectWidget';

src/index.js

@@ -1,7 +1,7 @@
 import columnSVG from './ColumnsBlock/icons/three-columns.svg';
 
 import { ColumnsBlockView, ColumnsBlockEdit } from './ColumnsBlock';
-import ColumnsWidget from './Widgets/ColumnsWidget';
+import { ColumnsWidget, LayoutSelectWidget } from './Widgets';
 import ColorPickerWidget from './Widgets/SimpleColorPickerWidget.jsx';
 import { gridSizes, variants } from './grid';
 import { COLUMNSBLOCK } from './constants';
@@ -47,6 +47,7 @@ export default function install(config) {
 
   config.widgets.type.columns = ColumnsWidget;
   config.widgets.widget.simple_color_picker = ColorPickerWidget;
+  config.widgets.widget.layout_select = LayoutSelectWidget;
 
   return config;
 }