PLANET-7153: Follow up Wordpress 6.2 deprecations (#1042)

* Replace position value to placement - Replace the deprectaed isPrimary prop to variant taken from @types/wordpress__components/button/index.d.ts line 15 - Replace the deprectaed isSecondary prop to variantaken from @types/wordpress__components/button/index.d.ts line 21 - Follow up React 18: ReactDOM.hydrate is no longer supported in React 18 --------- Co-authored-by: Dan Tovbein <[email protected]>
greenpeace · Aug 23, 2023 · baf89cb · baf89cb
1 parent c1fd47b
commit baf89cb
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/assets/src/ImageBlockExtension.js b/assets/src/ImageBlockExtension.js
@@ -106,8 +106,7 @@ const addExtraControls = function() {
                         });
                         updateCaptionAlignment(option.value);
                       }}
-                      isPrimary={captionAlignment === option.value}
-                      isSecondary={captionAlignment !== option.value}>
+                      variant={captionAlignment === option.value ? 'primary' : 'secondary'}>
                       { option.label }
                     </Button>;
                   })

diff --git a/assets/src/blocks/Accordion/AccordionEditor.js b/assets/src/blocks/Accordion/AccordionEditor.js
@@ -156,7 +156,7 @@ const renderEdit = ({tabs}, setAttributes, updateTabAttribute) => {
           {__('Add item', 'planet4-blocks-backend')}
         </Button>
         <Button
-          isSecondary
+          variant="secondary"
           disabled={tabs.length <= 1}
           onClick={removeTab}
         >

diff --git a/assets/src/blocks/CarouselHeader/EditableBackground.js b/assets/src/blocks/CarouselHeader/EditableBackground.js
@@ -39,11 +39,11 @@ export const EditableBackground = ({
             }
           </div>
           <Dropdown
-            position="bottom left"
+            placement="bottom left"
             className="carousel-header-editor-controls"
             renderToggle={({onToggle}) => (
               <Button
-                isPrimary
+                variant="primary"
                 icon="edit"
                 onClick={onToggle}
               >

diff --git a/assets/src/blocks/Submenu/SubmenuEditor.js b/assets/src/blocks/Submenu/SubmenuEditor.js
@@ -71,7 +71,7 @@ const renderEdit = (attributes, setAttributes) => {
           {__('Add level', 'planet4-blocks-backend')}
         </Button>
         <Button
-          isSecondary
+          variant="secondary"
           onClick={removeLevel}
           disabled={attributes.levels.length <= 1}
         >

diff --git a/assets/src/functions/hydrateBlock.js b/assets/src/functions/hydrateBlock.js
@@ -13,7 +13,9 @@ export const hydrateBlock = (blockName, Component, csrAttributes = {}) => { // e
   blocks.forEach(
     blockNode => {
       const attributes = JSON.parse(blockNode.dataset.attributes);
-      hydrateRoot(blockNode, <Component {...attributes} {...csrAttributes} />);
+      if(blockNode.length) {
+        hydrateRoot(blockNode, <Component {...attributes} {...csrAttributes} />);
+      }
     }
   );
 };