Allow editing section title and HTML tag in edit mode

src/components/index.js

@@ -1,3 +1,3 @@
 export GroupBlockEdit from './manage/Blocks/Group/Edit';
 export GroupBlockView from './manage/Blocks/Group/View';
-export GroupBlockSchema from './manage/Blocks/Group/Schema';
+export GroupBlockLayout from './manage/Blocks/Group/LayoutSchema';

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

@@ -1,15 +1,19 @@
 import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
-import { BlocksForm, SidebarPortal } from '@plone/volto/components';
+import {
+  BlocksForm,
+  SidebarPortal,
+  Icon,
+  InlineForm,
+} from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import { Icon } from '@plone/volto/components';
 import delightedSVG from '@plone/volto/icons/delighted.svg';
 import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
 import PropTypes from 'prop-types';
 import { Button, Segment } from 'semantic-ui-react';
 import EditBlockWrapper from './EditBlockWrapper';
+import EditSchema from './EditSchema';
 import helpSVG from '@plone/volto/icons/help.svg';
-
 import './editor.less';
 
 const Edit = (props) => {
@@ -127,7 +131,7 @@ const Edit = (props) => {
         }}
         aria-hidden="true"
       >
-        {data.id || 'Section'}
+        {data.title || 'Section'}
       </legend>
       <BlocksForm
         metadata={metadata}
@@ -189,13 +193,26 @@ const Edit = (props) => {
       </BlocksForm>
 
       {counterComponent}
-      {instructions && (
-        <SidebarPortal selected={selected}>
+      <SidebarPortal selected={selected}>
+        {instructions && (
           <Segment attached>
             <div dangerouslySetInnerHTML={{ __html: instructions }} />
           </Segment>
-        </SidebarPortal>
-      )}
+        )}
+        {!data?.readOnlySettings && (
+          <InlineForm
+            schema={EditSchema}
+            title="Section (Group) settings"
+            formData={data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
     </fieldset>
   );
 };

src/components/manage/Blocks/Group/EditSchema.jsx

@@ -0,0 +1,34 @@
+const Schema = {
+  title: 'Section block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'as'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Section friendly name',
+      type: 'string',
+    },
+    as: {
+      title: 'HTML5 element',
+      description: 'Select HTML5 element to be used for this block',
+      type: 'string',
+      factory: 'Choice',
+      default: 'div',
+      choices: [
+        ['div', 'div'],
+        ['section', 'section'],
+        ['article', 'article'],
+        ['aside', 'aside'],
+        ['details', 'details'],
+      ],
+    },
+  },
+  required: [],
+};
+
+export default Schema;

src/components/manage/Blocks/Group/Schema.js → src/components/manage/Blocks/Group/LayoutSchema.jsx

@@ -5,23 +5,24 @@ const Schema = {
       id: 'default',
       title: 'Default',
       fields: [
-        'id',
+        'title',
         'placeholder',
         'instructions',
         'allowedBlocks',
         'as',
         'maxChars',
+        'readOnlySettings',
+        'disableInnerButtons',
         'required',
         'fixed',
         'disableNewBlocks',
         'readOnly',
-        'disableInnerButtons',
       ],
     },
   ],
   properties: {
-    id: {
-      title: 'Name',
+    title: {
+      title: 'Title',
       description: 'Section friendly name',
       type: 'string',
     },
@@ -85,6 +86,11 @@ const Schema = {
       description: 'Disable editing on this block',
       type: 'boolean',
     },
+    readOnlySettings: {
+      title: 'Read-only settings',
+      description: 'Disable editing on section block settings',
+      type: 'boolean',
+    },
     disableInnerButtons: {
       title: 'Disable inner buttons',
       description: 'Hide all block related buttons within this block',

src/components/manage/Blocks/Group/View.jsx

@@ -4,13 +4,16 @@ import { RenderBlocks } from '@plone/volto/components';
 const View = (props) => {
   const { data } = props;
   const metadata = props.metadata || props.properties;
+  const CustomTag = `${data.as || 'div'}`;
+  const customId = data?.title
+    ?.toLowerCase()
+    ?.replace(/[^a-zA-Z-\s]/gi, '')
+    ?.trim()
+    ?.replace(/\s+/gi, '-');
   return (
-    <RenderBlocks
-      {...props}
-      as={data?.as}
-      metadata={metadata}
-      content={data?.data || {}}
-    />
+    <CustomTag id={customId}>
+      <RenderBlocks {...props} metadata={metadata} content={data?.data || {}} />
+    </CustomTag>
   );
 };
 

src/components/manage/Blocks/Group/editor.less

@@ -28,8 +28,9 @@
 
     legend {
       position: absolute;
-      top: -1em;
-      left: 1rem;
+      z-index: 3;
+      top: -1.3em;
+      left: 0;
       width: fit-content;
       padding: 0 1rem;
       margin-right: auto;
@@ -55,6 +56,10 @@
     grid-template-columns: 98% auto;
   }
 
+  .blocks-form {
+    margin-top: 0.5rem;
+  }
+
   .blocks-chooser {
     right: 0;
     left: auto;

src/index.js

@@ -1,5 +1,5 @@
 import codeSVG from '@plone/volto/icons/row.svg';
-import { GroupBlockEdit, GroupBlockView, GroupBlockSchema } from './components';
+import { GroupBlockEdit, GroupBlockView, GroupBlockLayout } from './components';
 
 const applyConfig = (config) => {
   const choices = Object.keys(config.blocks.blocksConfig)
@@ -16,11 +16,11 @@ const applyConfig = (config) => {
   choices.push(['group', 'Group']);
 
   const schema = {
-    ...GroupBlockSchema,
+    ...GroupBlockLayout,
     properties: {
-      ...GroupBlockSchema.properties,
+      ...GroupBlockLayout.properties,
       allowedBlocks: {
-        ...GroupBlockSchema.properties.allowedBlocks,
+        ...GroupBlockLayout.properties.allowedBlocks,
         items: {
           choices: choices,
         },