@wordpress/block-library 7.18.0 → 8.0.0

package/src/media-text/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, filter } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( {
 			mediaWidth: applyWidthConstraints( width ),
 		} );
-		setTemporaryMediaWidth( applyWidthConstraints( width ) );
+		setTemporaryMediaWidth( null );
 	};
 
 	const classNames = classnames( {
@@ -226,7 +226,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	};
 
 	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
+		imageSizes.filter( ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
@@ -268,6 +268,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ imageFill && mediaUrl && mediaType === 'image' && (
 				<FocalPointPicker
+					__nextHasNoMarginBottom
 					label={ __( 'Focal point picker' ) }
 					url={ mediaUrl }
 					value={ focalPoint }
@@ -306,6 +307,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaUrl && (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
 					onChange={ commitWidthChange }

package/src/missing/test/edit-integration.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent, waitFor, within } from 'test/helpers';
+import { initializeEditor, fireEvent, within } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -40,12 +40,12 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 			 <!-- /wp:table -->`;
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+		const [ missingBlock ] = await screen.findAllByLabelText(
+			/Unsupported Block\. Row 1/
 		);
 
 		const translatedTableTitle =
@@ -58,24 +58,22 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 		 <!-- /wp:table -->`;
-		const { getByA11yLabel, getByText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+		const [ missingBlock ] = await screen.findAllByLabelText(
+			/Unsupported Block\. Row 1/
 		);
 
 		fireEvent.press( missingBlock );
 
-		const helpButton = await waitFor( () =>
-			getByA11yLabel( 'Help button' )
-		);
+		const [ helpButton ] = await screen.findAllByLabelText( 'Help button' );
 
 		fireEvent.press( helpButton );
 
-		const bottomSheetTitle = await waitFor( () =>
-			getByText( '«Tabla» no es totalmente compatible' )
+		const bottomSheetTitle = await screen.findByText(
+			'«Tabla» no es totalmente compatible'
 		);
 
 		expect( bottomSheetTitle ).toBeDefined();

package/src/navigation/edit/are-blocks-dirty.js

@@ -0,0 +1,51 @@
+export function areBlocksDirty( originalBlocks, blocks ) {
+	return ! isDeepEqual( originalBlocks, blocks, ( prop, x ) => {
+		// Skip inner blocks of page list during comparison as they
+		// are **always** controlled and may be updated async due to
+		// syncing with entity records. Left unchecked this would
+		// inadvertently trigger the dirty state.
+		if ( x?.name === 'core/page-list' && prop === 'innerBlocks' ) {
+			return true;
+		}
+	} );
+}
+
+/**
+ * Conditionally compares two candidates for deep equality.
+ * Provides an option to skip a given property of an object during comparison.
+ *
+ * @param {*}                  x          1st candidate for comparison
+ * @param {*}                  y          2nd candidate for comparison
+ * @param {Function|undefined} shouldSkip a function which can be used to skip a given property of an object.
+ * @return {boolean}                      whether the two candidates are deeply equal.
+ */
+const isDeepEqual = ( x, y, shouldSkip ) => {
+	if ( x === y ) {
+		return true;
+	} else if (
+		typeof x === 'object' &&
+		x !== null &&
+		x !== undefined &&
+		typeof y === 'object' &&
+		y !== null &&
+		y !== undefined
+	) {
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) return false;
+
+		for ( const prop in x ) {
+			if ( y.hasOwnProperty( prop ) ) {
+				// Afford skipping a given property of an object.
+				if ( shouldSkip && shouldSkip( prop, x ) ) {
+					return true;
+				}
+
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) )
+					return false;
+			} else return false;
+		}
+
+		return true;
+	}
+
+	return false;
+};