@wordpress/block-library 7.8.0 → 7.11.0

package/src/group/block.json

@@ -18,9 +18,11 @@
 		}
 	},
 	"supports": {
+		"__experimentalOnEnter": true,
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/group/edit.js

@@ -52,9 +52,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps( {
-		className: `is-layout-${ type }`,
-	} );
+	const blockProps = useBlockProps();
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled

package/src/group/variations.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { group, row, stack } from '@wordpress/icons';
 
 const variations = [
@@ -19,7 +19,7 @@ const variations = [
 	},
 	{
 		name: 'group-row',
-		title: __( 'Row' ),
+		title: _x( 'Row', 'single horizontal line' ),
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'inserter', 'transform' ],

package/src/heading/heading-level-dropdown.js

@@ -60,6 +60,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 						onClick() {
 							onChange( targetLevel );
 						},
+						role: 'menuitemradio',
 					};
 				}
 			} ) }

package/src/heading/index.js

@@ -31,9 +31,15 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		if ( context === 'accessibility' ) {
-			const { content, level } = attributes;
+		const { content, level } = attributes;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && content ) {
+			return content;
+		}
 
+		if ( context === 'accessibility' ) {
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

package/src/html/edit.js

@@ -6,42 +6,19 @@ import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
-	transformStyles,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Disabled,
-	SandBox,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Preview from './preview';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
-	const styles = useSelect( ( select ) => {
-		// Default styles used to unset some of the styles
-		// that might be inherited from the editor style.
-		const defaultStyles = `
-			html,body,:root {
-				margin: 0 !important;
-				padding: 0 !important;
-				overflow: visible !important;
-				min-height: auto !important;
-			}
-		`;
-
-		return [
-			defaultStyles,
-			...transformStyles(
-				select( blockEditorStore ).getSettings().styles
-			),
-		];
-	}, [] );
-
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<>
-					<SandBox html={ attributes.content } styles={ styles } />
-					{ /*
-							An overlay is added when the block is not selected in order to register click events.
-							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
-							difficult to reselect the block.
-						*/ }
-					{ ! isSelected && (
-						<div className="block-library-html__preview-overlay"></div>
-					) }
-				</>
+				<Preview
+					content={ attributes.content }
+					isSelected={ isSelected }
+				/>
 			) : (
 				<PlainText
 					value={ attributes.content }

package/src/html/preview.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	transformStyles,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+// Default styles used to unset some of the styles
+// that might be inherited from the editor style.
+const DEFAULT_STYLES = `
+	html,body,:root {
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+		min-height: auto !important;
+	}
+`;
+
+export default function HTMLEditPreview( { content, isSelected } ) {
+	const settingStyles = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()?.styles;
+	}, [] );
+
+	const styles = useMemo(
+		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		[ settingStyles ]
+	);
+
+	return (
+		<>
+			<SandBox html={ content } styles={ styles } />
+			{ /*
+				An overlay is added when the block is not selected in order to register click events.
+				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+				difficult to reselect the block.
+			*/ }
+			{ ! isSelected && (
+				<div className="block-library-html__preview-overlay"></div>
+			) }
+		</>
+	);
+}

package/src/image/block.json

