Get variants from blocksConfig

This is needed for when we want to add more columns variants from outside this addon

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -26,7 +26,7 @@ import ColumnVariations from './ColumnVariations';
 import EditBlockWrapper from './EditBlockWrapper';
 
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
-import { variants } from '@eeacms/volto-columns-block/grid';
+import { variants as defaultVariants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
 
 import tuneSVG from '@plone/volto/icons/column.svg';
@@ -211,20 +211,25 @@ class ColumnsBlockEdit extends React.Component {
   };
 
   getColumnsBlockSchema = () => {
+    const variants =
+      config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
     const schema = ColumnsBlockSchema();
     const { data } = this.props;
     const { blocks_layout = {} } = data.data || {};
     const nrOfColumns = (blocks_layout?.items || []).length;
     const available_variants = variants.filter(
       ({ defaultData }) => defaultData?.gridCols?.length === nrOfColumns,
     );
+
     schema.properties.gridCols.choices = available_variants.map(
       ({ defaultData, title }) => [defaultData?.gridCols, title],
     );
     return schema;
   };
 
   componentDidUpdate(prevProps) {
+    const variants =
+      config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
     const cols = this.props.data.data?.blocks_layout?.items || [];
     const prevCols = prevProps.data.data?.blocks_layout?.items || [];
 

src/Widgets/LayoutSelectWidget.jsx

@@ -6,17 +6,20 @@
 import React, { Component } from 'react';
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
-
 import loadable from '@loadable/component';
-
 import { isEqual } from 'lodash';
-import { variants } from '../grid';
+
 import { FormFieldWrapper, Icon } from '@plone/volto/components';
 import {
   DropdownIndicator,
   selectTheme,
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
+import config from '@plone/volto/registry';
+
+import { variants as defaultVariants } from '../grid';
+import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
+
 import checkSVG from '@plone/volto/icons/check.svg';
 
 const ReactSelectLib = loadable.lib(() => import('react-select'));
@@ -30,6 +33,8 @@ const variantToGridCols = (v) => {
 };
 
 export const Option = (props) => {
+  const variants =
+    config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
   return (
     <ReactSelectLib>
       {({ components }) => {
@@ -59,6 +64,8 @@ export const Option = (props) => {
 
 const SingleValue = (props) => {
   const { children, className, cx, getStyles, isDisabled, innerProps } = props;
+  const variants =
+    config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
 
   const variant = variants.find((v) =>
     gridColsAreEqual(variantToGridCols(v), props.data.value),