From 075eebc112c5331dce6b4d9126724db5f74ab2f9 Mon Sep 17 00:00:00 2001
From: razvanMiu <miu.razvan28@gmail.com>
Date: Wed, 24 Mar 2021 00:15:59 +0200
Subject: [PATCH] Get variants from blocksConfig This is needed for when we
 want to add more columns variants from outside this addon

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx |  7 ++++++-
 src/Widgets/LayoutSelectWidget.jsx    | 13 ++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 5dfa03a..cfb4e4d 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/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,6 +211,8 @@ 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 || {};
@@ -218,6 +220,7 @@ class ColumnsBlockEdit extends React.Component {
     const available_variants = variants.filter(
       ({ defaultData }) => defaultData?.gridCols?.length === nrOfColumns,
     );
+
     schema.properties.gridCols.choices = available_variants.map(
       ({ defaultData, title }) => [defaultData?.gridCols, title],
     );
@@ -225,6 +228,8 @@ class ColumnsBlockEdit extends React.Component {
   };
 
   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 || [];
 
diff --git a/src/Widgets/LayoutSelectWidget.jsx b/src/Widgets/LayoutSelectWidget.jsx
index 31258bc..a721588 100644
--- a/src/Widgets/LayoutSelectWidget.jsx
+++ b/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),