@wordpress/block-library 7.17.0 → 7.19.0

package/build-style/theme.css

@@ -207,7 +207,7 @@
 }
 
 .wp-block-table {
-  margin: "0 0 1em 0";
+  margin: 0 0 1em 0;
 }
 .wp-block-table thead {
   border-bottom: 3px solid;
@@ -217,8 +217,6 @@
 }
 .wp-block-table td,
 .wp-block-table th {
-  padding: 0.5em;
-  border: 1px solid;
   word-break: normal;
 }
 .wp-block-table figcaption {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.17.0",
+	"version": "7.19.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.20.0",
-		"@wordpress/api-fetch": "^6.17.0",
-		"@wordpress/autop": "^3.20.0",
-		"@wordpress/blob": "^3.20.0",
-		"@wordpress/block-editor": "^10.3.0",
-		"@wordpress/blocks": "^11.19.0",
-		"@wordpress/components": "^21.3.0",
-		"@wordpress/compose": "^5.18.0",
-		"@wordpress/core-data": "^5.3.0",
-		"@wordpress/data": "^7.4.0",
-		"@wordpress/date": "^4.20.0",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/dom": "^3.20.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/hooks": "^3.20.0",
-		"@wordpress/html-entities": "^3.20.0",
-		"@wordpress/i18n": "^4.20.0",
-		"@wordpress/icons": "^9.11.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/notices": "^3.20.0",
-		"@wordpress/primitives": "^3.18.0",
-		"@wordpress/reusable-blocks": "^3.18.0",
-		"@wordpress/rich-text": "^5.18.0",
-		"@wordpress/server-side-render": "^3.18.0",
-		"@wordpress/url": "^3.21.0",
-		"@wordpress/viewport": "^4.18.0",
+		"@wordpress/a11y": "^3.22.0",
+		"@wordpress/api-fetch": "^6.19.0",
+		"@wordpress/autop": "^3.22.0",
+		"@wordpress/blob": "^3.22.0",
+		"@wordpress/block-editor": "^10.5.0",
+		"@wordpress/blocks": "^11.21.0",
+		"@wordpress/components": "^22.1.0",
+		"@wordpress/compose": "^5.20.0",
+		"@wordpress/core-data": "^5.5.0",
+		"@wordpress/data": "^7.6.0",
+		"@wordpress/date": "^4.22.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/dom": "^3.22.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/hooks": "^3.22.0",
+		"@wordpress/html-entities": "^3.22.0",
+		"@wordpress/i18n": "^4.22.0",
+		"@wordpress/icons": "^9.13.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/notices": "^3.22.0",
+		"@wordpress/primitives": "^3.20.0",
+		"@wordpress/reusable-blocks": "^3.20.0",
+		"@wordpress/rich-text": "^5.20.0",
+		"@wordpress/server-side-render": "^3.20.0",
+		"@wordpress/url": "^3.23.0",
+		"@wordpress/viewport": "^4.20.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -73,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/audio/edit.js

@@ -13,6 +13,7 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -25,12 +26,13 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon } from '@wordpress/icons';
+import { audio as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -48,6 +50,8 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -69,6 +73,30 @@ function AudioEdit( {
 		}
 	}, [] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -106,12 +134,20 @@ function AudioEdit( {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error and we should continue in the editing state
 			// previous attributes should be removed because they may be temporary blob urls.
-			setAttributes( { src: undefined, id: undefined } );
+			setAttributes( {
+				src: undefined,
+				id: undefined,
+				caption: undefined,
+			} );
 			return;
 		}
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
-		setAttributes( { src: media.url, id: media.id } );
+		setAttributes( {
+			src: media.url,
+			id: media.id,
+			caption: media.caption,
+		} );
 	}
 
 	const classes = classnames( className, {
@@ -140,6 +176,23 @@ function AudioEdit( {
 
 	return (
 		<>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
@@ -195,26 +248,28 @@ function AudioEdit( {
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Audio caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							ref={ captionRef }
+							aria-label={ __( 'Audio caption text' ) }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

package/src/avatar/index.php

@@ -100,7 +100,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 				$label = 'aria-label="' . sprintf( esc_attr__( '(%s author archive, opens in a new tab)' ), $author_name ) . '"';
 			}
 			// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
-			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( get_author_posts_url( $author_id ) ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 		}
 		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 	}

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

@@ -78,14 +78,14 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml: '',
 				capabilities: { reusableBlock: true },
 			} );
 
 		// Open the inserter menu.
-		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+		fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
 
 		// Navigate to reusable tab.
 		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
@@ -116,7 +116,7 @@ describe( 'Reusable block', () => {
 
 		// Get the reusable block.
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -128,12 +128,12 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		const blockDeleted = await waitFor( () =>
@@ -163,12 +163,12 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		const innerBlockListWrapper = await waitFor( () =>
@@ -186,7 +186,7 @@ describe( 'Reusable block', () => {
 		} );
 
 		const headingInnerBlock = await waitFor( () =>
-			within( reusableBlock ).getByA11yLabel(
+			within( reusableBlock ).getByLabelText(
 				'Heading Block. Row 1. Level 2. First Reusable block'
 			)
 		);

package/src/button/block.json

@@ -9,6 +9,9 @@
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
@@ -56,7 +59,7 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true,
+		"align": false,
 		"alignWide": false,
 		"color": {
 			"__experimentalSkipSerialization": true,

package/src/button/deprecated.js

@@ -51,6 +51,20 @@ const migrateBorderRadius = ( attributes ) => {
 	};
 };
 
+function migrateAlign( attributes ) {
+	if ( ! attributes.align ) {
+		return attributes;
+	}
+	const { align, ...otherAttributes } = attributes;
+	return {
+		...otherAttributes,
+		className: classnames(
+			otherAttributes.className,
+			`align${ attributes.align }`
+		),
+	};
+}
+
 const migrateCustomColorsAndGradients = ( attributes ) => {
 	if (
 		! attributes.customTextColor &&
@@ -780,10 +794,12 @@ const deprecated = [
 		isEligible: ( attributes ) =>
 			!! attributes.customTextColor ||
 			!! attributes.customBackgroundColor ||
-			!! attributes.customGradient,
+			!! attributes.customGradient ||
+			!! attributes.align,
 		migrate: compose(
 			migrateBorderRadius,
-			migrateCustomColorsAndGradients
+			migrateCustomColorsAndGradients,
+			migrateAlign
 		),
 		save( { attributes } ) {
 			const {

package/src/button/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
@@ -17,6 +17,7 @@ import {
 	Popover,
 } from '@wordpress/components';
 import {
+	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	RichText,
@@ -76,14 +77,8 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const { linkTarget, placeholder, rel, style, text, url, width } =
+	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
 		attributes;
-	const onSetLinkRel = useCallback(
-		( value ) => {
-			setAttributes( { rel: value } );
-		},
-		[ setAttributes ]
-	);
 
 	function onToggleOpenInNewTab( value ) {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -176,6 +171,7 @@ function ButtonEdit( props ) {
 						colorProps.className,
 						borderProps.className,
 						{
+							[ `has-text-align-${ textAlign }` ]: textAlign,
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
@@ -199,6 +195,12 @@ function ButtonEdit( props ) {
 				/>
 			</div>
 			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
 				{ ! isURLSet && (
 					<ToolbarButton
 						name="link"
@@ -221,7 +223,7 @@ function ButtonEdit( props ) {
 			</BlockControls>
 			{ isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
-					position="bottom center"
+					placement="bottom"
 					onClose={ () => {
 						setIsEditingURL( false );
 						richTextRef.current?.focus();
@@ -262,7 +264,7 @@ function ButtonEdit( props ) {
 				<TextControl
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
-					onChange={ onSetLinkRel }
+					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
 				/>
 			</InspectorControls>
 		</>

package/src/button/save.js

@@ -16,8 +16,17 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const { fontSize, linkTarget, rel, style, text, title, url, width } =
-		attributes;
+	const {
+		textAlign,
+		fontSize,
+		linkTarget,
+		rel,
+		style,
+		text,
+		title,
+		url,
+		width,
+	} = attributes;
 
 	if ( ! text ) {
 		return null;
@@ -31,6 +40,7 @@ export default function save( { attributes, className } ) {
 		colorProps.className,
 		borderProps.className,
 		{
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,

package/src/button/style.scss

@@ -113,4 +113,6 @@ $blocks-block__margin: 0.5em;
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
 	background-color: transparent;
+	// background-image is required to overwrite a gradient background
+	background-image: none;
 }

package/src/buttons/edit.native.js

@@ -139,7 +139,7 @@ export default function ButtonsEdit( {
 						}
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 						} }
 					/>
 				</BlockControls>

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

@@ -50,12 +50,12 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByA11yLabel } = await initializeEditor( {
+			const { getByLabelText } = await initializeEditor( {
 				initialHtml,
 			} );
 
 			const buttonsBlock = await waitFor( () =>
-				getByA11yLabel( /Buttons Block\. Row 1/ )
+				getByLabelText( /Buttons Block\. Row 1/ )
 			);
 			fireEvent.press( buttonsBlock );
 
@@ -73,17 +73,17 @@ describe( 'Buttons block', () => {
 			} );
 
 			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
+				within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
 			);
 			fireEvent.press( buttonInnerBlock );
 
 			const settingsButton = await waitFor( () =>
-				getByA11yLabel( 'Open Settings' )
+				getByLabelText( 'Open Settings' )
 			);
 			fireEvent.press( settingsButton );
 
 			const radiusStepper = await waitFor( () =>
-				getByA11yLabel( /Border Radius/ )
+				getByLabelText( /Border Radius/ )
 			);
 
 			const incrementButton = await waitFor( () =>
@@ -98,7 +98,7 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
@@ -126,13 +126,13 @@ describe( 'Buttons block', () => {
 
 			// Check for new button
 			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 2/ )
+				within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ )
 			);
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
 			const paragraphPlaceholder = await waitFor( () =>
-				getByA11yLabel( 'Add paragraph block' )
+				getByLabelText( 'Add paragraph block' )
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -149,9 +149,9 @@ describe( 'Buttons block', () => {
 				initialHtml: BUTTONS_HTML,
 			} );
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByTestId,
-				queryAllByA11yLabel,
+				queryAllByLabelText,
 				getByText,
 			} = screen;
 
@@ -176,7 +176,7 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByA11yLabel( 'Add block' ) );
+			fireEvent.press( getByLabelText( 'Add block' ) );
 
 			const blockList = getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
@@ -190,7 +190,7 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByA11yLabel( 'ADD BLOCK HERE' );
+				queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
@@ -201,7 +201,7 @@ describe( 'Buttons block', () => {
 				rowIndex: 2,
 			} );
 			const secondButtonInput =
-				within( secondButtonBlock ).getByA11yLabel(
+				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
 			changeTextOfRichText( secondButtonInput, 'Hello!' );
@@ -214,7 +214,7 @@ describe( 'Buttons block', () => {
 				const screen = await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByA11yLabel } = screen;
+				const { getByLabelText } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
@@ -236,13 +236,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByA11yLabel(
+				const blockActionsButton = getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByA11yLabel( /Remove block/ );
+				const deleteButton = getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -260,17 +260,17 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByA11yLabel, getByText } = await initializeEditor( {
+				const { getByLabelText, getByText } = await initializeEditor( {
 					initialHtml,
 				} );
 
 				const block = await waitFor( () =>
-					getByA11yLabel( /Buttons Block\. Row 1/ )
+					getByLabelText( /Buttons Block\. Row 1/ )
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByA11yLabel( 'Change items justification' )
+					getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.