Render group of blocks as section, article, etc.

eea · Sep 29, 2020 · 765b513 · 765b513
1 parent bbe8939
commit 765b513
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/manage/Blocks/Group/Schema.js b/src/components/manage/Blocks/Group/Schema.js
@@ -8,6 +8,7 @@ const Schema = {
         'placeholder',
         'instructions',
         'allowedBlocks',
+        'as',
         'required',
         'fixed',
         'disableNewBlocks',
@@ -36,6 +37,20 @@ const Schema = {
       type: 'string',
       widget: 'richtext',
     },
+    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: {
       title: 'Required',
       description: "Don't allow deletion of this block",

diff --git a/src/components/manage/Blocks/Group/View.jsx b/src/components/manage/Blocks/Group/View.jsx
@@ -3,7 +3,7 @@ import { RenderBlocks } from '@eeacms/volto-blocks-form/components';
 
 const View = (props) => {
   const { data } = props;
-  return <RenderBlocks {...props} content={data?.data || {}} />;
+  return <RenderBlocks as={data?.as} {...props} content={data?.data || {}} />;
 };
 
 export default View;