diff --git a/README.md b/README.md index cc093bf..64838e4 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 145bd82..5b8d247 100644 --- a/package.json +++ b/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", diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js index 0f7efc3..99c6b41 100644 --- a/src/components/manage/Blocks/Accordion/Schema.js +++ b/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; +}; diff --git a/src/index.js b/src/index.js index e67cab3..f39a8fd 100644 --- a/src/index.js +++ b/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',