@wordpress/block-library 7.18.0 → 8.0.0

package/build-style/video/theme.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.18.0",
+	"version": "8.0.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,48 +31,50 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/autop": "^3.21.0",
-		"@wordpress/blob": "^3.21.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/date": "^4.21.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/dom": "^3.21.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/html-entities": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/primitives": "^3.19.0",
-		"@wordpress/reusable-blocks": "^3.19.0",
-		"@wordpress/rich-text": "^5.19.0",
-		"@wordpress/server-side-render": "^3.19.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/viewport": "^4.19.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/api-fetch": "^6.20.0",
+		"@wordpress/autop": "^3.23.0",
+		"@wordpress/blob": "^3.23.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/blocks": "^12.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/date": "^4.23.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/dom": "^3.23.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/escape-html": "^2.23.0",
+		"@wordpress/hooks": "^3.23.0",
+		"@wordpress/html-entities": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/keycodes": "^3.23.0",
+		"@wordpress/notices": "^3.23.0",
+		"@wordpress/primitives": "^3.21.0",
+		"@wordpress/reusable-blocks": "^4.0.0",
+		"@wordpress/rich-text": "^6.0.0",
+		"@wordpress/server-side-render": "^4.0.0",
+		"@wordpress/url": "^3.24.0",
+		"@wordpress/viewport": "^5.0.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",
+		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/audio/edit.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -228,7 +227,7 @@ function AudioEdit( {
 				<BlockCaption
 					accessible={ true }
 					accessibilityLabelCreator={ ( caption ) =>
-						isEmpty( caption )
+						! caption
 							? /* translators: accessibility text. Empty Audio caption. */
 							  __( 'Audio caption. Empty' )
 							: sprintf(

package/src/audio/index.js

@@ -23,6 +23,7 @@ export const settings = {
 		attributes: {
 			src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 		},
+		viewportWidth: 350,
 	},
 	transforms,
 	deprecated,

package/src/avatar/edit.js

@@ -35,6 +35,7 @@ const AvatarInspectorControls = ( {
 	<InspectorControls>
 		<PanelBody title={ __( 'Settings' ) }>
 			<RangeControl
+				__nextHasNoMarginBottom
 				label={ __( 'Image size' ) }
 				onChange={ ( newSize ) =>
 					setAttributes( {

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/avatar/user-control.js

@@ -33,6 +33,7 @@ function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(
 				'Select the avatar user to display, if it is blank it will use the post/page author.'

package/src/block/block.json

@@ -15,6 +15,5 @@
 		"customClassName": false,
 		"html": false,
 		"inserter": false
-	},
-	"editorStyle": "wp-block-editor"
+	}
 }

package/src/block/edit.js

@@ -39,8 +39,15 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	);
 	const isMissing = hasResolved && ! record;
 
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+	const { canRemove, innerBlockCount } = useSelect(
+		( select ) => {
+			const { canRemoveBlock, getBlockCount } =
+				select( blockEditorStore );
+			return {
+				canRemove: canRemoveBlock( clientId ),
+				innerBlockCount: getBlockCount( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 
@@ -109,7 +116,11 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 					<ToolbarGroup>
 						<ToolbarButton
 							onClick={ () => convertBlockToStatic( clientId ) }
-							label={ __( 'Convert to regular blocks' ) }
+							label={
+								innerBlockCount > 1
+									? __( 'Convert to regular blocks' )
+									: __( 'Convert to regular block' )
+							}
 							icon={ ungroup }
 							showTooltip
 						/>

package/src/block/edit.native.js

@@ -77,7 +77,7 @@ export default function ReusableBlockEdit( {
 		styles.spinnerDark
 	);
 
-	const { hasResolved, isEditing, isMissing } = useSelect(
+	const { hasResolved, isEditing, isMissing, innerBlockCount } = useSelect(
 		( select ) => {
 			const persistedBlock = select( coreStore ).getEntityRecord(
 				'postType',
@@ -88,6 +88,9 @@ export default function ReusableBlockEdit( {
 				'getEntityRecord',
 				[ 'postType', 'wp_block', ref ]
 			);
+
+			const { getBlockCount } = select( blockEditorStore );
+
 			return {
 				hasResolved: hasResolvedBlock,
 				isEditing:
@@ -95,6 +98,7 @@ export default function ReusableBlockEdit( {
 						reusableBlocksStore
 					).__experimentalIsEditingReusableBlock( clientId ),
 				isMissing: hasResolvedBlock && ! persistedBlock,
+				innerBlockCount: getBlockCount( clientId ),
 			};
 		},
 		[ ref, clientId ]
@@ -122,13 +126,13 @@ export default function ReusableBlockEdit( {
 	}
 
 	const onConvertToRegularBlocks = useCallback( () => {
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: name of the reusable block */
-				__( '%s converted to regular blocks' ),
-				title
-			)
-		);
+		const successNotice =
+			innerBlockCount > 1
+				? /* translators: %s: name of the reusable block */
+				  __( '%s converted to regular blocks' )
+				: /* translators: %s: name of the reusable block */
+				  __( '%s converted to regular block' );
+		createSuccessNotice( sprintf( successNotice, title ) );
 
 		clearSelectedBlock();
 		// Convert action is executed at the end of the current JavaScript execution block
@@ -162,12 +166,20 @@ export default function ReusableBlockEdit( {
 						{ infoTitle }
 					</Text>
 					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-						{ __(
-							'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
-						) }
+						{ innerBlockCount > 1
+							? __(
+									'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
+							  )
+							: __(
+									'Alternatively, you can detach and edit this block separately by tapping “Convert to regular block”.'
+							  ) }
 					</Text>
 					<TextControl
-						label={ __( 'Convert to regular blocks' ) }
+						label={
+							innerBlockCount > 1
+								? __( 'Convert to regular blocks' )
+								: __( 'Convert to regular block' )
+						}
 						separatorType="topFullWidth"
 						onPress={ onConvertToRegularBlocks }
 						labelStyle={ actionButtonStyle }

package/src/block/editor.scss

@@ -14,3 +14,20 @@
 		display: none;
 	}
 }
+
+.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}

package/src/block/index.php

@@ -27,8 +27,7 @@ function render_block_core_block( $attributes ) {
 	if ( isset( $seen_refs[ $attributes['ref'] ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.

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

@@ -5,7 +5,6 @@ import {
 	getEditorHtml,
 	initializeEditor,
 	fireEvent,
-	waitFor,
 	within,
 } from 'test/helpers';
 
@@ -24,7 +23,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	content: {
 		raw: `
     <!-- wp:heading -->
-    <h2>First Reusable block</h2>
+    <h2 class="wp-block-heading">First Reusable block</h2>
     <!-- /wp:heading -->
 
     <!-- wp:paragraph -->
@@ -78,17 +77,16 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml: '',
-				capabilities: { reusableBlock: true },
-			} );
+		const screen = await initializeEditor( {
+			initialHtml: '',
+			capabilities: { reusableBlock: true },
+		} );
 
 		// Open the inserter menu.
-		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+		fireEvent.press( await screen.findByLabelText( 'Add block' ) );
 
 		// Navigate to reusable tab.
-		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
+		const reusableSegment = await screen.findByText( 'Reusable' );
 		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -99,7 +97,9 @@ describe( 'Reusable block', () => {
 		} );
 		fireEvent.press( reusableSegment );
 
-		const reusableBlockList = getByTestId( 'InserterUI-ReusableBlocks' );
+		const reusableBlockList = screen.getByTestId(
+			'InserterUI-ReusableBlocks'
+		);
 		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {
 			nativeEvent: {
@@ -110,13 +110,11 @@ describe( 'Reusable block', () => {
 		} );
 
 		// Insert a reusable block.
-		fireEvent.press(
-			await waitFor( () => getByText( `Reusable block - 1` ) )
-		);
+		fireEvent.press( await screen.findByText( `Reusable block - 1` ) );
 
 		// Get the reusable block.
-		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -128,18 +126,16 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
-		const blockDeleted = await waitFor( () =>
-			within( reusableBlock ).getByText(
-				'Block has been deleted or is unavailable.'
-			)
+		const blockDeleted = within( reusableBlock ).getByText(
+			'Block has been deleted or is unavailable.'
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -163,17 +159,17 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findByLabelText(
+			/Reusable block Block\. Row 1/
 		);
 
-		const innerBlockListWrapper = await waitFor( () =>
-			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
-		);
+		const innerBlockListWrapper = await within(
+			reusableBlock
+		).findByTestId( 'block-list-wrapper' );
 
 		// onLayout event has to be explicitly dispatched in BlockList component,
 		// otherwise the inner blocks are not rendered.
@@ -185,10 +181,10 @@ describe( 'Reusable block', () => {
 			},
 		} );
 
-		const headingInnerBlock = await waitFor( () =>
-			within( reusableBlock ).getByA11yLabel(
-				'Heading Block. Row 1. Level 2. First Reusable block'
-			)
+		const [ headingInnerBlock ] = await within(
+			reusableBlock
+		).findAllByLabelText(
+			'Heading Block. Row 1. Level 2. First Reusable block'
 		);
 
 		expect( reusableBlock ).toBeDefined();

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"
@@ -262,7 +264,7 @@ function ButtonEdit( props ) {
 				<TextControl
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
-					onChange={ onSetLinkRel }
+					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
 				/>
 			</InspectorControls>
 		</>

package/src/button/edit.native.js

@@ -31,6 +31,7 @@ import {
 	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 /**

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,