Add accordion block (#108)

news/108.feature

@@ -0,0 +1 @@
+Add accordion @sneridagh

src/components/Blocks/Accordion/schema.jsx

@@ -0,0 +1,11 @@
+export function AccordionSchemaEnhancer({ schema, formData, intl }) {
+  // Opinionated removal of the options fieldset
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'options');
+  // Some other opinionated defaults
+  schema.required = [];
+  schema.properties.right_arrows.default = true;
+  schema.properties.collapsed.default = false;
+  schema.properties.non_exclusive.default = false;
+
+  return schema;
+}

src/components/Blocks/schema.js

@@ -33,5 +33,6 @@ export const defaultStylingSchema = ({ schema, formData, intl }) => {
     colors,
     default: defaultBGColor,
   };
+
   return schema;
 };

src/index.js

@@ -11,9 +11,12 @@ import Container from './components/Atoms/Container/Container';
 import TopSideFacets from './components/Blocks/Search/TopSideFacets';
 
 import GridListingBlockTemplate from './components/Blocks/Listing/GridTemplate';
+import { ButtonStylingSchema } from './components/Blocks/Button/schema';
+
+import { AccordionSchemaEnhancer } from './components/Blocks/Accordion/schema';
 
 import gridSVG from './icons/block_icn_grid.svg';
-import { ButtonStylingSchema } from './components/Blocks/Button/schema';
+import accordionSVG from './icons/block_icn_accordion.svg';
 
 const BG_COLORS = [
   { name: 'transparent', label: 'Transparent' },
@@ -119,6 +122,30 @@ const applyConfig = (config) => {
     },
   ];
 
+  config.blocks.blocksConfig.accordion = {
+    ...config.blocks.blocksConfig.accordion,
+    mostUsed: true,
+    icon: accordionSVG,
+    allowedBlocks: ['slate', 'teaser', 'image', 'listing', 'slateTable'],
+    colors: BG_COLORS,
+    schemaEnhancer: composeSchema(
+      AccordionSchemaEnhancer,
+      defaultStylingSchema,
+    ),
+    sidebarTab: 1,
+  };
+
+  config.blocks.blocksConfig.accordion.blocksConfig = {
+    ...config.blocks.blocksConfig,
+    teaser: {
+      ...config.blocks.blocksConfig.teaser,
+      schemaEnhancer: composeSchema(
+        gridTeaserDisableStylingSchema,
+        teaserSchemaEnhancer,
+      ),
+    },
+  };
+
   config.blocks.blocksConfig.__grid = {
     ...config.blocks.blocksConfig.__grid,
     colors: BG_COLORS,

src/theme/_layout.scss

@@ -247,6 +247,16 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
   margin-right: -30px !important;
 }
 
+#page-add,
+#page-edit {
+  .block-editor-accordion {
+    [class*='block-editor-'] {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}
+
 .contenttype-file {
   a {
     text-decoration: underline;

src/theme/blocks/_accordion.scss

@@ -0,0 +1,4 @@
+// Adjust in case the grid add-on is still in place.
+.block.accordion [data-rbd-draggable-context-id] {
+  margin-bottom: 2rem;
+}

src/theme/main.scss

@@ -12,6 +12,7 @@
 @import 'content';
 @import 'footer';
 
+@import 'blocks/accordion';
 @import 'blocks/image';
 @import 'blocks/introduction';
 @import 'blocks/slider';