@wordpress/block-library 8.3.6 → 8.5.0

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

@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Buttons block justify content sets Justify items center option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"center\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items left option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"left\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items right option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"right\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button /-->
 
 <!-- wp:button /--></div>
 <!-- /wp:buttons -->
@@ -32,18 +32,18 @@ exports[`Buttons block when a button is shown adds another button using the inli
 
 exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button /-->
 
 <!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Hello!</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="" style="border-radius:6px">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

package/src/calendar/block.json

@@ -17,6 +17,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"color": {
 			"link": true,
 			"__experimentalSkipSerialization": [ "text", "background" ],

package/src/categories/block.json

@@ -30,6 +30,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/categories/edit.js

@@ -143,27 +143,32 @@ export default function CategoriesEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show only top level categories' ) }
 						checked={ showOnlyTopLevel }
 						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show empty categories' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
 					{ ! showOnlyTopLevel && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
 							checked={ showHierarchy }
 							onChange={ toggleAttribute( 'showHierarchy' ) }

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

@@ -2,12 +2,12 @@
 
 exports[`Code renders given text without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<pre class="wp-block-code"><code>Sample text</code></pre>
 <!-- /wp:code -->"
 `;
 
 exports[`Code renders without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code></code></pre>
+<pre class="wp-block-code"><code></code></pre>
 <!-- /wp:code -->"
 `;

package/src/columns/edit.js

@@ -110,6 +110,7 @@ function ColumnsEditContainer( {
 						</Notice>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Stack on mobile' ) }
 						checked={ isStackedOnMobile }
 						onChange={ () =>

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/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-avatar/block.json

@@ -20,6 +20,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"inserter": false,
 		"__experimentalBorder": {

package/src/comment-author-name/block.json

@@ -22,6 +22,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

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-content/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-date/block.json

@@ -18,6 +18,7 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

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/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

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-reply-link/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-template/block.json

@@ -10,6 +10,7 @@
 	"usesContext": [ "postId" ],
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"reusable": false,
 		"spacing": {

package/src/comments/block.json

@@ -18,6 +18,8 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
+		"html": false,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -27,7 +29,6 @@
 				"link": true
 			}
 		},
-		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/comments-pagination/block.json

@@ -17,6 +17,7 @@
 		"comments/paginationArrow": "paginationArrow"
 	},
 	"supports": {
+		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,

package/src/comments-pagination-next/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {