Prepare for Block Model v3, backwards compatible

src/components/Data.jsx

@@ -4,9 +4,12 @@ import { BlockDataForm } from '@plone/volto/components';
 import { SeparatorSchema } from './schema';
 
 const SeparatorData = (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { data, block, onChangeBlock, schemaEnhancer, navRoot, contentType } =
+    props;
   const intl = useIntl();
-  const schema = SeparatorSchema({ ...props, intl });
+  const schema = schemaEnhancer
+    ? schemaEnhancer(SeparatorSchema({ ...props, intl }), props)
+    : SeparatorSchema({ ...props, intl });
 
   return (
     <BlockDataForm
@@ -18,9 +21,12 @@ const SeparatorData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
       fieldIndex={data.index}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

src/components/View.jsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import cx from 'classnames';
+import { MaybeWrap } from '@plone/volto/components';
 
-const SeparatorView = (props) => {
-  //eslint-disable-next-line
-  const { className, data, style } = props;
+const LegacyWrapper = (props) => (
+  <div className={cx('block separator', props.className)}>{props.children}</div>
+);
+
+const SeparatorView = ({ data, isEditMode, className, blocksConfig }) => {
+  const isBlockModelv3 = blocksConfig?.separator?.v3;
   return (
-    <div className={cx('block separator', className)} style={style}>
+    <MaybeWrap
+      condition={!isBlockModelv3}
+      as={LegacyWrapper}
+      className={className}
+    >
       <div className="line" />
-    </div>
+    </MaybeWrap>
   );
 };