@wordpress/block-library 8.17.1 → 8.18.1-next.5a1d1283.0

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

@@ -4,14 +4,16 @@
 import {
 	act,
 	addBlock,
+	dismissModal,
 	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
+	openBlockActionsMenu,
 	openBlockSettings,
-	within,
-	getBlock,
-	dismissModal,
+	screen,
 	waitForModalVisible,
+	within,
 } from 'test/helpers';
 
 /**
@@ -43,7 +45,7 @@ afterAll( () => {
 
 describe( 'Columns block', () => {
 	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Columns' );
@@ -55,7 +57,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'adds a column block using the appender', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 
@@ -73,7 +75,7 @@ describe( 'Columns block', () => {
 
 	describe( 'when using the number of columns setting', () => {
 		it( 'adds a column block when incrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -95,7 +97,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'adds at least 15 Column blocks without limitation', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -120,7 +122,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'removes a column block when decrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -142,7 +144,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
-			const screen = await initializeEditor();
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -185,7 +187,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -210,7 +212,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes the only one left Column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -247,7 +249,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes vertical alignment on Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -270,7 +272,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes the vertical alignment on individual Column', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 
@@ -308,7 +310,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'sets current vertical alignment on new Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -337,7 +339,7 @@ describe( 'Columns block', () => {
 
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
-			const screen = await initializeEditor();
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -377,7 +379,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'sets custom values correctly', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText, getByTestId } = screen;
@@ -443,7 +445,7 @@ describe( 'Columns block', () => {
 		test.each( testData )(
 			'sets the predefined percentages for %s',
 			async ( layout ) => {
-				const screen = await initializeEditor();
+				await initializeEditor();
 
 				// Add block
 				await addBlock( screen, 'Columns' );
@@ -463,4 +465,32 @@ describe( 'Columns block', () => {
 			}
 		);
 	} );
+
+	it( 'transforms a nested Columns block into a Group block', async () => {
+		await initializeEditor( {
+			initialHtml: `<!-- wp:group {"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group"><!-- wp:columns -->
+			<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+			<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+			<p></p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:column --></div>
+			<!-- /wp:columns --></div>
+			<!-- /wp:group -->`,
+		} );
+
+		// Get Columns block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open block actions menu
+		await openBlockActionsMenu( screen );
+
+		// Tap on the Transform block button
+		fireEvent.press( screen.getByLabelText( /Transform block…/ ) );
+
+		// Tap on the Group transform button
+		fireEvent.press( screen.getByLabelText( 'Group' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/cover/edit/index.js

@@ -151,8 +151,10 @@ function CoverEdit( {
 	const setMedia = attributesFromMedia( setAttributes, dimRatio );
 
 	const onSelectMedia = async ( newMedia ) => {
+		// Only pass the url to getCoverIsDark if the media is an image as video is not handled.
+		const newUrl = newMedia?.type === 'image' ? newMedia.url : undefined;
 		const isDarkSetting = await getCoverIsDark(
-			newMedia.url,
+			newUrl,
 			dimRatio,
 			overlayColor.color
 		);

package/src/cover/shared.js

@@ -167,26 +167,31 @@ export async function getCoverIsDark( url, dimRatio = 50, overlayColor ) {
 		.toRgb();
 
 	if ( url ) {
-		const imgCrossOrigin = applyFilters(
-			'media.crossOrigin',
-			undefined,
-			url
-		);
-		const {
-			value: [ r, g, b, a ],
-		} = await retrieveFastAverageColor().getColorAsync( url, {
-			// Previously the default color was white, but that changed
-			// in v6.0.0 so it has to be manually set now.
-			defaultColor: [ 255, 255, 255, 255 ],
-			// Errors that come up don't reject the promise, so error
-			// logging has to be silenced with this option.
-			silent: process.env.NODE_ENV === 'production',
-			crossOrigin: imgCrossOrigin,
-		} );
-		// FAC uses 0-255 for alpha, but colord expects 0-1.
-		const media = { r, g, b, a: a / 255 };
-		const composite = compositeSourceOver( overlay, media );
-		return colord( composite ).isDark();
+		try {
+			const imgCrossOrigin = applyFilters(
+				'media.crossOrigin',
+				undefined,
+				url
+			);
+			const {
+				value: [ r, g, b, a ],
+			} = await retrieveFastAverageColor().getColorAsync( url, {
+				// Previously the default color was white, but that changed
+				// in v6.0.0 so it has to be manually set now.
+				defaultColor: [ 255, 255, 255, 255 ],
+				// Errors that come up don't reject the promise, so error
+				// logging has to be silenced with this option.
+				silent: process.env.NODE_ENV === 'production',
+				crossOrigin: imgCrossOrigin,
+			} );
+			// FAC uses 0-255 for alpha, but colord expects 0-1.
+			const media = { r, g, b, a: a / 255 };
+			const composite = compositeSourceOver( overlay, media );
+			return colord( composite ).isDark();
+		} catch ( error ) {
+			// If there's an error, just assume the image is dark.
+			return true;
+		}
 	}
 
 	// Assume a white background because it isn't easy to get the actual

package/src/cover/test/edit.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image, Pressable } from 'react-native';
+import { Image } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
@@ -12,7 +12,6 @@ import {
 	getBlock,
 	openBlockSettings,
 } from 'test/helpers';
-import HsvColorPicker from 'react-native-hsv-color-picker';
 
 /**
  * WordPress dependencies
@@ -541,9 +540,6 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'displays the hex color value in the custom color picker', async () => {
-		HsvColorPicker.mockImplementation( ( props ) => {
-			return <Pressable { ...props } testID="hsv-color-picker" />;
-		} );
 		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );

package/src/embed/embed-link-settings.native.js

@@ -90,7 +90,6 @@ const EmbedLinkSettings = ( {
 			onDismiss={ onDismiss }
 			setAttributes={ onSetAttributes }
 			options={ linkSettingsOptions }
-			testID="embed-edit-url-modal"
 			withBottomSheet={ withBottomSheet }
 			showIcon
 		/>

package/src/embed/test/index.native.js

@@ -241,7 +241,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -259,7 +259,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -299,7 +299,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -338,7 +338,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -359,7 +359,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -400,7 +400,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -584,7 +584,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -623,7 +623,7 @@ describe( 'Embed block', () => {
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			await waitForModalVisible( embedEditURLModal );
 
@@ -804,7 +804,7 @@ describe( 'Embed block', () => {
 
 			// Dismiss the edit URL modal.
 			const embedEditURLModal = editor.getByTestId(
-				'embed-edit-url-modal'
+				'link-settings-navigation'
 			);
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );