@wordpress/block-library 8.4.0 → 8.5.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/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/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 ) =>

package/src/cover/edit/inspector-controls.js

@@ -171,12 +171,14 @@ export default function CoverInspectorControls( {
 						{ isImageBackground && (
 							<>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
 									onChange={ toggleParallax }
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Repeated background' ) }
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }

package/src/cover/index.php

@@ -56,12 +56,10 @@ function render_block_core_cover( $attributes, $content ) {
 			$styles .= $height;
 		}
 
-		$content = preg_replace(
-			'/class=\".*?\"/',
-			'${0} style="' . $styles . '"',
-			$content,
-			1
-		);
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'style', $styles );
+		$content = $processor->get_updated_html();
 	}
 
 	return $content;