Quickfix supernova block controlling innerBlocks count and attributes

Author: razwan

packages/block-library/src/blocks/supernova/edit.js

@@ -155,7 +155,7 @@ const SupernovaEdit = props => {
   }, [ attributes ] );
 
   // Make sure that we keep the number of inner Supernova Items in sync with the number of items.
-//  useInnerBlocksCount( clientId, postsToShow, 'novablocks/supernova-item', innerBlocksAttributes );
+  useInnerBlocksCount( clientId, postsToShow, 'novablocks/supernova-item', innerBlocksAttributes );
 
   // Either lock or unlock nb-supernova-items depending on whether we are in a query or not.
   if ( isDescendentOfQueryLoop ) {

packages/block-library/src/blocks/supernova/filters/with-set-children-attributes.js

@@ -1,8 +1,10 @@
 import { useCallback } from "@wordpress/element";
 import { useDispatch, useSelect } from "@wordpress/data";
 
-import { getChildAttributes } from "../utils";
 import { getAlignFromMatrix } from "@novablocks/utils";
+import { useInnerBlocks } from "@novablocks/block-editor";
+
+import { getChildAttributes } from "../utils";
 
 const withSetChildrenAttributes = OriginalComponent => {
 
@@ -15,6 +17,7 @@ const withSetChildrenAttributes = OriginalComponent => {
     const { clientId } = props;
     const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
     const { getBlock } = useSelect( select => select( 'core/block-editor' ) );
+    const innerBlocks = useInnerBlocks( clientId );
 
     const normalizeAttributes = useCallback( attributes => {
       const { cardLayout } = attributes;
@@ -32,37 +35,38 @@ const withSetChildrenAttributes = OriginalComponent => {
     }, [] );
 
     const setChildrenAttributes = useCallback( attributes => {
-      const { innerBlocks } = getBlock( clientId );
       const newAttributes = getChildAttributes( attributes );
 
-      if ( attributes.contentPosition && Array.isArray( innerBlocks ) ) {
+      if ( Array.isArray( innerBlocks ) ) {
         innerBlocks.filter( block => block.name === 'novablocks/supernova-item' ).forEach( block => {
           updateBlockAttributes( block.clientId, newAttributes );
 
-          const contentBlocks = getBlock( block.clientId ).innerBlocks;
-          const contentAlign = getAlignFromMatrix( attributes?.contentPosition );
+          if ( attributes.contentPosition ) {
+            const contentBlocks = getBlock( block.clientId ).innerBlocks;
+            const contentAlign = getAlignFromMatrix( attributes?.contentPosition );
 
-          if ( Array.isArray( contentBlocks ) ) {
+            if ( Array.isArray( contentBlocks ) ) {
 
-            contentBlocks.filter( block => block.name === 'novablocks/headline' ).forEach( block => {
-              updateBlockAttributes( block.clientId, { textAlign: contentAlign[1] } );
-            } )
+              contentBlocks.filter( block => block.name === 'novablocks/headline' ).forEach( block => {
+                updateBlockAttributes( block.clientId, { textAlign: contentAlign[1] } );
+              } )
 
-            contentBlocks.filter( block => block.name === 'core/heading' ).forEach( block => {
-              updateBlockAttributes( block.clientId, { textAlign: contentAlign[1] } );
-            } )
+              contentBlocks.filter( block => block.name === 'core/heading' ).forEach( block => {
+                updateBlockAttributes( block.clientId, { textAlign: contentAlign[1] } );
+              } )
 
-            contentBlocks.filter( block => block.name === 'core/paragraph' ).forEach( block => {
-              updateBlockAttributes( block.clientId, { align: contentAlign[1] } );
-            } )
+              contentBlocks.filter( block => block.name === 'core/paragraph' ).forEach( block => {
+                updateBlockAttributes( block.clientId, { align: contentAlign[1] } );
+              } )
 
-            contentBlocks.filter( block => block.name === 'core/buttons' ).forEach( block => {
-              updateBlockAttributes( block.clientId, { layout: { ...block.attributes.layout, type: 'flex', justifyContent: contentAlign[1] } } );
-            } )
+              contentBlocks.filter( block => block.name === 'core/buttons' ).forEach( block => {
+                updateBlockAttributes( block.clientId, { layout: { ...block.attributes.layout, type: 'flex', justifyContent: contentAlign[1] } } );
+              } )
+            }
           }
         } );
       }
-    }, [ clientId ] );
+    }, [ innerBlocks ] );
 
     return (
       <OriginalComponent { ...props } setAttributes={ attributes => {