remove schemaEnhancer

README.md

@@ -19,37 +19,19 @@ The Volto Separator Block allows editors to add a visual separator between block
 
 ![Separator-Block](https://github.com/kitconcept/volto-separator-block/raw/master/screencast.gif)
 
-## Block Alignment Enhancer
+## Block Schema
 
-This block features by default a block `schemaEnhancer` that provides an alignment option for the separator. This can be disabled by overwriting with your own `schemaEnhancer`
+This block features an option to make the line short, for visual variety purpuses. If that is the case, the line's `width` points to the custom property `--short-line-width`, which can be set if desired.
 
-```js
-  config.blocks.blocksConfig.separator = {
-    ...config.blocks.blocksConfig.separator,
-    schemaEnhancer: mySeparatorSchemaEnhancer,
-  }
-```
-or setting it to `null` or `undefined`:
+The `schema` can be extended by using with your own `schemaEnhancer`:
 
 ```js
   config.blocks.blocksConfig.separator = {
     ...config.blocks.blocksConfig.separator,
-    schemaEnhancer: null,
+    schemaEnhancer: mySeparatorSchemaEnhancer,
   }
 ```
 
-Also, if you want to keep the default alignment but still add your own `schemaEnhancer` you can compose it along with your own:
-
-```js
-import { composeSchema } from '@plone/volto/helpers';
-import { SeparatorStyleEnhancer } from '@kitconcept/volto-separator-block';
-
-    config.blocks.blocksConfig.separator = {
-      ...config.blocks.blocksConfig.separator,
-      schemaEnhancer: composeSchema(mySeparatorSchemaEnhancer, defaultSeparatorEnhancer),
-    }
-```
-
 ## Installation
 
 To install your project, you must choose the method appropriate to your version of Volto.

packages/volto-separator-block/src/components/View.jsx

@@ -9,12 +9,12 @@ const LegacyWrapper = (props) => (
 );
 
 const SeparatorView = (props) => {
-  const { blocksConfig } = props;
+  const { blocksConfig, data } = props;
   const isBlockModelv3 = blocksConfig?.separator?.blockModel === 3;
 
   return (
     <MaybeWrap condition={!isBlockModelv3} as={LegacyWrapper} {...props}>
-      <div className="line" />
+      <div className={cx('line', { short: data.shortLine })} />
     </MaybeWrap>
   );
 };

packages/volto-separator-block/src/components/schema.js

@@ -1,11 +1,6 @@
-import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  title: {
-    id: 'Title',
-    defaultMessage: 'Title',
-  },
   separatorBlock: {
     id: 'Separator Block',
     defaultMessage: 'Separator',
@@ -17,31 +12,18 @@ const messages = defineMessages({
 });
 
 export const SeparatorSchema = (props) => {
+  const { intl } = props;
+
   return {
-    title: props.intl.formatMessage(messages.separatorBlock),
+    title: intl.formatMessage(messages.separatorBlock),
     block: 'separator',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['shortLine'] }],
+    properties: {
+      shortLine: {
+        title: intl.formatMessage(messages.shortline),
+        type: 'boolean',
       },
-    ],
-    properties: {},
+    },
     required: [],
   };
 };
-
-export const SeparatorStyleEnhancer = ({ schema, intl }) => {
-  addStyling({ schema, intl });
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'shortLine',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-  schema.properties.styles.schema.properties.shortLine = {
-    title: intl.formatMessage(messages.shortline),
-    type: 'boolean',
-  };
-
-  return schema;
-};

packages/volto-separator-block/src/index.js

@@ -1,5 +1,4 @@
 import { defineMessages } from 'react-intl';
-import { SeparatorStyleEnhancer } from './components/schema';
 import divideHorizontalSVG from '@plone/volto/icons/divide-horizontal.svg';
 import SeparatorView from './components/View';
 import SeparatorEdit from './components/Edit';
@@ -20,7 +19,6 @@ const applyConfig = (config) => {
     group: 'teasers',
     view: SeparatorView,
     edit: SeparatorEdit,
-    schemaEnhancer: SeparatorStyleEnhancer,
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,

packages/volto-separator-block/src/theme/main.less

@@ -20,10 +20,10 @@
       margin-top: -1px;
       content: '';
     }
-  }
 
-  &.has--shortLine--true {
-    width: var(--short-line-width, 25%);
+    &.short {
+      width: var(--short-line-width, 25%);
+    }
   }
 
   &.has--align--left {