From 9f5895adf56f3f07e84e369a926d20db04f22485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dante=20=C3=81lvarez?=
 <89805481+danalvrz@users.noreply.github.com>
Date: Tue, 4 Jun 2024 19:02:23 -0600
Subject: [PATCH] add LegacyWrapper for BMv3 support

---
 .../volto-heading-block/src/components/View.jsx  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/volto-heading-block/src/components/View.jsx b/packages/volto-heading-block/src/components/View.jsx
index b760209..8009e13 100644
--- a/packages/volto-heading-block/src/components/View.jsx
+++ b/packages/volto-heading-block/src/components/View.jsx
@@ -2,16 +2,26 @@ import React from 'react';
 import { withBlockExtensions } from '@plone/volto/helpers';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
+import { MaybeWrap } from '@plone/volto/components';
 
 const HeadingView = (props) => {
-  const { className, data } = props;
+  const { className, data, blocksConfig } = props;
   const Element = data.tag || 'h2';
   const show_alignment = config.blocks?.blocksConfig?.heading?.show_alignment;
+  const isBlockModelv3 = blocksConfig?.heading?.blockModel === 3;
+
+  const LegacyWrapper = ({ className, children }) => (
+    <div className={cx('block heading', className)}>{children}</div>
+  );
 
   return (
     <>
       {data && (
-        <div className={cx('block heading', className)}>
+        <MaybeWrap
+          condition={!isBlockModelv3}
+          as={LegacyWrapper}
+          className={className}
+        >
           <div className="heading-wrapper">
             <Element
               style={show_alignment ? { textAlign: data.alignment } : {}}
@@ -20,7 +30,7 @@ const HeadingView = (props) => {
               {data?.heading || ''}
             </Element>
           </div>
-        </div>
+        </MaybeWrap>
       )}
     </>
   );