@wordpress/block-library 9.46.0 → 9.48.0

package/src/image/deprecated.js

@@ -11,8 +11,14 @@ import {
 	useBlockProps,
 	__experimentalGetElementClassName,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { mediaPosition } from './utils';
+
 /**
  * Deprecation for adding the `wp-image-${id}` class to the image block for
  * responsive images.
@@ -854,11 +860,12 @@ const v7 = {
 			},
 		},
 	},
-	migrate( { width, height, ...attributes } ) {
+	migrate( attributes ) {
+		const { width, height } = attributes;
 		return {
 			...attributes,
-			width: `${ width }px`,
-			height: `${ height }px`,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
 		};
 	},
 	save( { attributes } ) {
@@ -1166,4 +1173,229 @@ const v8 = {
 	},
 };
 
-export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
+/**
+ * Deprecation for adding height: auto when only one dimension is explicitly
+ * set, to prevent theme CSS from squishing images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/70575
+ */
+const v9 = {
+	attributes: {
+		blob: {
+			type: 'string',
+			role: 'local',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			role: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			role: 'content',
+		},
+		caption: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'figcaption',
+			role: 'content',
+		},
+		lightbox: {
+			type: 'object',
+			enabled: {
+				type: 'boolean',
+			},
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			role: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			role: 'content',
+		},
+		width: {
+			type: 'string',
+		},
+		height: {
+			type: 'string',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		interactivity: true,
+		align: [ 'left', 'center', 'right', 'wide', 'full' ],
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		spacing: {
+			margin: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			focalPoint,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+			metadata: { bindings = {} } = {},
+		} = attributes;
+
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+
+		const classes = clsx( {
+			alignnone: 'none' === align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
+
+		const imageClasses = clsx( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					...shadowProps.style,
+					aspectRatio,
+					objectFit: scale,
+					objectPosition:
+						focalPoint && scale
+							? mediaPosition( focalPoint )
+							: undefined,
+					width,
+					height,
+				} }
+				title={ title }
+			/>
+		);
+
+		const displayCaption =
+			! RichText.isEmpty( caption ) ||
+			bindings.caption ||
+			bindings?.__default?.source === 'core/pattern-overrides';
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ displayCaption && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+export default [ v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/image/edit.native.js

@@ -22,7 +22,7 @@ import {
 	setFeaturedImage,
 } from '@wordpress/react-native-bridge';
 import {
-	Icon,
+	Icon as WCIcon,
 	PanelBody,
 	ToolbarButton,
 	ToolbarGroup,
@@ -514,7 +514,7 @@ export class ImageEdit extends Component {
 
 	getPlaceholderIcon() {
 		return (
-			<Icon
+			<WCIcon
 				icon={ placeholderIcon }
 				{ ...this.props.getStylesFromColorScheme(
 					styles.iconPlaceholder,

package/src/image/image.js

@@ -9,6 +9,7 @@ import {
 	Spinner,
 	TextareaControl,
 	TextControl,
+	CheckboxControl,
 	ToolbarButton,
 	ToolbarGroup,
 	__experimentalToolsPanel as ToolsPanel,
@@ -44,6 +45,7 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
@@ -295,6 +297,7 @@ export default function Image( {
 		sizeSlug,
 		lightbox,
 		metadata,
+		isDecorative,
 	} = attributes;
 	const [ imageElement, setImageElement ] = useState();
 	const [ resizeDelta, setResizeDelta ] = useState( null );
@@ -379,9 +382,15 @@ export default function Image( {
 		[ clientId ]
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
+	const cropButtonRef = useRef();
+	const handleMediaEditorModalClose = useCallback(
+		() => cropButtonRef.current?.focus(),
+		[]
+	);
 	const openImageMediaEditorModal = useOpenImageMediaEditorModal( {
 		attributes,
 		setAttributes,
+		onClose: handleMediaEditorModalClose,
 	} );
 
 	const {
@@ -513,6 +522,7 @@ export default function Image( {
 		if ( enable && ! lightboxSetting?.enabled ) {
 			setAttributes( {
 				lightbox: { enabled: true },
+				isDecorative: false,
 			} );
 		} else if ( ! enable && lightboxSetting?.enabled ) {
 			setAttributes( {
@@ -551,6 +561,20 @@ export default function Image( {
 		setAttributes( { alt: newAlt } );
 	}
 
+	function updateIsDecorative( value ) {
+		setAttributes( {
+			isDecorative: value || undefined,
+			...( value && {
+				alt: '',
+				caption: undefined,
+				href: undefined,
+				linkDestination: undefined,
+				linkTarget: undefined,
+				rel: undefined,
+			} ),
+		} );
+	}
+
 	const imperativeFocalPointPreview = ( value ) => {
 		if ( imageElement ) {
 			imageElement.style.setProperty(
@@ -718,11 +742,14 @@ export default function Image( {
 		lockTitleControls = false,
 		lockTitleControlsMessage,
 		hideCaptionControls = false,
+		hasSelectedStyleState = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
+			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
+				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -740,6 +767,7 @@ export default function Image( {
 				titleBinding?.source
 			);
 			return {
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
 				lockUrlControls:
 					!! urlBinding &&
 					! urlBindingSource?.canUserEditValue?.( {
@@ -784,6 +812,7 @@ export default function Image( {
 		},
 		[
 			arePatternOverridesEnabled,
+			clientId,
 			context,
 			isSingleSelected,
 			metadata?.bindings,
@@ -794,7 +823,8 @@ export default function Image( {
 		isSingleSelected &&
 		! isEditingImage &&
 		! lockHrefControls &&
-		! lockUrlControls;
+		! lockUrlControls &&
+		! isDecorative;
 
 	const showCoverControls =
 		isSingleSelected && canInsertCover && ! isContentOnlyMode;
@@ -845,6 +875,7 @@ export default function Image( {
 					) }
 					{ allowCrop && (
 						<ToolbarButton
+							ref={ cropButtonRef }
 							onClick={
 								openImageMediaEditorModal
 									? openImageMediaEditorModal
@@ -896,7 +927,10 @@ export default function Image( {
 				<InspectorControls group="content">
 					<ToolsPanel
 						label={ __( 'Media' ) }
-						resetAll={ () => onSelectImage( undefined ) }
+						resetAll={ () => {
+							onSelectImage( undefined );
+							setAttributes( { isDecorative: false } );
+						} }
 						dropdownMenuProps={ dropdownMenuProps }
 					>
 						{ ! lockUrlControls && (
@@ -926,24 +960,24 @@ export default function Image( {
 								/>
 							</ToolsPanelItem>
 						) }
-						<ToolsPanelItem
-							label={ __( 'Alternative text' ) }
-							isShownByDefault
-							hasValue={ () => !! alt }
-							onDeselect={ () =>
-								setAttributes( { alt: undefined } )
-							}
-						>
-							<TextareaControl
+						{ ! isDecorative && (
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt || '' }
-								onChange={ updateAlt }
-								readOnly={ lockAltControls }
-								help={
-									lockAltControls ? (
-										<>{ lockAltControlsMessage }</>
-									) : (
-										<>
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: undefined } )
+								}
+							>
+								<TextareaControl
+									label={ __( 'Alternative text' ) }
+									value={ alt || '' }
+									onChange={ updateAlt }
+									readOnly={ lockAltControls }
+									help={
+										lockAltControls ? (
+											<>{ lockAltControlsMessage }</>
+										) : (
 											<ExternalLink
 												href={
 													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
@@ -956,57 +990,75 @@ export default function Image( {
 													'Describe the purpose of the image.'
 												) }
 											</ExternalLink>
-											<br />
-											{ __(
-												'Leave empty if decorative.'
-											) }
-										</>
-									)
+										)
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+
+						{ ! lockAltControls && ! lightboxChecked && (
+							<ToolsPanelItem
+								label={ __( 'Mark as decorative' ) }
+								isShownByDefault
+								hasValue={ () => !! isDecorative }
+								onDeselect={ () =>
+									setAttributes( { isDecorative: false } )
 								}
-							/>
-						</ToolsPanelItem>
+							>
+								<CheckboxControl
+									label={ __( 'Mark as decorative' ) }
+									checked={ !! isDecorative }
+									onChange={ updateIsDecorative }
+									help={ __(
+										'Hidden from assistive technologies.'
+									) }
+								/>
+							</ToolsPanelItem>
+						) }
 					</ToolsPanel>
 				</InspectorControls>
 			) }
-			<InspectorControls
-				group="dimensions"
-				resetAllFilter={ ( attrs ) => ( {
-					...attrs,
-					aspectRatio: undefined,
-					width: undefined,
-					height: undefined,
-					scale: undefined,
-					focalPoint: undefined,
-				} ) }
-			>
-				{ dimensionsControl }
-				{ url && scale && (
-					<ToolsPanelItem
-						label={ __( 'Focal point' ) }
-						isShownByDefault
-						hasValue={ () => !! focalPoint }
-						onDeselect={ () =>
-							setAttributes( {
-								focalPoint: undefined,
-							} )
-						}
-						panelId={ clientId }
-					>
-						<FocalPointPicker
+			{ ! hasSelectedStyleState && (
+				<InspectorControls
+					group="dimensions"
+					resetAllFilter={ ( attrs ) => ( {
+						...attrs,
+						aspectRatio: undefined,
+						width: undefined,
+						height: undefined,
+						scale: undefined,
+						focalPoint: undefined,
+					} ) }
+				>
+					{ dimensionsControl }
+					{ url && scale && (
+						<ToolsPanelItem
 							label={ __( 'Focal point' ) }
-							url={ url }
-							value={ focalPoint }
-							onDragStart={ imperativeFocalPointPreview }
-							onDrag={ imperativeFocalPointPreview }
-							onChange={ ( newFocalPoint ) =>
+							isShownByDefault
+							hasValue={ () => !! focalPoint }
+							onDeselect={ () =>
 								setAttributes( {
-									focalPoint: newFocalPoint,
+									focalPoint: undefined,
 								} )
 							}
-						/>
-					</ToolsPanelItem>
-				) }
-			</InspectorControls>
+							panelId={ clientId }
+						>
+							<FocalPointPicker
+								label={ __( 'Focal point' ) }
+								url={ url }
+								value={ focalPoint }
+								onDragStart={ imperativeFocalPointPreview }
+								onDrag={ imperativeFocalPointPreview }
+								onChange={ ( newFocalPoint ) =>
+									setAttributes( {
+										focalPoint: newFocalPoint,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
+				</InspectorControls>
+			) }
 			{ !! imageSizeOptions.length && (
 				<InspectorControls>
 					<ToolsPanel
@@ -1054,7 +1106,17 @@ export default function Image( {
 	const filename = getFilename( url );
 	let defaultedAlt;
 
-	if ( alt ) {
+	if ( isDecorative ) {
+		defaultedAlt = filename
+			? sprintf(
+					/* translators: %s: file name */
+					__(
+						'This image has been marked as decorative; its file name is %s'
+					),
+					filename
+			  )
+			: __( 'This image has been marked as decorative.' );
+	} else if ( alt ) {
 		defaultedAlt = alt;
 	} else if ( filename ) {
 		defaultedAlt = sprintf(
@@ -1102,7 +1164,33 @@ export default function Image( {
 									height:
 										pixelSize.height + resizeDelta.height,
 							  }
-							: { width, height } ),
+							: ( () => {
+									const style = {};
+									if ( width === 'auto' ) {
+										style.width = 'auto';
+									} else if (
+										width !== undefined &&
+										width !== null
+									) {
+										style.width =
+											typeof width === 'number'
+												? `${ width }px`
+												: width;
+									}
+									if (
+										height === 'auto' ||
+										height === undefined ||
+										height === null
+									) {
+										style.height = 'auto';
+									} else {
+										style.height =
+											typeof height === 'number'
+												? `${ height }px`
+												: height;
+									}
+									return style;
+							  } )() ),
 						objectFit: scale,
 						objectPosition:
 							focalPoint && scale
@@ -1309,18 +1397,20 @@ export default function Image( {
 			{ img }
 			{ resizableBox }
 
-			<Caption
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSingleSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				label={ __( 'Image caption text' ) }
-				showToolbarButton={
-					isSingleSelected &&
-					( hasNonContentControls || isContentOnlyMode ) &&
-					! hideCaptionControls
-				}
-			/>
+			{ ! isDecorative && (
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Image caption text' ) }
+					showToolbarButton={
+						isSingleSelected &&
+						( hasNonContentControls || isContentOnlyMode ) &&
+						! hideCaptionControls
+					}
+				/>
+			) }
 		</>
 	);
 }

package/src/image/index.js

@@ -108,21 +108,40 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
 				rel: value.rel,
 				linkTarget: value.linkTarget,
 			} ),
+			isVisible: ( item ) => ! item.isDecorative,
 		},
 		{
 			id: 'caption',
 			label: __( 'Caption' ),
 			type: 'text',
 			Edit: 'rich-text', // TODO: replace with custom component
+			isVisible: ( item ) => ! item.isDecorative,
 		},
 		{
 			id: 'alt',
 			label: __( 'Alt text' ),
 			type: 'text',
+			isVisible: ( item ) => ! item.isDecorative,
+		},
+		{
+			id: 'isDecorative',
+			label: __( 'Mark as decorative' ),
+			type: 'boolean',
+			setValue: ( { value } ) => ( {
+				isDecorative: value || undefined,
+				...( value && {
+					alt: '',
+					caption: undefined,
+					href: undefined,
+					linkDestination: undefined,
+					linkTarget: undefined,
+					rel: undefined,
+				} ),
+			} ),
 		},
 	];
 	settings[ formKey ] = {
-		fields: [ 'image', 'link', 'caption', 'alt' ],
+		fields: [ 'image', 'link', 'caption', 'alt', 'isDecorative' ],
 	};
 }
 

package/src/image/index.php

@@ -250,7 +250,7 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 					'galleryId'              => $block_instance->context['galleryId'] ?? null,
 					'customAriaLabel'        => $custom_aria_label ?? null,
 					'navigationButtonType'   => $block_instance->context['navigationButtonType'] ?? 'icon',
-					'triggerButtonAriaLabel' => null,
+					'triggerButtonAriaLabel' => __( 'Enlarge' ),
 				),
 			),
 		)