@wordpress/block-library 8.5.0 → 8.7.0

package/src/cover/test/edit.js

@@ -0,0 +1,324 @@
+/**
+ * External dependencies
+ */
+import { screen, fireEvent, act, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import {
+	initializeEditor,
+	selectBlock,
+} from 'test/integration/helpers/integration-test-editor';
+
+async function setup( attributes ) {
+	const testBlock = { name: 'core/cover', attributes };
+	return initializeEditor( testBlock );
+}
+
+async function createAndSelectBlock() {
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Color: Black',
+		} )
+	);
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Select Cover',
+		} )
+	);
+}
+
+describe( 'Cover block', () => {
+	describe( 'Editor canvas', () => {
+		test( 'shows placeholder if background image and color not set', async () => {
+			await setup();
+
+			expect(
+				screen.getByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		test( 'can set overlay color using color picker on block placeholder', async () => {
+			const { container } = await setup();
+			const colorPicker = screen.getByRole( 'button', {
+				name: 'Color: Black',
+			} );
+			await userEvent.click( colorPicker );
+			const color = colorPicker.style.backgroundColor;
+			expect(
+				screen.queryByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).not.toBeInTheDocument();
+
+			// eslint-disable-next-line testing-library/no-node-access
+			const overlay = container.getElementsByClassName(
+				'wp-block-cover__background'
+			);
+			expect( overlay[ 0 ] ).toHaveStyle(
+				`background-color: ${ color }`
+			);
+		} );
+
+		test( 'can have the title edited', async () => {
+			await setup();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Color: Black',
+				} )
+			);
+
+			const title = screen.getByLabelText( 'Empty block;', {
+				exact: false,
+			} );
+			await userEvent.click( title );
+			await userEvent.keyboard( 'abc' );
+			expect( title ).toHaveTextContent( 'abc' );
+		} );
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
+				'min-height: 100vh;'
+			);
+
+			await userEvent.click(
+				screen.getByLabelText( 'Toggle full height' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+				'min-height: 100vh;'
+			);
+		} );
+
+		test( 'content position button sets content position', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			await userEvent.click(
+				screen.getByLabelText( 'Change content position' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-custom-content-position'
+			);
+
+			await act( async () =>
+				within( screen.getByRole( 'grid' ) )
+					.getByRole( 'gridcell', {
+						name: 'top left',
+					} )
+					.focus()
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-custom-content-position'
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-position-top-left'
+			);
+		} );
+	} );
+
+	describe( 'Inspector controls', () => {
+		describe( 'Media settings', () => {
+			test( 'does not display media settings panel if url is not set', async () => {
+				await setup();
+				expect(
+					screen.queryByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).not.toBeInTheDocument();
+			} );
+			test( 'displays media settings panel if url is set', async () => {
+				await setup( {
+					url: 'http://localhost/my-image.jpg',
+				} );
+
+				await selectBlock( 'Block: Cover' );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).toBeInTheDocument();
+			} );
+		} );
+
+		test( 'sets hasParallax attribute to true if fixed background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-parallax'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Fixed background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-parallax'
+			);
+		} );
+
+		test( 'sets isRepeated attribute to true if repeated background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'is-repeated'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Repeated background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-repeated'
+			);
+		} );
+
+		test( 'sets left focalPoint attribute when focal point values changed', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toHaveStyle( 'object-position: 100% 50%;' );
+		} );
+
+		test( 'sets alt attribute if text entered in alt text box', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.type(
+				screen.getByLabelText( 'Alt text (alternative text)' ),
+				'Me'
+			);
+			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
+		} );
+
+		test( 'clears media  when clear media button clicked', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toBeInTheDocument();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Clear Media',
+				} )
+			);
+			expect(
+				within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+					'img'
+				)
+			).not.toBeInTheDocument();
+		} );
+
+		describe( 'Color panel', () => {
+			test( 'applies selected opacity to block when number control value changed', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'spinbutton', {
+						name: 'Overlay opacity',
+					} ),
+					{
+						target: { value: '40' },
+					}
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
+			} );
+
+			test( 'applies selected opacity to block when slider moved', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'slider', {
+						name: 'Overlay opacity',
+					} ),
+					{ target: { value: 30 } }
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
+			} );
+		} );
+
+		describe( 'Dimensions panel', () => {
+			test( 'sets minHeight attribute when number control value changed', async () => {
+				await setup();
+				await createAndSelectBlock();
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+				await userEvent.clear(
+					screen.getByLabelText( 'Minimum height of cover' )
+				);
+				await userEvent.type(
+					screen.getByLabelText( 'Minimum height of cover' ),
+					'300'
+				);
+
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+					'min-height: 300px;'
+				);
+			} );
+		} );
+	} );
+} );

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

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Cover';
+const initialHtmlWithImage = `
+<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+const initialHtmlWithVideo = `
+<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransformsWithImage = [
+	'Image',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+const blockTransformsWithVideo = [
+	'Video',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	describe( 'with Image', () => {
+		test.each( blockTransformsWithImage )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithImage,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithImage,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithImage.length
+			);
+		} );
+	} );
+
+	describe( 'with Video', () => {
+		test.each( blockTransformsWithVideo )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithVideo,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithVideo,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithVideo.length
+			);
+		} );
+	} );
+} );

package/src/cover/variations.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cover } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'cover',
+		title: __( 'Cover' ),
+		description: __(
+			'Add an image or video with a text overlay — great for headers.'
+		),
+		attributes: { layout: { type: 'constrained' } },
+		isDefault: true,
+		icon: cover,
+	},
+];
+
+export default variations;

package/src/embed/edit.js

@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -99,16 +100,14 @@ const EmbedEdit = ( props ) => {
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -136,21 +135,20 @@ const EmbedEdit = ( props ) => {
 		setURL( newURL );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, attributesUrl ] );
+	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,8 +186,14 @@ const EmbedEdit = ( props ) => {
 							event.preventDefault();
 						}
 
+						// If the embed URL was changed, we need to reset the aspect ratio class.
+						// To do this we have to remove the existing ratio class so it can be recalculated.
+						const blockClass = removeAspectRatioClasses(
+							attributes.className
+						);
+
 						setIsEditingURL( false );
-						setAttributes( { url } );
+						setAttributes( { url, className: blockClass } );
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }

package/src/embed/edit.native.js

@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -123,16 +124,14 @@ const EmbedEdit = ( props ) => {
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -159,21 +158,20 @@ const EmbedEdit = ( props ) => {
 		const newURL = url.replace( /\/$/, '' );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, url ] );
+	}, [ preview?.html, url, cannotEmbed, fetching ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,13 +186,25 @@ const EmbedEdit = ( props ) => {
 		[ isEditingURL ]
 	);
 
-	const onEditURL = useCallback( ( value ) => {
-		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-		// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-		// for creating the new block.
-		setAttributes( { url: value } );
-		setIsEditingURL( false );
-	}, [] );
+	const onEditURL = useCallback(
+		( value ) => {
+			// If the embed URL was changed, we need to reset the aspect ratio class.
+			// To do this we have to remove the existing ratio class so it can be recalculated.
+			if ( attributes.url !== value ) {
+				const blockClass = removeAspectRatioClasses(
+					attributes.className
+				);
+				setAttributes( { className: blockClass } );
+			}
+
+			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+			// for creating the new block.
+			setAttributes( { url: value } );
+			setIsEditingURL( false );
+		},
+		[ attributes, setAttributes ]
+	);
 
 	const blockProps = useBlockProps();
 

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Embed block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Embed block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:group -->"
+`;

package/src/embed/test/index.js

@@ -17,6 +17,7 @@ import {
 	createUpgradedEmbedBlock,
 	getEmbedInfoByProvider,
 	removeAspectRatioClasses,
+	hasAspectRatioClass,
 } from '../util';
 import { embedInstagramIcon } from '../icons';
 import variations from '../variations';
@@ -101,6 +102,17 @@ describe( 'utils', () => {
 			).toEqual( expected );
 		} );
 	} );
+	describe( 'hasAspectRatioClass', () => {
+		it( 'should return false if an aspect ratio class does not exist', () => {
+			const existingClassNames = 'wp-block-embed is-type-video';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( false );
+		} );
+		it( 'should return true if an aspect ratio class exists', () => {
+			const existingClassNames =
+				'wp-block-embed is-type-video wp-embed-aspect-16-9 wp-has-aspect-ratio';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( true );
+		} );
+	} );
 	describe( 'removeAspectRatioClasses', () => {
 		it( 'should return the same falsy value as received', () => {
 			const existingClassNames = undefined;