Show only common variants in ColumnVariants

eea · Mar 24, 2021 · 282b8b1 · 282b8b1
1 parent 075eebc
commit 282b8b1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -26,7 +26,6 @@ import ColumnVariations from './ColumnVariations';
 import EditBlockWrapper from './EditBlockWrapper';
 
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
-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,8 +210,7 @@ class ColumnsBlockEdit extends React.Component {
   };
 
   getColumnsBlockSchema = () => {
-    const variants =
-      config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
+    const variants = config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || [];
     const schema = ColumnsBlockSchema();
     const { data } = this.props;
     const { blocks_layout = {} } = data.data || {};
@@ -228,8 +226,7 @@ class ColumnsBlockEdit extends React.Component {
   };
 
   componentDidUpdate(prevProps) {
-    const variants =
-      config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
+    const variants = config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || [];
     const cols = this.props.data.data?.blocks_layout?.items || [];
     const prevCols = prevProps.data.data?.blocks_layout?.items || [];
 
@@ -321,7 +318,7 @@ class ColumnsBlockEdit extends React.Component {
         {data.coldata ? 'old style columns block, safe to remove it' : ''}
         {!data?.data ? (
           <ColumnVariations
-            variants={variants}
+            variants={variants.filter((variant) => variant.common)}
             data={data}
             onChange={(initialData) => {
               onChangeBlock(block, {

diff --git a/src/Widgets/LayoutSelectWidget.jsx b/src/Widgets/LayoutSelectWidget.jsx
@@ -17,7 +17,6 @@ import {
 } 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';
@@ -33,8 +32,7 @@ const variantToGridCols = (v) => {
 };
 
 export const Option = (props) => {
-  const variants =
-    config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
+  const variants = config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || [];
   return (
     <ReactSelectLib>
       {({ components }) => {
@@ -64,8 +62,7 @@ export const Option = (props) => {
 
 const SingleValue = (props) => {
   const { children, className, cx, getStyles, isDisabled, innerProps } = props;
-  const variants =
-    config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || defaultVariants;
+  const variants = config.blocks.blocksConfig?.[COLUMNSBLOCK]?.variants || [];
 
   const variant = variants.find((v) =>
     gridColsAreEqual(variantToGridCols(v), props.data.value),

diff --git a/src/grid.js b/src/grid.js
@@ -71,6 +71,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['halfWidth', 'halfWidth'],
     },
+    common: true,
     title: '50 / 50',
   },
   {
@@ -79,6 +80,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['oneFifth', 'fourFifths'],
     },
+    common: true,
     title: '20 / 80',
   },
   {
@@ -87,6 +89,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['oneThird', 'twoThirds'],
     },
+    common: true,
     title: '30 / 70',
   },
   {
@@ -95,6 +98,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['twoThirds', 'oneThird'],
     },
+    common: true,
     title: '70 / 30',
   },
   {
@@ -103,6 +107,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['fourFifths', 'oneFifth'],
     },
+    common: true,
     title: '80 / 20',
   },
   {
@@ -111,6 +116,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['oneThird', 'oneThird', 'oneThird'],
     },
+    common: true,
     title: '33 / 33 / 33',
   },
   {
@@ -119,6 +125,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['oneThirdSmall', 'halfWidthBig', 'oneThirdSmall'],
     },
+    common: true,
     title: '25 / 50 / 25',
   },
   {
@@ -127,6 +134,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['oneQuarter', 'oneQuarter', 'oneQuarter', 'oneQuarter'],
     },
+    common: true,
     title: '25 / 25 / 25 / 25',
   },
   {
@@ -135,6 +143,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['full'],
     },
+    common: true,
     title: '100',
   },
   {
@@ -143,6 +152,7 @@ export const variants = [
       gridSize: 12,
       gridCols: ['threeFifths', 'twoFifths'],
     },
+    common: true,
     title: '60 / 40',
   },
 ];