@@ -84,9 +84,15 @@
 			"background": false
 		},
 		"__experimentalBorder": {
+			"color": true,
 			"radius": true,
+			"width": true,
+			"__experimentalSelector": "img, .wp-block-image__crop-area",
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
-				"radius": true
+				"color": true,
+				"radius": true,
+				"width": true
 			}
 		},
 		"__experimentalStyle": {

package/src/image/deprecated.js

@@ -31,6 +31,12 @@ const blockAttributes = {
 		source: 'html',
 		selector: 'figcaption',
 	},
+	title: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'title',
+	},
 	href: {
 		type: 'string',
 		source: 'attribute',
@@ -58,6 +64,9 @@ const blockAttributes = {
 	height: {
 		type: 'number',
 	},
+	sizeSlug: {
+		type: 'string',
+	},
 	linkDestination: {
 		type: 'string',
 	},
@@ -85,6 +94,83 @@ const blockSupports = {
 };
 
 const deprecated = [
+	// The following deprecation moves existing border radius styles onto the
+	// inner img element where new border block support styles must be applied.
+	// It will also add a new `.has-custom-border` class for existing blocks
+	// with border radii set. This class is required to improve caption position
+	// and styling when an image within a gallery has a custom border or
+	// rounded corners.
+	//
+	// See: https://github.com/WordPress/gutenberg/pull/31366/
+	{
+		attributes: blockAttributes,
+		supports: blockSupports,
+		save( { attributes } ) {
+			const {
+				url,
+				alt,
+				caption,
+				align,
+				href,
+				rel,
+				linkClass,
+				width,
+				height,
+				id,
+				linkTarget,
+				sizeSlug,
+				title,
+			} = attributes;
+
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const classes = classnames( {
+				[ `align${ align }` ]: align,
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'is-resized': width || height,
+			} );
+
+			const image = (
+				<img
+					src={ url }
+					alt={ alt }
+					className={ id ? `wp-image-${ id }` : null }
+					width={ width }
+					height={ height }
+					title={ title }
+				/>
+			);
+
+			const figure = (
+				<>
+					{ href ? (
+						<a
+							className={ linkClass }
+							href={ href }
+							target={ linkTarget }
+							rel={ newRel }
+						>
+							{ image }
+						</a>
+					) : (
+						image
+					) }
+					{ ! RichText.isEmpty( caption ) && (
+						<RichText.Content
+							tagName="figcaption"
+							value={ caption }
+						/>
+					) }
+				</>
+			);
+
+			return (
+				<figure { ...useBlockProps.save( { className: classes } ) }>
+					{ figure }
+				</figure>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

package/src/image/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, has, omit, pick } from 'lodash';
+import { get, has, isEmpty, omit, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import {
 	MediaPlaceholder,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -296,10 +297,14 @@ export function ImageEdit( {
 		/>
 	);
 
+	const borderProps = useBorderProps( attributes );
+
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
+		'has-custom-border':
+			!! borderProps.className || ! isEmpty( borderProps.style ),
 	} );
 
 	const blockProps = useBlockProps( {

package/src/image/edit.native.js

@@ -268,11 +268,15 @@ export class ImageEdit extends Component {
 	componentDidUpdate( previousProps ) {
 		const { image, attributes, setAttributes, featuredImageId } =
 			this.props;
+		const { url } = attributes;
 		if ( ! previousProps.image && image ) {
-			const url =
-				getUrlForSlug( image, attributes?.sizeSlug ) ||
-				image.source_url;
-			setAttributes( { url } );
+			if ( ! hasQueryArg( url, 'w' ) && attributes?.sizeSlug ) {
+				const updatedUrl =
+					getUrlForSlug( image, attributes.sizeSlug ) ||
+					image.source_url;
+
+				setAttributes( { url: updatedUrl } );
+			}
 		}
 
 		const { id } = attributes;
@@ -428,6 +432,7 @@ export class ImageEdit extends Component {
 			id: media.id,
 			url: media.url,
 			caption: media.caption,
+			alt: media.alt,
 		};
 
 		let additionalAttributes;
@@ -573,7 +578,7 @@ export class ImageEdit extends Component {
 					<>
 						{ __(
 							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
-						) }
+						) }{ ' ' }
 						<FooterMessageLink
 							href={
 								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
@@ -664,6 +669,7 @@ export class ImageEdit extends Component {
 			context,
 			featuredImageId,
 			wasBlockJustInserted,
+			shouldUseFastImage,
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 		const hasImageContext = context
@@ -844,6 +850,9 @@ export class ImageEdit extends Component {
 											isUploadInProgress={
 												isUploadInProgress
 											}
+											shouldUseFastImage={
+												shouldUseFastImage
+											}
 											onSelectMediaUploadOption={
 												this.onSelectMediaUploadOption
 											}
@@ -903,7 +912,8 @@ export default compose( [
 			isSelected,
 			clientId,
 		} = props;
-		const { imageSizes, imageDefaultSize } = getSettings();
+		const { imageSizes, imageDefaultSize, shouldUseFastImage } =
+			getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
 		const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -915,11 +925,13 @@ export default compose( [
 				isNotFileUrl &&
 				url &&
 				! hasQueryArg( url, 'w' ) );
+		const image = shouldGetMedia ? getMedia( id ) : null;
 
 		return {
-			image: shouldGetMedia ? getMedia( id ) : null,
+			image,
 			imageSizes,
 			imageDefaultSize,
+			shouldUseFastImage,
 			featuredImageId,
 			wasBlockJustInserted: wasBlockJustInserted(
 				clientId,

package/src/image/editor.scss

@@ -22,10 +22,6 @@ figure.wp-block-image:not(.wp-block) {
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	&:not(.is-style-rounded) > div:not(.components-placeholder) {
-		border-radius: inherit;
-	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
@@ -94,6 +90,15 @@ figure.wp-block-image:not(.wp-block) {
 	position: relative;
 	max-width: 100%;
 	width: 100%;
+	overflow: hidden;
+
+	// This removes the border from the img within the image cropper so it
+	// can be applied to the cropper itself. This then allows the image to be
+	// cropped within the visual border providing more accurate editing and
+	// smoother UX.
+	.reactEasyCrop_Container .reactEasyCrop_Image {
+		border: none;
+	}
 }
 
 .wp-block-image__crop-icon {

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, map, pick, includes } from 'lodash';
+import { get, filter, isEmpty, map, pick, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -29,6 +29,8 @@ import {
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
+	__experimentalGetElementClassName,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -56,7 +58,19 @@ import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 
 export default function Image( {
 	temporaryURL,
-	attributes: {
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	onReplace,
+	onSelectImage,
+	onSelectURL,
+	onUploadError,
+	containerRef,
+	context,
+	clientId,
+} ) {
+	const {
 		url = '',
 		alt,
 		caption,
@@ -71,18 +85,7 @@ export default function Image( {
 		height,
 		linkTarget,
 		sizeSlug,
-	},
-	setAttributes,
-	isSelected,
-	insertBlocksAfter,
-	onReplace,
-	onSelectImage,
-	onSelectURL,
-	onUploadError,
-	containerRef,
-	context,
-	clientId,
-} ) {
+	} = attributes;
 	const imageRef = useRef();
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
@@ -185,7 +188,7 @@ export default function Image( {
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
-	// witdth and height is otherwise lost when switching between alignments.
+	// width and height is otherwise lost when switching between alignments.
 	// See: https://github.com/WordPress/gutenberg/pull/37210.
 	const { naturalWidth, naturalHeight } = useMemo( () => {
 		return {
@@ -428,6 +431,11 @@ export default function Image( {
 		defaultedAlt = __( 'This image has an empty alt attribute' );
 	}
 
+	const borderProps = useBorderProps( attributes );
+	const isRounded = attributes.className?.includes( 'is-style-rounded' );
+	const hasCustomBorder =
+		!! borderProps.className || ! isEmpty( borderProps.style );
+
 	let img = (
 		// Disable reason: Image itself is not meant to be interactive, but
 		// should direct focus to block.
@@ -444,6 +452,8 @@ export default function Image( {
 					} );
 				} }
 				ref={ imageRef }
+				className={ borderProps.className }
+				style={ borderProps.style }
 			/>
 			{ temporaryURL && <Spinner /> }
 		</>
@@ -465,6 +475,7 @@ export default function Image( {
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageEditor
+				borderProps={ isRounded ? undefined : borderProps }
 				url={ url }
 				width={ width }
 				height={ height }
@@ -529,7 +540,7 @@ export default function Image( {
 			<ResizableBox
 				size={ {
 					width: width ?? 'auto',
-					height: height ?? 'auto',
+					height: height && ! hasCustomBorder ? height : 'auto',
 				} }
 				showHandle={ isSelected }
 				minWidth={ minWidth }
@@ -576,6 +587,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					ref={ captionRef }
 					tagName="figcaption"
 					aria-label={ __( 'Image caption text' ) }

package/src/image/save.js

@@ -7,7 +7,12 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -27,18 +32,26 @@ export default function save( { attributes } ) {
 	} = attributes;
 
 	const newRel = isEmpty( rel ) ? undefined : rel;
+	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const classes = classnames( {
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
+		'has-custom-border':
+			!! borderProps.className || ! isEmpty( borderProps.style ),
+	} );
+
+	const imageClasses = classnames( borderProps.className, {
+		[ `wp-image-${ id }` ]: !! id,
 	} );
 
 	const image = (
 		<img
 			src={ url }
 			alt={ alt }
-			className={ id ? `wp-image-${ id }` : null }
+			className={ imageClasses || undefined }
+			style={ borderProps.style }
 			width={ width }
 			height={ height }
 			title={ title }
@@ -60,7 +73,11 @@ export default function save( { attributes } ) {
 				image
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</>
 	);

package/src/image/style.scss

@@ -3,12 +3,12 @@
 		height: auto;
 		max-width: 100%;
 		vertical-align: bottom;
+		box-sizing: border-box;
 	}
 
-	&:not(.is-style-rounded) {
-		> a,
+	&.has-custom-border {
 		img {
-			border-radius: inherit;
+			box-sizing: border-box;
 		}
 	}
 
@@ -97,6 +97,42 @@
 			border-radius: 0;
 		}
 	}
+
+	// The following is required to overcome WP Core applying styles that clear
+	// img borders with a higher specificity than those added by the border
+	// block support to provide a default border-style of solid when a border
+	// color or width has been set.
+	:where(.has-border-color) {
+		border-style: solid;
+	}
+	:where([style*="border-top-color"]) {
+		border-top-style: solid;
+	}
+	:where([style*="border-right-color"]) {
+		border-right-style: solid;
+	}
+	:where([style*="border-bottom-color"]) {
+		border-bottom-style: solid;
+	}
+	:where([style*="border-left-color"]) {
+		border-left-style: solid;
+	}
+
+	:where([style*="border-width"]) {
+		border-style: solid;
+	}
+	:where([style*="border-top-width"]) {
+		border-top-style: solid;
+	}
+	:where([style*="border-right-width"]) {
+		border-right-style: solid;
+	}
+	:where([style*="border-bottom-width"]) {
+		border-bottom-style: solid;
+	}
+	:where([style*="border-left-width"]) {
+		border-left-style: solid;
+	}
 }
 
 .wp-block-image figure {