refactor(Styling): Use schemaEnhancer in favor of StyleWrapper - refs…

… #152894

README.md

@@ -20,6 +20,12 @@
 
 ![Volto Block Accordion](https://github.com/eea/volto-accordion-block/raw/docs/docs/volto-accordion-block.gif)
 
+## Upgrade
+
+### Upgrading to 6.x
+
+This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addStyling).
+
 ## Getting started
 
 ### Try volto-accordion-block with Docker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers';
 
 const messages = defineMessages({
   Accordion: {
@@ -144,26 +145,31 @@ export const AccordionBlockSchema = ({ intl }) => ({
   required: ['title'],
 });
 
-export const AccordionStylingSchema = ({ intl }) => ({
-  title: intl.formatMessage(messages.Accordion),
-  block: 'accordion',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme'],
+export const AccordionStylingSchema = (props) => {
+  const { intl } = props;
+  const schema = addStyling(props);
+  schema.properties.styles.schema = {
+    title: intl.formatMessage(messages.Accordion),
+    block: 'accordion',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['theme'],
+      },
+    ],
+    properties: {
+      theme: {
+        title: intl.formatMessage(messages.Theme),
+        description: intl.formatMessage(messages.ThemeHelp),
+        choices: [
+          ['primary', intl.formatMessage(messages.ThemePrimary)],
+          ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+          ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+        ],
+      },
     },
-  ],
-  properties: {
-    theme: {
-      title: intl.formatMessage(messages.Theme),
-      description: intl.formatMessage(messages.ThemeHelp),
-      choices: [
-        ['primary', intl.formatMessage(messages.ThemePrimary)],
-        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
-        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
-      ],
-    },
-  },
-  required: [],
-});
+    required: [],
+  };
+  return schema;
+};

src/index.js

@@ -56,8 +56,7 @@ const applyConfig = (config) => {
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
     schema: extendedSchema(config),
-    stylesSchema: AccordionStylingSchema,
-    enableStyling: true,
+    schemaEnhancer: AccordionStylingSchema,
     // See https://react.semantic-ui.com/modules/accordion/
     options: {
       styled: 'styled',