Masonry block use inner core/image blocks

babel.config.json

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@wordpress/babel-preset-default"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

package.json

@@ -84,7 +84,7 @@
 		"@wordpress/api-fetch": "^5.2.4",
 		"@wordpress/base-styles": "^4.0.2",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-editor": "^7.0.4",
+		"@wordpress/block-editor": "8.0.1",
 		"@wordpress/block-library": "^6.0.2",
 		"@wordpress/blocks": "^11.1.2",
 		"@wordpress/components": "^19.0.0",
@@ -108,7 +108,9 @@
 		"@wordpress/jest-preset-default": "^7.1.2",
 		"@wordpress/jest-puppeteer-axe": "^3.1.0",
 		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/notices": "^3.2.5",
 		"@wordpress/plugins": "^4.0.4",
+		"@wordpress/primitives": "^3.0.3",
 		"@wordpress/rich-text": "^5.0.4",
 		"@wordpress/scripts": "^19.0.0",
 		"@wordpress/server-side-render": "^3.0.4",

src/blocks/form/test/__snapshots__/save.spec.js.snap

@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`coblocks/form should render with form details 1`] = `"<!-- wp:coblocks/form {\\"subject\\":\\"Form subject\\",\\"to\\":\\"Form to text\\"} /-->"`;
+exports[`coblocks/form should render with form details 1`] = `
+"<!-- wp:coblocks/form {\\"subject\\":\\"Form subject\\",\\"to\\":\\"Form to text\\"} -->
+<div class=\\"wp-block-coblocks-form\\"></div>
+<!-- /wp:coblocks/form -->"
+`;

src/blocks/gallery-carousel/test/transforms.spec.js

@@ -20,6 +20,11 @@ describe( 'coblocks/gallery-carousel transforms', () => {
 			{ index: 0, url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg' },
 			{ index: 1, url: 'https://s.w.org/images/core/5.3/Glacial_lakes,_Bhutan.jpg' },
 		] };
+
+	const innerBlocks = [ 
+		createBlock( 'core/image', attributes.images[0], [] ),
+		createBlock( 'core/image', attributes.images[1], [] )
+	];
 
 	beforeAll( () => {
 		// Register all gallery blocks.
@@ -38,7 +43,7 @@ describe( 'coblocks/gallery-carousel transforms', () => {
 	} );
 
 	it( 'should transform from coblocks/gallery-masonry block', () => {
-		const galleryMasonry = createBlock( 'coblocks/gallery-masonry', attributes );
+		const galleryMasonry = createBlock( 'coblocks/gallery-masonry', {}, innerBlocks );
 		const transformed = switchToBlockType( galleryMasonry, name );
 
 		expect( transformed[ 0 ].isValid ).toBe( true );
@@ -93,7 +98,7 @@ describe( 'coblocks/gallery-carousel transforms', () => {
 	} );
 
 	it( 'should transform from core/image block only if match', () => {
-		expect( transforms.from[ 1 ].isMatch( [ { id: 1234, url: 'someUrl' }, { id: "1234", url: 'someUrl' } ] ) ).toHaveLength( 1 );
+		expect( transforms.from[ 2 ].isMatch( [ { id: 1234, url: 'someUrl' }, { id: "1234", url: 'someUrl' } ] ) ).toHaveLength( 1 );
 	} );
 
 	it( 'should transform to coblocks/gallery-stacked block', () => {
@@ -109,13 +114,12 @@ describe( 'coblocks/gallery-carousel transforms', () => {
 
 	it( 'should transform to coblocks/gallery-masonry block', () => {
 		const block = createBlock( name, attributes );
-		const transformed = switchToBlockType( block, 'coblocks/gallery-masonry' );
+		const transformed = switchToBlockType( block, 'coblocks/gallery-masonry' )[ 0 ];
 
-		expect( transformed[ 0 ].isValid ).toBe( true );
-		for ( let i = 0; i < attributes.images.length; i++ ) {
-			expect( transformed[ 0 ].attributes.images[ i ].index ).toBe( attributes.images[ i ].index );
-			expect( transformed[ 0 ].attributes.images[ i ].url ).toBe( attributes.images[ i ].url );
-		}
+		expect( transformed.isValid ).toBe( true );
+		transformed.innerBlocks.forEach( ( image, index ) => {
+			expect( image.attributes.url ).toBe( attributes.images[ index ].url );
+		} );
 	} );
 
 	it( 'should transform to coblocks/gallery-offset block', () => {

src/blocks/gallery-carousel/transforms.js

@@ -7,8 +7,8 @@ import pick from 'lodash/pick';
 /**
  * Internal dependencies
  */
-import metadata from './block.json';
 import { GalleryTransforms } from '../../components/block-gallery/shared';
+import metadata from './block.json';
 
 /**
  * WordPress dependencies
@@ -18,10 +18,8 @@ import { createBlock } from '@wordpress/blocks';
 const transforms = {
 	from: [
 		{
-			type: 'block',
 			blocks: [
 				'coblocks/gallery-collage',
-				'coblocks/gallery-masonry',
 				'coblocks/gallery-stacked',
 				'coblocks/gallery-offset',
 				'core/gallery',
@@ -32,36 +30,55 @@ const transforms = {
 					gridSize: 'lrg',
 				} )
 			),
+			type: 'block',
 		},
 		{
+			blocks: [ 'coblocks/gallery-masonry' ],
+			transform: ( attributes, innerBlocks ) => {
+				const validImages = innerBlocks.map( ( block, index ) => {
+					const imageBlockAttributes = block.attributes;
+					return {
+						alt: imageBlockAttributes?.alt,
+						caption: imageBlockAttributes?.caption,
+						id: imageBlockAttributes?.id,
+						index,
+						url: imageBlockAttributes?.url,
+					};
+				} );
+				return createBlock( metadata.name, { images: validImages }, [] );
+			},
 			type: 'block',
-			isMultiBlock: true,
+		},
+		{
 			blocks: [ 'core/image' ],
 			isMatch: ( content ) => filter( content, ( { id, url } ) => Number.isInteger( id ) && url ),
+			isMultiBlock: true,
 			transform: ( content ) =>
 				createBlock( metadata.name, {
-					images: content.map( ( attributes, index ) => ( { ...pick( attributes, [ 'id', 'url', 'alt', 'caption' ] ), index } ) ),
-					ids: content.map( ( { id } ) => id ),
 					captions: !! filter( content, ( { caption } ) => !! caption ),
+					ids: content.map( ( { id } ) => id ),
+					images: content.map( ( attributes, index ) => ( { ...pick( attributes, [ 'id', 'url', 'alt', 'caption' ] ), index } ) ),
 				} ),
+			type: 'block',
+
 		},
 		{
-			type: 'prefix',
 			prefix: ':carousel',
 			transform( content ) {
 				return createBlock( metadata.name, {
 					content,
 				} );
 			},
+			type: 'prefix',
 		},
 	],
 	to: [
 		{
-			type: 'block',
 			blocks: [ 'core/gallery' ],
 			transform: ( attributes ) => createBlock( 'core/gallery', {
 				...GalleryTransforms( attributes ),
 			} ),
+			type: 'block',
 		},
 	],
 };