@wordpress/block-library 11.1.0 → 11.2.0

package/src/audio/edit.jsx

@@ -7,6 +7,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { inertValue } from '@wordpress/react-inert-value';
 import { Text } from '@wordpress/ui';
 import {
 	BlockControls,
@@ -251,7 +252,7 @@ function AudioEdit( {
 			<figure { ...blockProps }>
 				<audio
 					controls="controls"
-					inert={ ! isSingleSelected ? 'true' : undefined }
+					inert={ inertValue( ! isSingleSelected ) }
 					src={ src ?? temporaryURL }
 				/>
 				{ !! temporaryURL && <Spinner /> }

package/src/avatar/README.md

@@ -35,6 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `false`
 - [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
   - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 
@@ -53,6 +54,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
 - **border**: `.wp-block-avatar img`
+- **shadow**: `.wp-block-avatar img`
 - **filter**:
   - duotone: `.wp-block-avatar img`
 

package/src/avatar/block.json

@@ -54,12 +54,16 @@
 		"filter": {
 			"duotone": true
 		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
 	},
 	"selectors": {
 		"border": ".wp-block-avatar img",
+		"shadow": ".wp-block-avatar img",
 		"filter": {
 			"duotone": ".wp-block-avatar img"
 		}

package/src/avatar/edit.jsx

@@ -3,6 +3,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 import {
 	RangeControl,
@@ -11,12 +12,47 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
+import { Link, Text } from '@wordpress/ui';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { useCommentAvatar, useUserAvatar } from './hooks';
 import UserControl from './user-control';
 
+/**
+ * Returns the help text explaining where avatars come from, with a link to the
+ * Discussion settings where the default avatar is chosen. Only users who can
+ * manage the site's settings get it, since nobody else can act on it.
+ *
+ * @return {React.ReactNode|null} Help text, or `null` when the user can't manage settings.
+ */
+function useAvatarHelpText() {
+	const canManageSettings = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'update', {
+				kind: 'root',
+				name: 'site',
+			} ),
+		[]
+	);
+
+	if ( ! canManageSettings ) {
+		return null;
+	}
+
+	return createInterpolateElement(
+		__(
+			'Avatars use the Gravatar service. Go to <a>Discussion settings</a> to change the default avatar.'
+		),
+		{
+			a: <Link href="options-discussion.php" openInNewTab />,
+		}
+	);
+}
+
 /**
  * Renders the inspector controls for the `core/avatar` block.
  *
@@ -35,6 +71,7 @@ const AvatarInspectorControls = ( {
 	selectUser,
 } ) => {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const helpText = useAvatarHelpText();
 	return (
 		<InspectorControls>
 			<ToolsPanel
@@ -49,6 +86,11 @@ const AvatarInspectorControls = ( {
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
 			>
+				{ helpText && (
+					<Text className="wp-block-avatar__help-text">
+						{ helpText }
+					</Text>
+				) }
 				<ToolsPanelItem
 					label={ __( 'Image size' ) }
 					isShownByDefault
@@ -156,7 +198,7 @@ const AvatarLinkWrapper = ( { children, isLink } ) =>
  *
  * @param {Object}   props               React props.
  * @param {Function} props.setAttributes Callback for updating block attributes.
- * @param {Object}   props.attributes    Block attributes: `size` and `isLink`, plus the border support values read by `useBorderProps`.
+ * @param {Object}   props.attributes    Block attributes: `size` and `isLink`, plus the border and shadow support values applied to the image.
  * @param {Object}   props.avatar        Avatar data returned by `useCommentAvatar` or `useUserAvatar`, with the image `src` and `alt` and the `minSize` and `maxSize` resize bounds.
  * @param {Object}   props.blockProps    Props returned by `useBlockProps`, applied to the wrapper element.
  * @param {boolean}  props.isSelected    Whether the block is selected. Resize handles are only shown when it is.
@@ -171,6 +213,7 @@ const ResizableAvatar = ( {
 	isSelected,
 } ) => {
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const doubledSizedSrc = addQueryArgs(
 		removeQueryArgs( avatar?.src, [ 's' ] ),
 		{
@@ -215,7 +258,10 @@ const ResizableAvatar = ( {
 							'wp-block-avatar__image',
 							borderProps.className
 						) }
-						style={ borderProps.style }
+						style={ {
+							...borderProps.style,
+							...shadowProps.style,
+						} }
 					/>
 				</ResizableBox>
 			</AvatarLinkWrapper>

package/src/avatar/editor.scss

@@ -7,3 +7,7 @@
 		margin: 0 auto;
 	}
 }
+
+.wp-block-avatar__help-text {
+	grid-column: 1 / -1;
+}

package/src/avatar/index.php

@@ -19,6 +19,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 	$size               = $attributes['size'] ?? 96;
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$border_attributes  = get_block_core_avatar_border_attributes( $attributes );
+	$shadow_styles      = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ?? null ) );
 
 	// Class gets passed through `esc_attr` via `get_avatar`.
 	$image_classes = ! empty( $border_attributes['class'] )
@@ -26,10 +27,11 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		: 'wp-block-avatar__image';
 
 	// Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`.
-	// The style engine does pass the border styles through
+	// The style engine does pass the border and shadow styles through
 	// `safecss_filter_attr` however.
-	$image_styles = ! empty( $border_attributes['style'] )
-		? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) )
+	$image_css    = ( $border_attributes['style'] ?? '' ) . ( $shadow_styles['css'] ?? '' );
+	$image_styles = ! empty( $image_css )
+		? sprintf( ' style="%s"', esc_attr( $image_css ) )
 		: '';
 
 	if ( ! isset( $block->context['commentId'] ) ) {

package/src/breadcrumbs/index.php

@@ -188,7 +188,7 @@ function render_block_core_breadcrumbs( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'style'      => '--separator: "' . $separator . '";',
-			'aria-label' => _x( 'Breadcrumbs', 'area label' ),
+			'aria-label' => _x( 'Breadcrumbs', 'aria label' ),
 		)
 	);
 

package/src/button/README.md

@@ -40,6 +40,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `false`
 - [`alignWide`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#alignwide): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
 - [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):

package/src/button/block.json

@@ -70,6 +70,12 @@
 		"splitting": true,
 		"align": false,
 		"alignWide": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalSkipSerialization": true
+		},
 		"color": {
 			"__experimentalSkipSerialization": true,
 			"gradients": true,

package/src/button/edit.jsx

@@ -16,6 +16,7 @@ import {
 	LinkControl,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
+	useBackgroundProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	__experimentalGetDimensionsClassesAndStyles as useDimensionsProps,
@@ -27,7 +28,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
-import { link, linkOff } from '@wordpress/icons';
+import { link } from '@wordpress/icons';
 import {
 	createBlock,
 	cloneBlock,
@@ -166,6 +167,7 @@ function ButtonEdit( props ) {
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
 	const shadowProps = useShadowProps( attributes );
+	const backgroundProps = useBackgroundProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 	const ref = useRef();
 	const richTextRef = useRef();
@@ -348,6 +350,7 @@ function ButtonEdit( props ) {
 						className,
 						'wp-block-button__link',
 						colorProps.className,
+						backgroundProps.className,
 						borderProps.className,
 						typographyProps.className,
 						{
@@ -362,6 +365,7 @@ function ButtonEdit( props ) {
 					style={ {
 						...borderProps.style,
 						...colorProps.style,
+						...backgroundProps.style,
 						...spacingProps.style,
 						...shadowProps.style,
 						...typographyProps.style,
@@ -377,64 +381,55 @@ function ButtonEdit( props ) {
 					{ isLinkTag && ! lockUrlControls && (
 						<ToolbarButton
 							name="link"
-							icon={ ! isURLSet ? link : linkOff }
-							title={ ! isURLSet ? __( 'Link' ) : __( 'Unlink' ) }
-							shortcut={
-								! isURLSet
-									? displayShortcut.primary( 'k' )
-									: displayShortcut.primaryShift( 'k' )
-							}
-							onClick={ ! isURLSet ? startEditing : unlink }
+							icon={ link }
+							title={ __( 'Link' ) }
+							shortcut={ displayShortcut.primary( 'k' ) }
+							onClick={ () => setIsEditingURL( ! isEditingURL ) }
 							isActive={ isURLSet }
 						/>
 					) }
 				</BlockControls>
 			) }
-			{ isLinkTag &&
-				isSelected &&
-				( isEditingURL || isURLSet ) &&
-				! lockUrlControls && (
-					<Popover
-						placement="bottom"
-						onClose={ () => {
-							setIsEditingURL( false );
+			{ isLinkTag && isSelected && isEditingURL && ! lockUrlControls && (
+				<Popover
+					placement="bottom"
+					onClose={ () => {
+						setIsEditingURL( false );
+						richTextRef.current?.focus();
+					} }
+					anchor={ popoverAnchor }
+					focusOnMount={ isEditingURL ? 'firstElement' : false }
+					__unstableSlotName="__unstable-block-tools-after"
+					shift
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( {
+							url: newURL,
+							opensInNewTab: newOpensInNewTab,
+							nofollow: newNofollow,
+						} ) =>
+							setAttributes(
+								getUpdatedLinkAttributes( {
+									rel,
+									url: newURL,
+									opensInNewTab: newOpensInNewTab,
+									nofollow: newNofollow,
+								} )
+							)
+						}
+						onRemove={ () => {
+							unlink();
 							richTextRef.current?.focus();
 						} }
-						anchor={ popoverAnchor }
-						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName="__unstable-block-tools-after"
-						shift
-					>
-						<LinkControl
-							value={ linkValue }
-							onChange={ ( {
-								url: newURL,
-								opensInNewTab: newOpensInNewTab,
-								nofollow: newNofollow,
-							} ) =>
-								setAttributes(
-									getUpdatedLinkAttributes( {
-										rel,
-										url: newURL,
-										opensInNewTab: newOpensInNewTab,
-										nofollow: newNofollow,
-									} )
-								)
-							}
-							onRemove={ () => {
-								unlink();
-								richTextRef.current?.focus();
-							} }
-							forceIsEditingLink={ isEditingURL }
-							settings={ LINK_SETTINGS }
-							createSuggestion={
-								createPageEntity && handleCreate
-							}
-							withCreateSuggestion={ userCanCreatePages }
-							createSuggestionButtonText={ createButtonText }
-						/>
-					</Popover>
-				) }
+						forceIsEditingLink={ ! isURLSet }
+						settings={ LINK_SETTINGS }
+						createSuggestion={ createPageEntity && handleCreate }
+						withCreateSuggestion={ userCanCreatePages }
+						createSuggestionButtonText={ createButtonText }
+					/>
+				</Popover>
+			) }
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/button/index.php

@@ -60,6 +60,53 @@ function render_block_core_button( $attributes, $content ) {
 		return '';
 	}
 
+	// Background skips serialization, so apply it to the link like color.
+	$background = $attributes['style']['background'] ?? null;
+
+	if ( is_array( $background ) ) {
+		$background_styles = array(
+			'backgroundImage'      => $background['backgroundImage'] ?? null,
+			'backgroundSize'       => $background['backgroundSize'] ?? null,
+			'backgroundPosition'   => $background['backgroundPosition'] ?? null,
+			'backgroundRepeat'     => $background['backgroundRepeat'] ?? null,
+			'backgroundAttachment' => $background['backgroundAttachment'] ?? null,
+			'gradient'             => $background['gradient'] ?? null,
+		);
+
+		// Mirror the background block support defaults.
+		if ( ! empty( $background_styles['backgroundImage'] ) ) {
+			$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
+			if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
+				$background_styles['backgroundPosition'] = '50% 50%';
+			}
+		}
+
+		$styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) );
+
+		if ( ! empty( $styles['css'] ) ) {
+			$processor = new WP_HTML_Tag_Processor( $content );
+			while ( $processor->next_tag() ) {
+				if ( $tag !== $processor->get_tag() ) {
+					continue;
+				}
+
+				$existing_style = $processor->get_attribute( 'style' );
+				if ( is_string( $existing_style ) && '' !== $existing_style ) {
+					$separator = str_ends_with( $existing_style, ';' ) ? '' : ';';
+					$processor->set_attribute( 'style', $existing_style . $separator . $styles['css'] );
+				} else {
+					$processor->set_attribute( 'style', $styles['css'] );
+				}
+
+				if ( ! empty( $background_styles['backgroundImage'] ) || ! empty( $background_styles['gradient'] ) ) {
+					$processor->add_class( 'has-background' );
+				}
+				break;
+			}
+			$content = $processor->get_updated_html();
+		}
+	}
+
 	$width = $attributes['style']['dimensions']['width'] ?? null;
 
 	if ( is_string( $width ) && '' !== $width ) {

package/src/buttons/README.md

@@ -41,6 +41,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
   - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
   - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false`
@@ -49,6 +52,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `clientNavigation`: `true`
 - [`listView`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#listview): `true`
 - [`contentRole`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#contentrole): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 
 ## Block Markup
 

package/src/buttons/block.json

@@ -50,6 +50,10 @@
 				"fontSize": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -73,7 +77,8 @@
 			"clientNavigation": true
 		},
 		"listView": true,
-		"contentRole": true
+		"contentRole": true,
+		"shadow": true
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

package/src/code/README.md

@@ -26,6 +26,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
   - `gradient`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/code/block.json

@@ -27,6 +27,10 @@
 				"gradient": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/column/edit.jsx

@@ -16,6 +16,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
@@ -105,7 +106,10 @@ function ColumnEdit( {
 	};
 
 	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
 	const blockProps = useBlockProps( {
+		ref: setDropZoneElement,
 		className: classes,
 		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
 	} );
@@ -124,6 +128,8 @@ function ColumnEdit( {
 	const innerBlocksProps = useInnerBlocksProps(
 		{ ...blockProps, 'aria-label': label },
 		{
+			// Allows dropping before or after the column, not only inside it.
+			dropZoneElement,
 			templateLock,
 			allowedBlocks,
 			renderAppender: hasChildBlocks

package/src/columns/README.md

@@ -39,6 +39,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
   - `gradient`: `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+  - `minWidth`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `blockGap`: `{"__experimentalDefault":"2em","sides":["horizontal","vertical"]}`
   - `margin`: `["top","bottom"]`

package/src/columns/block.json

@@ -43,6 +43,10 @@
 				"gradient": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"blockGap": {
 				"__experimentalDefault": "2em",