Prepare for Block Model v3, backwards compatible

src/components/Data.jsx

@@ -11,7 +11,8 @@ const messages = defineMessages({
 });
 
 const ButtonData = (props) => {
-  const { data, block, onChangeBlock, schemaEnhancer } = props;
+  const { data, block, onChangeBlock, schemaEnhancer, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = schemaEnhancer
     ? schemaEnhancer(ButtonSchema({ ...props, intl }), props)
@@ -27,9 +28,11 @@ const ButtonData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
-      fieldIndex={data.index}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

src/components/Edit.jsx

@@ -5,6 +5,7 @@ import View from './View';
 
 const Edit = (props) => {
   const { data, block, onChangeBlock, selected } = props;
+
   return (
     <>
       <View {...props} isEditMode />

src/components/View.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
 import cx from 'classnames';
-import { ConditionalLink } from '@plone/volto/components';
+import { ConditionalLink, MaybeWrap } from '@plone/volto/components';
 import { defineMessages, useIntl } from 'react-intl';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   ButtonText: {
@@ -11,9 +12,16 @@ const messages = defineMessages({
   },
 });
 
-const View = ({ data, isEditMode, className }) => {
+const LegacyWrapper = (props) => (
+  <div className={cx('block __button', props.className)}>
+    <div className="button container">{props.children}</div>
+  </div>
+);
+
+const View = ({ data, isEditMode, className, blocksConfig }) => {
   const [hasLink, setHasLink] = React.useState(false);
   const intl = useIntl();
+  const isBlockModelv3 = blocksConfig?.__button?.v3;
 
   React.useEffect(() => {
     if (data.href) {
@@ -47,11 +55,9 @@ const View = ({ data, isEditMode, className }) => {
   );
 
   return (
-    <div className={cx('block __button', className)}>
-      <div className="button container">
-        <div className={cx(`align ${data?.inneralign}`)}>{link}</div>
-      </div>
-    </div>
+    <MaybeWrap condition={!isBlockModelv3} as={LegacyWrapper}>
+      <div className={cx(`align ${data?.inneralign}`)}>{link}</div>
+    </MaybeWrap>
   );
 };
 

src/index.js

@@ -16,6 +16,7 @@ const applyConfig = (config) => {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    category: 'action',
   };
   return config;
 };