@wordpress/block-library 8.4.0 → 8.5.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/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/heading/test/__snapshots__/index.native.js.snap

@@ -2,6 +2,6 @@
 
 exports[`Heading block inserts block 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;

package/src/image/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -65,8 +65,8 @@ export const pickRelevantMediaFiles = ( image, size ) => {
 	);
 
 	imageProps.url =
-		get( image, [ 'sizes', size, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', size, 'source_url' ] ) ||
+		image?.sizes?.[ size ]?.url ||
+		image?.media_details?.sizes?.[ size ]?.source_url ||
 		image.url;
 	return imageProps;
 };
@@ -192,7 +192,7 @@ export function ImageEdit( {
 
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
-		if ( captionRef.current && ! get( mediaAttributes, [ 'caption' ] ) ) {
+		if ( captionRef.current && ! mediaAttributes.caption ) {
 			const { caption: omittedCaption, ...restMediaAttributes } =
 				mediaAttributes;
 			mediaAttributes = restMediaAttributes;

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -166,8 +166,8 @@ export default function Image( {
 		! isContentLocked &&
 		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) =>
-			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
+		.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
 		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
@@ -259,12 +259,7 @@ export default function Image( {
 	}
 
 	function updateImage( newSizeSlug ) {
-		const newUrl = get( image, [
-			'media_details',
-			'sizes',
-			newSizeSlug,
-			'source_url',
-		] );
+		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
 		if ( ! newUrl ) {
 			return null;
 		}

package/src/image/index.php

@@ -19,10 +19,10 @@ function render_block_core_image( $attributes, $content ) {
 		// to provide backwards compatibility for the Gallery Block,
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
-		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
-		if ( ! str_contains( $content, $data_id_attribute ) ) {
-			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
-		}
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag( 'img' );
+		$processor->set_attribute( 'data-id', $attributes['data-id'] );
+		$content = $processor->get_updated_html();
 	}
 	return $content;
 }

package/src/image/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, get } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -64,7 +64,7 @@ export function getUpdatedLinkTargetSettings( value, { rel } ) {
  * @param {string} size  Selected size slug to apply.
  */
 export function getImageSizeAttributes( image, size ) {
-	const url = get( image, [ 'media_details', 'sizes', size, 'source_url' ] );
+	const url = image?.media_details?.sizes?.[ size ]?.source_url;
 
 	if ( url ) {
 		return { url, width: undefined, height: undefined, sizeSlug: size };

package/src/index.js

@@ -83,6 +83,7 @@ import * as postFeaturedImage from './post-featured-image';
 import * as postNavigationLink from './post-navigation-link';
 import * as postTemplate from './post-template';
 import * as postTerms from './post-terms';
+import * as postTimeToRead from './post-time-to-read';
 import * as postTitle from './post-title';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
@@ -197,6 +198,7 @@ const getAllBlocks = () =>
 		postTerms,
 		postNavigationLink,
 		postTemplate,
+		postTimeToRead,
 		queryPagination,
 		queryPaginationNext,
 		queryPaginationNumbers,

package/src/latest-comments/edit.js

@@ -41,6 +41,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }
 						onChange={ () =>
@@ -48,6 +49,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ () =>
@@ -55,6 +57,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ () =>

package/src/latest-posts/edit.js

@@ -247,6 +247,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Post meta settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display author name' ) }
 					checked={ displayAuthor }
 					onChange={ ( value ) =>
@@ -254,6 +255,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display post date' ) }
 					checked={ displayPostDate }
 					onChange={ ( value ) =>
@@ -264,6 +266,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Featured image settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display featured image' ) }
 					checked={ displayFeaturedImage }
 					onChange={ ( value ) =>
@@ -315,6 +318,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							/>
 						</BaseControl>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
 							checked={ addLinkToFeaturedImage }
 							onChange={ ( value ) =>

package/src/list/ordered-list-settings.js

@@ -25,6 +25,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				step="1"
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Reverse list numbering' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {

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

@@ -21,7 +21,7 @@ exports[`List block changes the indentation level 1`] = `
 `;
 
 exports[`List block changes to ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true} -->
+"<!-- wp:list {"ordered":true} -->
 <ol><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
@@ -37,7 +37,7 @@ exports[`List block changes to ordered list 1`] = `
 `;
 
 exports[`List block changes to reverse ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
+"<!-- wp:list {"ordered":true,"reversed":true} -->
 <ol reversed><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
@@ -73,8 +73,8 @@ exports[`List block removes the indentation level 1`] = `
 `;
 
 exports[`List block sets a start value to an ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
-<ol start=\\"25\\"><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"start":25} -->
+<ol start="25"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->