@wordpress/block-library 7.17.0 → 7.19.0

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

@@ -147,17 +147,17 @@ const insertEmbedBlock = async ( blockTitle = 'Embed' ) => {
 	const editor = await initializeEditor( {
 		initialHtml: '',
 	} );
-	const { getByA11yLabel, getByText } = editor;
+	const { getByLabelText, getByText } = editor;
 
 	// Open inserter menu.
-	fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+	fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
 
 	// Insert embed block.
 	fireEvent.press( await waitFor( () => getByText( blockTitle ) ) );
 
 	// Return the embed block.
 	const block = await waitFor( () =>
-		getByA11yLabel( /Embed Block\. Row 1/ )
+		getByLabelText( /Embed Block\. Row 1/ )
 	);
 
 	return { ...editor, block };
@@ -165,10 +165,10 @@ const insertEmbedBlock = async ( blockTitle = 'Embed' ) => {
 
 const initializeWithEmbedBlock = async ( initialHtml, selectBlock = true ) => {
 	const editor = await initializeEditor( { initialHtml } );
-	const { getByA11yLabel } = editor;
+	const { getByLabelText } = editor;
 
 	const block = await waitFor( () =>
-		getByA11yLabel( /Embed Block\. Row 1/ )
+		getByLabelText( /Embed Block\. Row 1/ )
 	);
 
 	if ( selectBlock ) {
@@ -270,7 +270,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -303,7 +303,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter link, ${ clipboardURL }` );
 
 			expect( autopastedLinkField ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -361,7 +361,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -397,7 +397,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter link, ${ clipboardURL }` );
 
 			expect( embedLink ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -409,12 +409,12 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const { getByA11yLabel, getByTestId } =
+			const { getByLabelText, getByTestId } =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Wait for Block Settings to be visible.
@@ -432,12 +432,12 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const { getByA11yLabel, getByDisplayValue, getByTestId } =
+			const { getByLabelText, getByDisplayValue, getByTestId } =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Wait for Block Settings to be visible.
@@ -446,7 +446,7 @@ describe( 'Embed block', () => {
 
 			// Start editing link.
 			fireEvent.press(
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`Twitter link, ${ initialURL }`
 				)
 			);
@@ -462,7 +462,7 @@ describe( 'Embed block', () => {
 
 			// Get YouTube link field.
 			const youtubeLinkField = await waitFor( () =>
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`YouTube link, ${ expectedURL }`
 				)
 			);
@@ -476,7 +476,7 @@ describe( 'Embed block', () => {
 			const invalidURL = 'http://';
 
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByDisplayValue,
 				getByTestId,
 				getByText,
@@ -484,7 +484,7 @@ describe( 'Embed block', () => {
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Wait for Block Settings to be visible.
@@ -493,7 +493,7 @@ describe( 'Embed block', () => {
 
 			// Start editing link.
 			fireEvent.press(
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`Twitter link, ${ previousURL }`
 				)
 			);
@@ -519,7 +519,7 @@ describe( 'Embed block', () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByDisplayValue,
 				getByTestId,
 				getByPlaceholderText,
@@ -527,7 +527,7 @@ describe( 'Embed block', () => {
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Get Block Settings modal.
@@ -535,7 +535,7 @@ describe( 'Embed block', () => {
 
 			// Start editing link.
 			fireEvent.press(
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`Twitter link, ${ previousURL }`
 				)
 			);
@@ -600,7 +600,7 @@ describe( 'Embed block', () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByDisplayValue,
 				getByPlaceholderText,
 				getByTestId,
@@ -621,7 +621,7 @@ describe( 'Embed block', () => {
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Wait for Block Settings to be visible.
@@ -630,7 +630,7 @@ describe( 'Embed block', () => {
 
 			// Start editing link.
 			fireEvent.press(
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`Embed link, ${ badURL }`
 				)
 			);
@@ -646,7 +646,7 @@ describe( 'Embed block', () => {
 
 			// Get Twitter link field.
 			const twitterLinkField = await waitFor( () =>
-				within( blockSettingsModal ).getByA11yLabel(
+				within( blockSettingsModal ).getByLabelText(
 					`Twitter link, ${ expectedURL }`
 				)
 			);
@@ -665,12 +665,12 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const { getByA11yLabel, getByText } =
+				const { getByLabelText, getByText } =
 					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press(
-					await waitFor( () => getByA11yLabel( 'Align' ) )
+					await waitFor( () => getByLabelText( 'Align' ) )
 				);
 
 				// Select alignment option.
@@ -721,7 +721,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -739,7 +739,7 @@ describe( 'Embed block', () => {
 				);
 			} );
 
-			const { getByA11yLabel, getByText } =
+			const { getByLabelText, getByText } =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
@@ -748,7 +748,7 @@ describe( 'Embed block', () => {
 
 			// Get paragraph block where the link is created.
 			const paragraphBlock = await waitFor( () =>
-				getByA11yLabel( /Paragraph Block\. Row 1/ )
+				getByLabelText( /Paragraph Block\. Row 1/ )
 			);
 
 			expect( paragraphBlock ).toBeDefined();
@@ -780,7 +780,7 @@ describe( 'Embed block', () => {
 			} );
 
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByText,
 				getByTestId,
 				getByDisplayValue,
@@ -790,7 +790,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( getByText( 'Edit link' ) );
 
 			// Start editing link.
-			fireEvent.press( getByA11yLabel( `WordPress link, ${ failURL }` ) );
+			fireEvent.press( getByLabelText( `WordPress link, ${ failURL }` ) );
 
 			// Set an URL.
 			const linkTextInput = getByDisplayValue( failURL );
@@ -808,7 +808,7 @@ describe( 'Embed block', () => {
 			// Get Twitter link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByA11yLabel( `Twitter link, ${ successURL }` );
+			).getByLabelText( `Twitter link, ${ successURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -865,7 +865,7 @@ describe( 'Embed block', () => {
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByPlaceholderText,
 				getByTestId,
 				getByText,
@@ -897,7 +897,7 @@ describe( 'Embed block', () => {
 
 			// Get the created embed block.
 			const embedBlock = await waitFor( () =>
-				getByA11yLabel( /Embed Block\. Row 1/ )
+				getByLabelText( /Embed Block\. Row 1/ )
 			);
 
 			expect( embedBlock ).toBeDefined();
@@ -953,7 +953,7 @@ describe( 'Embed block', () => {
 	describe( 'insert via slash inserter', () => {
 		it( 'insert generic embed block', async () => {
 			const embedBlockSlashInserter = '/Embed';
-			const { getByPlaceholderText, getByA11yLabel, getByText } =
+			const { getByPlaceholderText, getByLabelText, getByText } =
 				await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
 
 			const paragraphText = getByPlaceholderText( 'Start writing…' );
@@ -980,7 +980,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( await waitFor( () => getByText( 'Embed' ) ) );
 
 			const block = await waitFor( () =>
-				getByA11yLabel( /Embed Block\. Row 1/ )
+				getByLabelText( /Embed Block\. Row 1/ )
 			);
 
 			const blockName = within( block ).getByText( 'Embed' );
@@ -992,7 +992,7 @@ describe( 'Embed block', () => {
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
 			it( `inserts ${ title } embed block`, async () => {
 				const embedBlockSlashInserter = `/${ title }`;
-				const { getByPlaceholderText, getByA11yLabel, getByText } =
+				const { getByPlaceholderText, getByLabelText, getByText } =
 					await initializeEditor( {
 						initialHtml: EMPTY_PARAGRAPH_HTML,
 					} );
@@ -1021,7 +1021,7 @@ describe( 'Embed block', () => {
 				fireEvent.press( await waitFor( () => getByText( title ) ) );
 
 				const block = await waitFor( () =>
-					getByA11yLabel( /Embed Block\. Row 1/ )
+					getByLabelText( /Embed Block\. Row 1/ )
 				);
 
 				const blockName = within( block ).getByText( title );
@@ -1080,12 +1080,12 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const { getByA11yLabel, getByText } =
+			const { getByLabelText, getByText } =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Untoggle resize for smaller devices.
@@ -1097,12 +1097,12 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const { getByA11yLabel, getByText } =
+			const { getByLabelText, getByText } =
 				await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
-				await waitFor( () => getByA11yLabel( 'Open Settings' ) )
+				await waitFor( () => getByLabelText( 'Open Settings' ) )
 			);
 
 			// Wait for media settings panel.

package/src/file/deprecated.js

@@ -14,7 +14,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 
 // Version of the file block without PR#43050 removing the translated aria-label.
-const v2 = {
+const v3 = {
 	attributes: {
 		id: {
 			type: 'number',
@@ -143,6 +143,134 @@ const v2 = {
 	},
 };
 
+// In #41239 the button was made an element button which added a `wp-element-button` classname
+// to the download link element.
+const v2 = {
+	attributes: {
+		id: {
+			type: 'number',
+		},
+		href: {
+			type: 'string',
+		},
+		fileId: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'id',
+		},
+		fileName: {
+			type: 'string',
+			source: 'html',
+			selector: 'a:not([download])',
+		},
+		textLinkHref: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'href',
+		},
+		textLinkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'target',
+		},
+		showDownloadButton: {
+			type: 'boolean',
+			default: true,
+		},
+		downloadButtonText: {
+			type: 'string',
+			source: 'html',
+			selector: 'a[download]',
+		},
+		displayPreview: {
+			type: 'boolean',
+		},
+		previewHeight: {
+			type: 'number',
+			default: 600,
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+	},
+	save( { attributes } ) {
+		const {
+			href,
+			fileId,
+			fileName,
+			textLinkHref,
+			textLinkTarget,
+			showDownloadButton,
+			downloadButtonText,
+			displayPreview,
+			previewHeight,
+		} = attributes;
+
+		const pdfEmbedLabel = RichText.isEmpty( fileName )
+			? __( 'PDF embed' )
+			: sprintf(
+					/* translators: %s: filename. */
+					__( 'Embed of %s.' ),
+					fileName
+			  );
+
+		const hasFilename = ! RichText.isEmpty( fileName );
+
+		// Only output an `aria-describedby` when the element it's referring to is
+		// actually rendered.
+		const describedById = hasFilename ? fileId : undefined;
+
+		return (
+			href && (
+				<div { ...useBlockProps.save() }>
+					{ displayPreview && (
+						<>
+							<object
+								className="wp-block-file__embed"
+								data={ href }
+								type="application/pdf"
+								style={ {
+									width: '100%',
+									height: `${ previewHeight }px`,
+								} }
+								aria-label={ pdfEmbedLabel }
+							/>
+						</>
+					) }
+					{ hasFilename && (
+						<a
+							id={ describedById }
+							href={ textLinkHref }
+							target={ textLinkTarget }
+							rel={
+								textLinkTarget
+									? 'noreferrer noopener'
+									: undefined
+							}
+						>
+							<RichText.Content value={ fileName } />
+						</a>
+					) }
+					{ showDownloadButton && (
+						<a
+							href={ href }
+							className="wp-block-file__button"
+							download={ true }
+							aria-describedby={ describedById }
+						>
+							<RichText.Content value={ downloadButtonText } />
+						</a>
+					) }
+				</div>
+			)
+		);
+	},
+};
+
 // Version of the file block without PR#28062 accessibility fix.
 const v1 = {
 	attributes: {
@@ -255,6 +383,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v2, v1 ];
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;

package/src/file/transforms.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -92,7 +87,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'audio' );
+				return !! media && media.mime_type.includes( 'audio' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/audio', {
@@ -112,7 +107,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'video' );
+				return !! media && media.mime_type.includes( 'video' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/video', {
@@ -132,7 +127,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'image' );
+				return !! media && media.mime_type.includes( 'image' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/image', {

package/src/gallery/deprecated.js

@@ -2,12 +2,16 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, some } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 import { createBlock } from '@wordpress/blocks';
 
@@ -127,6 +131,127 @@ export function getImageBlock( image, sizeSlug, linkTo ) {
 	} );
 }
 
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the gallery figcaption element.
+const v7 = {
+	attributes: {
+		images: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: '.blocks-gallery-item',
+			query: {
+				url: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'src',
+				},
+				fullUrl: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-full-url',
+				},
+				link: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-link',
+				},
+				alt: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'alt',
+					default: '',
+				},
+				id: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-id',
+				},
+				caption: {
+					type: 'string',
+					source: 'html',
+					selector: '.blocks-gallery-item__caption',
+				},
+			},
+		},
+		ids: {
+			type: 'array',
+			items: {
+				type: 'number',
+			},
+			default: [],
+		},
+		shortCodeTransforms: {
+			type: 'array',
+			default: [],
+			items: {
+				type: 'object',
+			},
+		},
+		columns: {
+			type: 'number',
+			minimum: 1,
+			maximum: 8,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: '.blocks-gallery-caption',
+		},
+		imageCrop: {
+			type: 'boolean',
+			default: true,
+		},
+		fixedHeight: {
+			type: 'boolean',
+			default: true,
+		},
+		linkTarget: {
+			type: 'string',
+		},
+		linkTo: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+			default: 'large',
+		},
+		allowResize: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	save( { attributes } ) {
+		const { caption, columns, imageCrop } = attributes;
+
+		const className = classnames( 'has-nested-images', {
+			[ `columns-${ columns }` ]: columns !== undefined,
+			[ `columns-default` ]: columns === undefined,
+			'is-cropped': imageCrop,
+		} );
+		const blockProps = useBlockProps.save( { className } );
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+		return (
+			<figure { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						tagName="figcaption"
+						className="blocks-gallery-caption"
+						value={ caption }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 const v6 = {
 	attributes: {
 		images: {
@@ -803,7 +928,7 @@ const v2 = {
 			images.length > 0 &&
 			( ( ! ids && images ) ||
 				( ids && images && ids.length !== images.length ) ||
-				some( images, ( id, index ) => {
+				images.some( ( id, index ) => {
 					if ( ! id && ids[ index ] !== null ) {
 						return true;
 					}
@@ -984,4 +1109,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];