@wordpress/block-library 8.13.0 → 8.14.0

package/src/image/deprecated.js

@@ -6,355 +6,632 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName as getBorderClassesAndStyles,
+} from '@wordpress/block-editor';
 
-const blockAttributes = {
-	align: {
-		type: 'string',
-	},
-	url: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'src',
-	},
-	alt: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'alt',
-		default: '',
-	},
-	caption: {
-		type: 'string',
-		source: 'html',
-		selector: 'figcaption',
-	},
-	title: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'title',
-	},
-	href: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'href',
-	},
-	rel: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'rel',
-	},
-	linkClass: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'class',
-	},
-	id: {
-		type: 'number',
+/**
+ * Deprecation for adding the `wp-image-${id}` class to the image block for
+ * responsive images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/4898
+ */
+const v1 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
 	},
-	width: {
-		type: 'number',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height } = attributes;
+		const extraImageProps = width || height ? { width, height } : {};
+		const image = <img src={ url } alt={ alt } { ...extraImageProps } />;
+
+		let figureStyle = {};
+
+		if ( width ) {
+			figureStyle = { width };
+		} else if ( align === 'left' || align === 'right' ) {
+			figureStyle = { maxWidth: '50%' };
+		}
+
+		return (
+			<figure
+				className={ align ? `align${ align }` : null }
+				style={ figureStyle }
+			>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-	height: {
-		type: 'number',
+};
+
+/**
+ * Deprecation for adding the `is-resized` class to the image block to fix
+ * captions on resized images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/6496
+ */
+const v2 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
 	},
-	sizeSlug: {
-		type: 'string',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height, id } =
+			attributes;
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+			/>
+		);
+
+		return (
+			<figure className={ align ? `align${ align }` : null }>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-	linkDestination: {
-		type: 'string',
+};
+
+/**
+ * Deprecation for image floats including a wrapping div.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/7721
+ */
+const v3 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		linkDestination: {
+			type: 'string',
+			default: 'none',
+		},
 	},
-	linkTarget: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'target',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height, id } =
+			attributes;
+
+		const classes = classnames( {
+			[ `align${ align }` ]: align,
+			'is-resized': width || height,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+			/>
+		);
+
+		return (
+			<figure className={ classes }>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
 };
 
-const blockSupports = {
-	anchor: true,
-	color: {
-		__experimentalDuotone: 'img',
-		text: false,
-		background: false,
-	},
-	__experimentalBorder: {
-		radius: true,
-		__experimentalDefaultControls: {
-			radius: true,
+/**
+ * Deprecation for removing the outer div wrapper around aligned images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/38657
+ */
+const v4 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
 		},
 	},
-};
+	supports: {
+		anchor: true,
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-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 = ! 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 newRel = ! rel ? undefined : rel;
 
-			const figure = (
-				<>
-					{ href ? (
-						<a
-							className={ linkClass }
-							href={ href }
-							target={ linkTarget }
-							rel={ newRel }
-						>
-							{ image }
-						</a>
-					) : (
-						image
-					) }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</>
-			);
+		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 } />
+				) }
+			</>
+		);
 
+		if ( 'left' === align || 'right' === align || 'center' === align ) {
 			return (
-				<figure { ...useBlockProps.save( { className: classes } ) }>
-					{ figure }
-				</figure>
+				<div { ...useBlockProps.save() }>
+					<figure className={ classes }>{ figure }</figure>
+				</div>
 			);
+		}
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+/**
+ * Deprecation for moving 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
+ */
+const v5 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'img',
-				attribute: 'title',
+	supports: {
+		anchor: true,
+		color: {
+			__experimentalDuotone: 'img',
+			text: false,
+			background: false,
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalDefaultControls: {
+				radius: true,
 			},
-			sizeSlug: {
-				type: 'string',
+		},
+		__experimentalStyle: {
+			spacing: {
+				margin: '0 0 1em 0',
 			},
 		},
-		supports: blockSupports,
-		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				rel,
-				linkClass,
-				width,
-				height,
-				id,
-				linkTarget,
-				sizeSlug,
-				title,
-			} = attributes;
-
-			const newRel = ! 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 }
-				/>
-			);
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-			const figure = (
-				<>
-					{ href ? (
-						<a
-							className={ linkClass }
-							href={ href }
-							target={ linkTarget }
-							rel={ newRel }
-						>
-							{ image }
-						</a>
-					) : (
-						image
-					) }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</>
-			);
+		const newRel = ! rel ? undefined : rel;
 
-			if ( 'left' === align || 'right' === align || 'center' === align ) {
-				return (
-					<div { ...useBlockProps.save() }>
-						<figure className={ classes }>{ figure }</figure>
-					</div>
-				);
-			}
+		const classes = classnames( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+		} );
 
-			return (
-				<figure { ...useBlockProps.save( { className: classes } ) }>
-					{ figure }
-				</figure>
-			);
-		},
-	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height, id } =
-				attributes;
-
-			const classes = classnames( {
-				[ `align${ align }` ]: align,
-				'is-resized': width || height,
-			} );
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-				/>
-			);
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+				title={ title }
+			/>
+		);
 
-			return (
-				<figure className={ classes }>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
-	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height, id } =
-				attributes;
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-				/>
-			);
+		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 className={ align ? `align${ align }` : null }>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height } =
-				attributes;
-			const extraImageProps = width || height ? { width, height } : {};
-			const image = (
-				<img src={ url } alt={ alt } { ...extraImageProps } />
-			);
+};
 
-			let figureStyle = {};
+/**
+ * Deprecation for adding width and height as style rules on the inner img.
+ * It also updates the widht and height attributes to be strings instead of numbers.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+const v6 = {
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-			if ( width ) {
-				figureStyle = { width };
-			} else if ( align === 'left' || align === 'right' ) {
-				figureStyle = { maxWidth: '50%' };
-			}
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			return (
-				<figure
-					className={ align ? `align${ align }` : null }
-					style={ figureStyle }
-				>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+		const classes = classnames( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
+
+		const imageClasses = classnames( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					aspectRatio,
+					objectFit: scale,
+				} }
+				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
+						className={ getBorderClassesAndStyles( 'caption' ) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
-];
+};
 
-export default deprecated;
+export default [ v6, v5, v4, v3, v2, v1 ];