@wordpress/block-library 9.9.0 → 9.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.9.0",
+	"version": "9.11.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,40 +38,40 @@
 		"./search/view": "./build-module/search/view.js"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/autop": "^4.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/block-editor": "^14.4.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/date": "^5.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/escape-html": "^3.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/interactivity": "^6.9.0",
-		"@wordpress/interactivity-router": "^2.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/patterns": "^2.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/reusable-blocks": "^5.9.0",
-		"@wordpress/rich-text": "^7.9.0",
-		"@wordpress/server-side-render": "^5.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/viewport": "^6.9.0",
-		"@wordpress/wordcount": "^4.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/autop": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/interactivity": "*",
+		"@wordpress/interactivity-router": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/server-side-render": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -89,5 +89,6 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"wpScript": true,
+	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
 }

package/src/archives/block.json

@@ -26,6 +26,12 @@
 	},
 	"supports": {
 		"align": true,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/archives/editor.scss

@@ -1,3 +1,11 @@
 ul.wp-block-archives {
 	padding-left: 2.5em;
 }
+
+// The following styles are to prevent duplicate spacing and borders for the archives
+// block in the editor given it uses server side rendering.
+// See https://github.com/WordPress/gutenberg/pull/63400
+.wp-block-archives .wp-block-archives {
+	margin: 0;
+	border: 0;
+}

package/src/avatar/hooks.js

@@ -47,9 +47,8 @@ export function useCommentAvatar( { commentId } ) {
 		src: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : defaultAvatar,
 		minSize,
 		maxSize,
-		// translators: %s is the Author name.
 		alt: authorName
-			? // translators: %s is the Author name.
+			? // translators: %s: Author name.
 			  sprintf( __( '%s Avatar' ), authorName )
 			: __( 'Default Avatar' ),
 	};
@@ -89,7 +88,7 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		minSize,
 		maxSize,
 		alt: authorDetails
-			? // translators: %s is the Author name.
+			? // translators: %s: Author name.
 			  sprintf( __( '%s Avatar' ), authorDetails?.name )
 			: __( 'Default Avatar' ),
 	};

package/src/avatar/index.php

@@ -46,7 +46,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		}
 
 		$author_name = get_the_author_meta( 'display_name', $author_id );
