add-panels chooser in intial render

src/components/index.js

@@ -1,3 +1,5 @@
 export AccordionBlockEdit from './manage/Blocks/Accordion/Edit';
 export AccordionBlockView from './manage/Blocks/Accordion/View';
 export AccordionBlockSchema from './manage/Blocks/Accordion/Schema';
+
+export { options } from './manage/Blocks/Accordion/layout';

src/components/manage/Blocks/Accordion/Edit.jsx

@@ -3,6 +3,9 @@ import { isEmpty } from 'lodash';
 import { BlocksForm } from '@eeacms/volto-blocks-form/components';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 import AccordionEdit from './AccordionEdit';
+import Layout from './Layout.jsx';
+import { empty, getColumns } from './util';
+import { options } from './layout';
 import './editor.less';
 
 const Edit = (props) => {
@@ -17,6 +20,13 @@ const Edit = (props) => {
     properties.blocks_layout.items[0],
   );
 
+  const createPanes = (initialData) => {
+    const { count } = initialData;
+    return {
+      data: empty(count),
+    };
+  };
+
   React.useEffect(() => {
     if (
       isEmpty(data?.data?.blocks) &&
@@ -38,40 +48,59 @@ const Edit = (props) => {
   ]);
 
   const blockState = {};
+  const coldata = properties;
+  const columnList = getColumns(coldata);
 
   return (
     <section className="section-block">
-      <AccordionEdit isEditForm={pathname.includes('edit')}>
-        <BlocksForm
-          metadata={metadata}
-          properties={properties}
-          manage={manage}
-          selectedBlock={selected ? selectedBlock : null}
-          allowedBlocks={data.allowedBlocks}
-          title={data.placeholder}
-          description={data?.instructions?.data}
-          onSelectBlock={(id) => setSelectedBlock(id)}
-          onChangeFormData={(newFormData) => {
+      {Object.keys(data).length === 1 ? (
+        <Layout
+          variants={options}
+          data={data}
+          onChange={(initialData) => {
             onChangeBlock(block, {
               ...data,
-              data: newFormData,
+              ...createPanes(initialData),
             });
           }}
-          onChangeField={(id, value) => {
-            if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-              blockState[id] = value;
-              onChangeBlock(block, {
-                ...data,
-                data: {
-                  ...data.data,
-                  ...blockState,
-                },
-              });
-            }
-          }}
-          pathname={pathname}
         />
-      </AccordionEdit>
+      ) : (
+        <div>
+          {columnList.map(([colId, column], index) => (
+            <AccordionEdit isEditForm={pathname.includes('edit')}>
+              <BlocksForm
+                metadata={metadata}
+                properties={isEmpty(column) ? emptyBlocksForm() : column}
+                manage={manage}
+                selectedBlock={selected ? selectedBlock : null}
+                allowedBlocks={data.allowedBlocks}
+                title={data.placeholder}
+                description={data?.instructions?.data}
+                onSelectBlock={(id) => setSelectedBlock(id)}
+                onChangeFormData={(newFormData) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    data: newFormData,
+                  });
+                }}
+                onChangeField={(id, value) => {
+                  if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+                    blockState[id] = value;
+                    onChangeBlock(block, {
+                      ...data,
+                      data: {
+                        ...data.data,
+                        ...blockState,
+                      },
+                    });
+                  }
+                }}
+                pathname={pathname}
+              />
+            </AccordionEdit>
+          ))}
+        </div>
+      )}
     </section>
   );
 };

src/components/manage/Blocks/Accordion/Layout.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Segment, Card } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+export default ({ data, onChange, children, variants }) => {
+  return (
+    <Segment>
+      <h4>Select Panels:</h4>
+      <Card.Group centered itemsPerRow={3}>
+        {variants.map(({ icon, defaultData, title }, index) => (
+          <Card key={index} onClick={() => onChange(defaultData)}>
+            <Card.Content>
+              <Icon name={icon} size="55" />
+              {title ? <p>{title}</p> : ''}
+            </Card.Content>
+          </Card>
+        ))}
+      </Card.Group>
+    </Segment>
+  );
+};

src/components/manage/Blocks/Accordion/layout.js

@@ -0,0 +1,26 @@
+import threeColumnSVG from './icons/three-third-columns.svg';
+import oneColumnSVG from './icons/full-column.svg';
+
+export const options = [
+  {
+    icon: oneColumnSVG,
+    defaultData: {
+      count: 1,
+    },
+    title: '1 Panel',
+  },
+  {
+    icon: threeColumnSVG,
+    defaultData: {
+      count: 3,
+    },
+    title: '3 Panels',
+  },
+  {
+    icon: threeColumnSVG,
+    defaultData: {
+      count: 5,
+    },
+    title: '5 Panels',
+  },
+];

src/components/manage/Blocks/Accordion/util.js

@@ -0,0 +1,27 @@
+import { v4 as uuid } from 'uuid';
+import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
+import { settings } from '~/config';
+
+export const empty = (count) => {
+  const blocks = {};
+  const items = [];
+  for (let x = 0; x < count; x++) {
+    const id = uuid();
+    blocks[id] = emptyBlocksForm();
+    items.push(id);
+  }
+
+  return {
+    blocks,
+    blocks_layout: {
+      items,
+    },
+  };
+};
+
+export const getColumns = (data) => {
+  return (data?.blocks_layout?.items || []).map((id) => [
+    id,
+    data.blocks?.[id],
+  ]);
+};

src/index.js

@@ -4,6 +4,7 @@ import {
   AccordionBlockView,
   AccordionBlockSchema,
 } from './components';
+import { options } from '@eeacms/volto-accordion-block/components';
 
 const applyConfig = (config) => {
   const choices = Object.keys(config.blocks.blocksConfig)
@@ -40,6 +41,7 @@ const applyConfig = (config) => {
     edit: AccordionBlockEdit,
     schema: schema,
     restricted: false,
+    options,
     mostUsed: false,
     blockHasOwnFocusManagement: true,
     sidebarTab: 0,