Properly update the layout select widget according to choices

eea · Oct 9, 2020 · c4a330f · c4a330f
1 parent 4bbb0ac
commit c4a330f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -124,10 +124,11 @@ class ColumnsBlockEdit extends React.Component {
   getColumnsBlockSchema = () => {
     const schema = ColumnsBlockSchema();
     const { data } = this.props;
-    const { gridCols = [] } = data;
+    const { blocks_layout = {} } = data.data || {};
+    const nrOfColumns = (blocks_layout?.items || []).length;
     // console.log('gridcols', gridCols);
     const available_variants = variants.filter(
-      ({ defaultData }) => defaultData?.gridCols?.length === gridCols.length,
+      ({ defaultData }) => defaultData?.gridCols?.length === nrOfColumns,
     );
     schema.properties.gridCols.choices = available_variants.map(
       ({ defaultData, title }) => [defaultData?.gridCols, title],

diff --git a/src/grid.js b/src/grid.js
@@ -6,6 +6,11 @@ import iconE from './ColumnsBlock/icons/three-columns.svg';
 import iconF from './ColumnsBlock/icons/four-quarter-columns.svg';
 
 export const gridSizes = {
+  full: {
+    mobile: 12,
+    tablet: 12,
+    computer: 12,
+  },
   halfWidth: {
     mobile: 12,
     tablet: 6,
@@ -87,4 +92,12 @@ export const variants = [
     },
     title: '25 / 25 / 25 / 25',
   },
+  {
+    icon: iconF,
+    defaultData: {
+      gridSize: 12,
+      gridCols: ['full'],
+    },
+    title: '100',
+  },
 ];