-		// translators: %s is the Author name.
+		// translators: %s: Author name.
 		$alt          = sprintf( __( '%s Avatar' ), $author_name );
 		$avatar_block = get_avatar(
 			$author_id,
@@ -64,7 +64,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 				// translators: %s is the Author name.
 				$label = 'aria-label="' . esc_attr( sprintf( __( '(%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.
+			// translators: 1: Author archive link. 2: 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>', 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 );
@@ -73,7 +73,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 	if ( ! $comment ) {
 		return '';
 	}
-	/* translators: %s is the Comment Author name */
+	/* translators: %s: Author name. */
 	$alt          = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	$avatar_block = get_avatar(
 		$comment,
@@ -88,10 +88,9 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) {
 		$label = '';
 		if ( '_blank' === $attributes['linkTarget'] ) {
-			// translators: %s is the Comment Author name.
+			// translators: %s: Comment author name.
 			$label = 'aria-label="' . esc_attr( sprintf( __( '(%s website link, opens in a new tab)' ), $comment->comment_author ) ) . '"';
 		}
-		// translators: %1$s: Comment Author website 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>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );

package/src/button/get-updated-link-attributes.js

@@ -40,7 +40,7 @@ export function getUpdatedLinkAttributes( {
 	if ( nofollow ) {
 		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
 			? updatedRel
-			: updatedRel + ` ${ NOFOLLOW_REL }`;
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
 	} else {
 		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
 		updatedRel = updatedRel?.replace( relRegex, '' ).trim();

package/src/button/style.scss

@@ -9,6 +9,9 @@ $blocks-block__margin: 0.5em;
 	text-align: center;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
+	height: 100%;
+	width: 100%;
+	align-content: center;
 
 	&.aligncenter {
 		text-align: center;

package/src/button/test/get-updated-link-attributes.js

@@ -79,6 +79,21 @@ describe( 'getUpdatedLinkAttributes method', () => {
 		expect( result.rel ).toEqual( 'rel_value nofollow' );
 	} );
 
+	it( 'should correctly update link attributes with nofollow without spacing', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: true,
+			rel: '',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( 'nofollow' );
+	} );
+
 	it( 'should correctly handle rel with existing nofollow values and remove duplicates', () => {
 		const options = {
 			url: 'example.com',

package/src/code/style.scss

@@ -9,5 +9,10 @@
 		font-family: inherit;
 		overflow-wrap: break-word;
 		white-space: pre-wrap;
+		// Set direction and avoid inheriting alignment from a parent element.
+		/*!rtl:begin:ignore*/
+		direction: ltr;
+		text-align: initial;
+		/*!rtl:end:ignore*/
 	}
 }

package/src/comment-author-avatar/index.php

@@ -46,7 +46,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 	$styles  = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
 	$classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
 
-	/* translators: %s is the Comment Author name */
+	/* translators: %s: Author name. */
 	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 
 	$avatar_block = get_avatar(

package/src/comments/block.json

@@ -17,7 +17,10 @@
 		}
 	},
 	"supports": {
-		"align": [ "wide", "full" ],
+		"align": [
+			"wide",
+			"full"
+		],
 		"html": false,
 		"color": {
 			"gradients": true,
@@ -45,8 +48,23 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-comments-editor",
-	"usesContext": [ "postId", "postType" ]
-}
+	"usesContext": [
+		"postId",
+		"postType"
+	]
+}

package/src/comments/style.scss

@@ -13,7 +13,6 @@
 	}
 
 	/* end utility classes */
-
 	.navigation {
 		&::after {
 			content: "";
@@ -146,3 +145,7 @@
 :where(.wp-block-post-comments input[type="submit"]) {
 	border: none;
 }
+
+.wp-block-comments {
+	box-sizing: border-box;
+}

package/src/common.scss

@@ -75,8 +75,6 @@
 
 .screen-reader-text {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;
@@ -89,7 +87,6 @@
 
 .screen-reader-text:focus {
 	background-color: $gray-300;
-	clip: auto !important;
 	clip-path: none;
 	color: #444;
 	display: block;

package/src/cover/block.json

@@ -78,6 +78,9 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"sizeSlug": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/cover/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';

package/src/cover/edit/index.js

@@ -47,6 +47,7 @@ import {
 	DEFAULT_BACKGROUND_COLOR,
 	DEFAULT_OVERLAY_COLOR,
 } from './color-utils';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -100,6 +101,7 @@ function CoverEdit( {
 		templateLock,
 		tagName: TagName = 'div',
 		isUserOverlayColor,
+		sizeSlug,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -108,6 +110,7 @@ function CoverEdit( {
 		'featured_media',
 		postId
 	);
+	const { getSettings } = useSelect( blockEditorStore );
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -149,8 +152,7 @@ function CoverEdit( {
 				isUserOverlayColor: isUserOverlayColor || false,
 			} );
 		} )();
-		// Disable reason: Update the block only when the featured image changes.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Update the block only when the featured image changes.
 	}, [ mediaUrl ] );
 
 	// instead of destructuring the attributes
@@ -199,6 +201,22 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) {
+			const { imageDefaultSize } = getSettings();
+
+			// Try to use the previous selected image size if it's available
+			// otherwise try the default image size or fallback to full size.
+			if ( sizeSlug && newMedia?.sizes?.[ sizeSlug ] ) {
+				mediaAttributes.sizeSlug = sizeSlug;
+				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
+			} else if ( newMedia?.sizes?.[ imageDefaultSize ] ) {
+				mediaAttributes.sizeSlug = imageDefaultSize;
+				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
+			} else {
+				mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
+			}
+		}
+
 		setAttributes( {
 			...mediaAttributes,
 			focalPoint: undefined,

package/src/cover/edit/inspector-controls.js

@@ -5,12 +5,12 @@ import { useMemo } from '@wordpress/element';
 import {
 	ExternalLink,
 	FocalPointPicker,
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -19,20 +19,25 @@ import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSettings,
+	store as blockEditorStore,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
-const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
 
 function CoverHeightInput( {
 	onChange,
@@ -94,6 +99,7 @@ export default function CoverInspectorControls( {
 } ) {
 	const {
 		useFeaturedImage,
+		id,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -111,7 +117,38 @@ export default function CoverInspectorControls( {
 		overlayColor,
 	} = currentSettings;
 
+	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+
 	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { getSettings } = useSelect( blockEditorStore );
+
+	const imageSizes = getSettings()?.imageSizes;
+
+	const image = useSelect(
+		( select ) =>
+			id && isImageBackground
+				? select( coreStore ).getMedia( id, { context: 'view' } )
+				: null,
+		[ id, isImageBackground ]
+	);
+
+	function updateImage( newSizeSlug ) {
+		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
+		if ( ! newUrl ) {
+			return null;
+		}
+
+		setAttributes( {
+			url: newUrl,
+			sizeSlug: newSizeSlug,
+		} );
+	}
+
+	const imageSizeOptions = imageSizes
+		?.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		?.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	const toggleParallax = () => {
 		setAttributes( {
@@ -160,72 +197,139 @@ export default function CoverInspectorControls( {
 		),
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								hasParallax: false,
+								focalPoint: undefined,
+								isRepeated: false,
+								alt: '',
+								sizeSlug: undefined,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isImageBackground && (
 							<>
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+									isShownByDefault
+									hasValue={ () => hasParallax }
+									onDeselect={ () =>
+										setAttributes( {
+											hasParallax: false,
+											focalPoint: undefined,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Fixed background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								</ToolsPanelItem>
 
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Repeated background' ) }
-									checked={ isRepeated }
-									onChange={ toggleIsRepeated }
-								/>
+									isShownByDefault
+									hasValue={ () => isRepeated }
+									onDeselect={ () =>
+										setAttributes( {
+											isRepeated: false,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Repeated background' ) }
+										checked={ isRepeated }
+										onChange={ toggleIsRepeated }
+									/>
+								</ToolsPanelItem>
 							</>
 						) }
 						{ showFocalPointPicker && (
-							<FocalPointPicker
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
+								isShownByDefault
+								hasValue={ () => !! focalPoint }
+								onDeselect={ () =>
 									setAttributes( {
-										focalPoint: newFocalPoint,
+										focalPoint: undefined,
 									} )
 								}
-							/>
+							>
+								<FocalPointPicker
+									__nextHasNoMarginBottom
+									label={ __( 'Focal point' ) }
+									url={ url }
+									value={ focalPoint }
+									onDragStart={ imperativeFocalPointPreview }
+									onDrag={ imperativeFocalPointPreview }
+									onChange={ ( newFocalPoint ) =>
+										setAttributes( {
+											focalPoint: newFocalPoint,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
 						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
-							<TextareaControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt }
-								onChange={ ( newAlt ) =>
-									setAttributes( { alt: newAlt } )
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: '' } )
 								}
-								help={
-									<>
-										<ExternalLink
-											href={
-												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-												__(
-													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-												)
-											}
-										>
+							>
+								<TextareaControl
+									__nextHasNoMarginBottom
+									label={ __( 'Alternative text' ) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
+												{ __(
+													'Describe the purpose of the image.'
+												) }
+											</ExternalLink>
+											<br />
 											{ __(
-												'Describe the purpose of the image.'
+												'Leave empty if decorative.'
 											) }
-										</ExternalLink>
-										<br />
-										{ __( 'Leave empty if decorative.' ) }
-									</>
-								}
+										</>
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+						{ ! useFeaturedImage && !! imageSizeOptions?.length && (
+							<ResolutionTool
+								value={ sizeSlug }
+								onChange={ updateImage }
+								options={ imageSizeOptions }
+								defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
 							/>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (