refactor(Styling): Use schemaEnhancer in favor of StyleWrapper

eea · Nov 15, 2022 · e6506d6 · e6506d6
1 parent 176d6fe
commit e6506d6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -19,10 +19,14 @@
 
 ## Features
 
-###
-
 ![Divider](https://github.com/eea/volto-block-divider/raw/develop/docs/divider.gif)
 
+## Upgrade
+
+### Upgrading to 5.x
+
+This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addStyling).
+
 ## Getting started
 
 1. Create new volto project if you don't already have one:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-divider",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "volto-block-divider: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/Divider/Schema.js b/src/components/Divider/Schema.js
@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers';
 
 const messages = defineMessages({
   Type: {
@@ -130,31 +131,36 @@ export const DividerEditSchema = ({ intl }) => ({
   required: [],
 });
 
-export const DividerStylingSchema = ({ intl }) => ({
-  title: intl.formatMessage(messages.Type),
-  block: 'divider',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme', 'inverted'],
-    },
-  ],
-  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)],
-      ],
-    },
-    inverted: {
-      title: intl.formatMessage(messages.Inverted),
-      description: intl.formatMessage(messages.InvertedHelp),
-      type: 'boolean',
+export const DividerStylingSchema = (args) => {
+  const schema = addStyling(args);
+  const { intl } = args;
+  schema.properties.styles.schema = {
+    title: intl.formatMessage(messages.Type),
+    block: 'divider',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['theme', 'inverted'],
+      },
+    ],
+    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)],
+        ],
+      },
+      inverted: {
+        title: intl.formatMessage(messages.Inverted),
+        description: intl.formatMessage(messages.InvertedHelp),
+        type: 'boolean',
+      },
     },
-  },
-  required: [],
-});
+    required: [],
+  };
+  return schema;
+};
diff --git a/src/index.js b/src/index.js
@@ -17,11 +17,10 @@ export default (config) => {
     view: DividerView,
     edit: DividerEdit,
     editSchema: DividerEditSchema,
-    stylesSchema: DividerStylingSchema,
+    schemaEnhancer: DividerStylingSchema,
     restricted: false,
     mostUsed: false,
     sidebarTab: 1,
-    enableStyling: true,
     security: {
       addPermission: [],
       view: [],