Add support DX Layout

src/components/index.js

@@ -1,3 +1,4 @@
+export AccordionLayoutSchema from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/LayoutSchema';
 export AccordionBlockEdit from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/Edit';
 export AccordionBlockView from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/View';
 export PanelsWidget from '@eeacms/volto-accordion-block/components/manage/Widgets/PanelsWidget';

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

@@ -46,18 +46,22 @@ export default (props) => {
               className={cx({ 'rotate-arrow': data?.right_arrows })}
             />
           )}
-          <Input
-            fluid
-            className="input-accordion-title"
-            transparent
-            placeholder="Enter Title"
-            value={panel?.title}
-            onClick={(e) => {
-              handleTitleClick();
-              e.stopPropagation();
-            }}
-            onChange={(e) => handleTitleChange(e, [uid, panel])}
-          />
+          {!data.readOnlyTitles ? (
+            <Input
+              fluid
+              className="input-accordion-title"
+              transparent
+              placeholder="Enter Title"
+              value={panel?.title}
+              onClick={(e) => {
+                handleTitleClick();
+                e.stopPropagation();
+              }}
+              onChange={(e) => handleTitleChange(e, [uid, panel])}
+            />
+          ) : (
+            <span>{panel?.title}</span>
+          )}
         </Accordion.Title>
         <Accordion.Content active={activeIndex === 0}>
           <AnimateHeight

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

@@ -11,7 +11,7 @@ import { emptyAccordion, getPanels } from './util';
 import './editor.less';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, pathname, selected } = props;
+  const { block, data, onChangeBlock, pathname, selected, manage } = props;
 
   const metadata = props.metadata || props.properties;
   const properties = isEmpty(data?.data?.blocks)
@@ -55,6 +55,10 @@ const Edit = (props) => {
         >
           <BlocksForm
             key={uid}
+            title={data.placeholder}
+            description={data?.instructions?.data}
+            manage={manage}
+            allowedBlocks={data.allowedBlocks}
             metadata={metadata}
             properties={isEmpty(panel) ? emptyBlocksForm() : panel}
             selectedBlock={selected ? selectedBlock[uid] : null}
@@ -97,7 +101,7 @@ const Edit = (props) => {
           />
         </AccordionEdit>
       ))}
-      {Object.keys(selectedBlock).length === 0 ? (
+      {Object.keys(selectedBlock).length === 0 && !data.readOnlySettings ? (
         <SidebarPortal selected={true}>
           <>
             <InlineForm

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

@@ -0,0 +1,75 @@
+const Schema = {
+  title: 'Accordion block settings',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'placeholder',
+        'instructions',
+        'allowedBlocks',
+        'required',
+        'fixed',
+        'disableNewBlocks',
+        'readOnly',
+        'readOnlyTitles',
+        'readOnlySettings',
+      ],
+    },
+  ],
+  properties: {
+    allowedBlocks: {
+      title: 'Allowed blocks',
+      description: 'Allow only the following blocks types',
+      type: 'array',
+      items: {
+        choices: [],
+      },
+    },
+    placeholder: {
+      title: 'Helper text',
+      description:
+        'A short hint that describes the expected value within this block',
+      type: 'string',
+    },
+    instructions: {
+      title: 'Instructions',
+      description: 'Detailed expected value within this block',
+      type: 'string',
+      widget: 'richtext',
+    },
+    required: {
+      title: 'Required',
+      description: "Don't allow deletion of this block",
+      type: 'boolean',
+    },
+    fixed: {
+      title: 'Fixed position',
+      description: 'Disable drag & drop on this block',
+      type: 'boolean',
+    },
+    disableNewBlocks: {
+      title: 'Disable new blocks',
+      description: 'Disable creation of new blocks after this block',
+      type: 'boolean',
+    },
+    readOnly: {
+      title: 'Read-only',
+      description: 'Disable editing on this block',
+      type: 'boolean',
+    },
+    readOnlyTitles: {
+      title: 'Read-only titles',
+      description: 'Disable editing on accordion titles',
+      type: 'boolean',
+    },
+    readOnlySettings: {
+      title: 'Read-only settings',
+      description: 'Disable editing on accordion block settings',
+      type: 'boolean',
+    },
+  },
+  required: [],
+};
+
+export default Schema;

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

@@ -48,7 +48,7 @@ const View = (props) => {
                     })}
                   />
                 )}
-                <label>{panel?.title}</label>
+                <span>{panel?.title}</span>
               </Accordion.Title>
               <Accordion.Content active={activeIndex === index}>
                 <AnimateHeight

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

@@ -23,8 +23,12 @@
     margin-top: 0 !important;
   }
 
-  .accordion-title.align-arrow-left {
-    padding-left: 0 !important;
+  .accordion-title {
+    text-transform: none !important;
+
+    &.align-arrow-left {
+      padding-left: 0 !important;
+    }
   }
 
   h1,

src/index.js

@@ -1,7 +1,39 @@
 import accordionSVG from '@plone/volto/icons/list-arrows.svg';
-import { AccordionBlockEdit, AccordionBlockView } from './components';
+import {
+  AccordionBlockEdit,
+  AccordionBlockView,
+  AccordionLayoutSchema,
+} from './components';
 import { PanelsWidget } from '@eeacms/volto-accordion-block/components';
 
+const extendedSchema = (config) => {
+  const choices = Object.keys(config.blocks.blocksConfig)
+    .map((key) => {
+      if (config.blocks.blocksConfig[key]?.restricted) {
+        return false;
+      } else {
+        const title = config.blocks.blocksConfig[key]?.title || key;
+        return [key, title];
+      }
+    })
+    .filter((val) => !!val);
+
+  choices.push(['accordion', 'Accordion']);
+
+  return {
+    ...AccordionLayoutSchema,
+    properties: {
+      ...AccordionLayoutSchema.properties,
+      allowedBlocks: {
+        ...AccordionLayoutSchema.properties.allowedBlocks,
+        items: {
+          choices: choices,
+        },
+      },
+    },
+  };
+};
+
 const applyConfig = (config) => {
   config.blocks.blocksConfig.accordion = {
     id: 'accordion',
@@ -14,6 +46,7 @@ const applyConfig = (config) => {
     mostUsed: false,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
+    schema: extendedSchema(config),
     security: {
       addPermission: [],
       view: [],