Make Add Cards Gallery button add block and then try to load images #404

packages/block-editor/src/components/index.js

@@ -17,15 +17,13 @@ export { default as SignalControl } from "./signal-control";
 export { default as TextPlaceholder } from './text-placeholder';
 export { default as ToggleGroup } from "./toggle-group";
 export { default as VariationPicker } from "./variation-picker";
-
 export { default as withVisibility } from "./with-visibility";
-
 export { default as insertTemplate } from './insert-template';
 export { default as getPlaceholderImages } from './get-placeholder-images';
-export { default as normalizeImages } from './normalize-images';
 
-export * from "./post-card";
 export * from './card';
+export * from './normalize-images';
+export * from "./post-card";
 
 export {
   getSvg,

packages/block-editor/src/components/normalize-images/index.js

@@ -1,17 +1,22 @@
 import apiFetch from '@wordpress/api-fetch';
 
 const normalizeImages = ( images ) => {
-	const promises = images.map( image => {
-		return apiFetch( {
-			path: `/wp/v2/media/${ image.id }`,
-		} ).then( data => {
-			return Object.assign( {}, image, {
-				description: data?.description?.raw
-			} );
-		} )
-	} );
+  const promises = images.map( normalizeImage );
 
-	return Promise.all( promises );
+  return Promise.all( promises );
 };
 
-export default normalizeImages;
+const normalizeImage = image => {
+  return apiFetch( {
+    path: `/wp/v2/media/${ image.id }`,
+  } ).then( data => {
+    return Object.assign( {}, image, {
+      description: data?.description?.raw
+    } );
+  } )
+}
+
+export {
+  normalizeImage,
+  normalizeImages,
+}

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

@@ -21,6 +21,7 @@ import { useDispatch } from '@wordpress/data';
 
 import {
   CustomMenuItem,
+  normalizeImage,
   normalizeImages,
   useInnerBlocks
 } from "@novablocks/block-editor";
@@ -35,7 +36,7 @@ const Controls = ( props ) => {
   const { attributes, setAttributes, clientId } = props;
   const { align, postsToShow } = attributes;
   const innerBlocks = useInnerBlocks( clientId );
-  const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+  const { replaceInnerBlocks, updateBlockAttributes } = useDispatch( 'core/block-editor' );
 
   const innerBlockAttributes = useMemo( () => {
     return compileSupernovaItemAttributes( attributes );
@@ -44,16 +45,24 @@ const Controls = ( props ) => {
   const onSelectImages = useCallback( images => {
     const newInnerBlocks = innerBlocks.slice();
 
-    normalizeImages( images ).then( newImages => {
-      newImages.forEach( image => {
-        newInnerBlocks.push( createBlock( 'novablocks/supernova-item', {
-          ...innerBlockAttributes,
-          defaultsGenerated: true,
-          images: [ image ]
-        } ) );
+    const collection = images.map( image => {
+      const block = createBlock( 'novablocks/supernova-item', {
+        ...innerBlockAttributes,
+        defaultsGenerated: true
       } );
 
-      replaceInnerBlocks( clientId, newInnerBlocks );
+      newInnerBlocks.push( block );
+
+      return [ block.clientId, image ];
+    } );
+
+    replaceInnerBlocks( clientId, newInnerBlocks );
+
+    collection.forEach( ( [ childClientId, image ] ) => {
+      normalizeImage( image ).then( newImage => {
+        console.log( childClientId, newImage );
+        updateBlockAttributes( childClientId, { images: [ newImage ] } );
+      } );
     } );
 
   }, [ clientId, innerBlocks ] );