@wordpress/block-library 8.4.0 → 8.6.0

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

@@ -2,60 +2,60 @@
 
 exports[`Columns block adds a column block using the appender 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block changes the vertical alignment on individual Column 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"bottom\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-bottom\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"bottom"} -->
+<div class="wp-block-column is-vertically-aligned-bottom"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block changes vertical alignment on Columns 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block inserts block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block removes column with the remove button 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
@@ -67,153 +67,153 @@ exports[`Columns block removes the only one left Column with the remove button 1
 `;
 
 exports[`Columns block sets current vertical alignment on new Columns 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using columns percentage mechanism sets custom values correctly 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"90%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:90%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"90%"} -->
+<div class="wp-block-column" style="flex-basis:90%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"55.5%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:55.5%\\"></div>
+<!-- wp:column {"width":"55.5%"} -->
+<div class="wp-block-column" style="flex-basis:55.5%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using columns percentage mechanism updates the slider's input value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"55.6%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:55.6%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"55.6%"} -->
+<div class="wp-block-column" style="flex-basis:55.6%"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 25 / 50 / 25 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"25%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"25%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 33 / 33 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 66 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"33.33%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"66.66%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 50 / 50 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 66 / 33 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"66.66%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"33.33%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 100 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting adds a column block when incrementing the value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting reaches the minimum limit of number of column blocks 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting removes a column block when decrementing the value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Columns block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"className":"gutenberg-landing\\u002d\\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Columns block transforms unwraps content 1`] = `
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Columns';
+const initialHtml = `
+<!-- wp:columns {"className":"gutenberg-landing\u002d\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;
+
+const transformsWithInnerBlocks = [ 'Group' ];
+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 );
+	} );
+} );

package/src/columns/test/utils.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * Internal dependencies
  */
@@ -280,4 +285,53 @@ describe( 'getMappedColumnWidths', () => {
 			{ clientId: 'b', attributes: { width: '35%' } },
 		] );
 	} );
+
+	it( 'always returns new objects and does not mutate input blocks', () => {
+		const blocks = [
+			deepFreeze( { clientId: 'a', attributes: { width: 30 } } ),
+			deepFreeze( { clientId: 'b', attributes: { width: 40 } } ),
+		];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( blocks[ 0 ] ).not.toBe( result[ 0 ] );
+		expect( blocks[ 1 ] ).not.toBe( result[ 1 ] );
+	} );
+
+	it( 'merges to block attributes if original blocks do not have any attributes', () => {
+		const blocks = [ { clientId: 'a' }, { clientId: 'b' } ];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( result ).toEqual( [
+			{ clientId: 'a', attributes: { width: '25%' } },
+			{ clientId: 'b', attributes: { width: '35%' } },
+		] );
+	} );
+
+	it( 'merges to block attributes if original blocks do not have a width attribute', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { align: 'left' } },
+			{ clientId: 'b', attributes: { align: 'right' } },
+		];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( result ).toEqual( [
+			{ clientId: 'a', attributes: { align: 'left', width: '25%' } },
+			{ clientId: 'b', attributes: { align: 'right', width: '35%' } },
+		] );
+	} );
 } );

package/src/columns/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { merge, mapValues } from 'lodash';
+import { mapValues } from 'lodash';
 
 /**
  * Returns a column width attribute value rounded to standard precision.
@@ -121,13 +121,13 @@ export function hasExplicitPercentColumnWidths( blocks ) {
  * @return {WPBlock[]} blocks Mapped block objects.
  */
 export function getMappedColumnWidths( blocks, widths ) {
-	return blocks.map( ( block ) =>
-		merge( {}, block, {
-			attributes: {
-				width: `${ widths[ block.clientId ] }%`,
-			},
-		} )
-	);
+	return blocks.map( ( block ) => ( {
+		...block,
+		attributes: {
+			...block.attributes,
+			width: `${ widths[ block.clientId ] }%`,
+		},
+	} ) );
 }
 
 /**

package/src/comment-author-name/edit.js

@@ -72,12 +72,14 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Link settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to authors URL' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }
 				/>
 				{ isLink && (
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

package/src/comment-date/edit.js

@@ -48,6 +48,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to comment' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }

package/src/comment-edit-link/edit.js

@@ -39,6 +39,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Link settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {

package/src/comment-template/index.php

@@ -58,11 +58,10 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
 				--$comment_depth;
 			} else {
-				$inner_content  = block_core_comment_template_render_comments(
+				$block_content .= block_core_comment_template_render_comments(
 					$children,
 					$block
 				);
-				$block_content .= sprintf( $inner_content );
 			}
 		}
 

package/src/comments/edit/placeholder.js

@@ -5,6 +5,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,7 +46,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 						<footer className="comment-meta">
 							<div className="comment-author vcard">
 								<img
-									alt="Commenter Avatar"
+									alt={ __( 'Commenter Avatar' ) }
 									src={ avatarURL }
 									className="avatar avatar-32 photo"
 									height="32"
@@ -85,8 +86,17 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 									'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
 								) }
 								<br />
-								{ __( 'Commenter avatars come from' ) }{ ' ' }
-								<a href="https://gravatar.com/">Gravatar</a>.
+								{ createInterpolateElement(
+									__(
+										'Commenter avatars come from <a>Gravatar</a>.'
+									),
+									{
+										a: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a href="https://gravatar.com/" />
+										),
+									}
+								) }
 							</p>
 						</div>
 
@@ -94,7 +104,9 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 							<a
 								className="comment-reply-link"
 								href="#top"
-								aria-label="Reply to A WordPress Commenter"
+								aria-label={ __(
+									'Reply to A WordPress Commenter'
+								) }
 							>
 								{ __( 'Reply' ) }
 							</a>

package/src/comments-title/edit.js

@@ -110,6 +110,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
 					onChange={ ( value ) =>
@@ -117,6 +118,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show comments count' ) }
 					checked={ showCommentsCount }
 					onChange={ ( value ) =>