@wordpress/block-library 8.4.0 → 8.6.0

package/src/gallery/test/__snapshots__/index.native.js.snap

@@ -1,171 +1,171 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Gallery block Columns setting decrements columns 1`] = `
-"<!-- wp:gallery {\\"columns\\":2,\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-2 is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"columns":2,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-2 is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block Columns setting does not increment due to maximum value 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block cancels uploads 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":null} -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":null} -->
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":null} -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- wp:image {"id":null} -->
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block disables crop images setting 1`] = `
-"<!-- wp:gallery {\\"imageCrop\\":false,\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"imageCrop":false,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block finishes pending uploads upon opening the editor 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block handles failed uploads 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- wp:image {"id":2} -->
+<figure class="wp-block-image"><img src="file:///local-image-2.jpeg" alt="" class="wp-image-2"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block inserts block 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"media\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1,\\"linkDestination\\":\\"media\\"} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:gallery {"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1,"linkDestination":"media"} -->
+<figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2,\\"linkDestination\\":\\"media\\"} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- wp:image {"id":2,"linkDestination":"media"} -->
+<figure class="wp-block-image"><img src="file:///local-image-2.jpeg" alt="" class="wp-image-2"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block rearranges gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block sets caption to gallery 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
-<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
+<!-- /wp:image --><figcaption class="blocks-gallery-caption wp-element-caption"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block sets caption to gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/><figcaption class="wp-element-caption"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block successfully uploads items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block takes a photo 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block uploads from free photo library 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block uploads from other apps 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

package/src/gallery/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gallery block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Gallery block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Gallery block transformations to Image block 1`] = `
+"<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image -->"
+`;

package/src/gallery/test/transforms.native.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Gallery';
+const initialHtml = `
+<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Image', ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: true,
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/gallery/use-image-sizes.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -35,17 +30,9 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 				}
 
 				const sizes = imageSizes.reduce( ( currentSizes, size ) => {
-					const defaultUrl = get( img, [
-						'sizes',
-						size.slug,
-						'url',
-					] );
-					const mediaDetailsUrl = get( img, [
-						'media_details',
-						'sizes',
-						size.slug,
-						'source_url',
-					] );
+					const defaultUrl = img.sizes?.[ size.slug ]?.url;
+					const mediaDetailsUrl =
+						img.media_details?.sizes?.[ size.slug ]?.source_url;
 					return {
 						...currentSizes,
 						[ size.slug ]: defaultUrl || mediaDetailsUrl,

package/src/gallery/v1/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -105,17 +105,10 @@ function GalleryEdit( props ) {
 					}
 					const image = getMedia( id );
 					const sizes = imageSizes.reduce( ( currentSizes, size ) => {
-						const defaultUrl = get( image, [
-							'sizes',
-							size.slug,
-							'url',
-						] );
-						const mediaDetailsUrl = get( image, [
-							'media_details',
-							'sizes',
-							size.slug,
-							'source_url',
-						] );
+						const defaultUrl = image?.sizes?.[ size.slug ]?.url;
+						const mediaDetailsUrl =
+							image?.media_details?.sizes?.[ size.slug ]
+								?.source_url;
 						return {
 							...currentSizes,
 							[ size.slug ]: defaultUrl || mediaDetailsUrl,
@@ -310,10 +303,8 @@ function GalleryEdit( props ) {
 			if ( ! image.id ) {
 				return image;
 			}
-			const url = get( resizedImages, [
-				parseInt( image.id, 10 ),
-				newSizeSlug,
-			] );
+			const url =
+				resizedImages[ parseInt( image.id, 10 ) ]?.[ newSizeSlug ];
 			return {
 				...image,
 				...( url && { url } ),
@@ -413,6 +404,7 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Crop images' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }

package/src/gallery/v1/gallery-image.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -119,7 +118,7 @@ class GalleryImage extends Component {
 
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
-		if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
+		if ( caption && ! mediaAttributes.caption ) {
 			const { caption: omittedCaption, ...restMediaAttributes } =
 				mediaAttributes;
 			mediaAttributes = restMediaAttributes;

package/src/gallery/v1/shared.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	const imageProps = Object.fromEntries(
 		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
@@ -11,12 +6,12 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	);
 
 	imageProps.url =
-		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url;
+		image?.sizes?.[ sizeSlug ]?.url ||
+		image?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		image?.url;
 	const fullUrl =
-		get( image, [ 'sizes', 'full', 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
+		image?.sizes?.full?.url ||
+		image?.media_details?.sizes?.full?.source_url;
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;
 	}

package/src/group/test/__snapshots__/edit.native.js.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:heading -->
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading --></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Group block ungroups inner blocks 1`] = `
 "<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;

package/src/group/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Group block transforms unwraps content 1`] = `
+"<!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph -->"
+`;

package/src/group/test/transforms.native.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Group';
+const initialHtml = `
+<!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->`;
+
+const transformsWithInnerBlocks = [ 'Columns' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unwraps content', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Transform block…' ) );
+		fireEvent.press( getByText( 'Unwrap' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block,
+			{ canUnwrap: true }
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );