@wordpress/block-library 8.12.16 → 8.12.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.12.16",
+	"version": "8.12.18",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@preact/signals": "^1.1.3",
-		"@wordpress/a11y": "^3.35.1",
-		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/autop": "^3.35.1",
-		"@wordpress/blob": "^3.35.1",
-		"@wordpress/block-editor": "^12.3.13",
-		"@wordpress/blocks": "^12.12.7",
-		"@wordpress/components": "^25.1.10",
-		"@wordpress/compose": "^6.12.2",
-		"@wordpress/core-data": "^6.12.14",
-		"@wordpress/data": "^9.5.5",
-		"@wordpress/date": "^4.35.1",
-		"@wordpress/deprecated": "^3.35.1",
-		"@wordpress/dom": "^3.35.1",
-		"@wordpress/element": "^5.12.1",
-		"@wordpress/escape-html": "^2.35.1",
-		"@wordpress/hooks": "^3.35.1",
-		"@wordpress/html-entities": "^3.35.1",
-		"@wordpress/i18n": "^4.35.1",
-		"@wordpress/icons": "^9.26.2",
-		"@wordpress/keycodes": "^3.35.1",
-		"@wordpress/notices": "^4.3.5",
-		"@wordpress/primitives": "^3.33.1",
-		"@wordpress/private-apis": "^0.17.2",
-		"@wordpress/reusable-blocks": "^4.12.14",
-		"@wordpress/rich-text": "^6.12.7",
-		"@wordpress/server-side-render": "^4.12.12",
-		"@wordpress/url": "^3.36.1",
-		"@wordpress/viewport": "^5.12.5",
-		"@wordpress/wordcount": "^3.35.1",
+		"@wordpress/a11y": "^3.35.2",
+		"@wordpress/api-fetch": "^6.32.2",
+		"@wordpress/autop": "^3.35.2",
+		"@wordpress/blob": "^3.35.2",
+		"@wordpress/block-editor": "^12.3.15",
+		"@wordpress/blocks": "^12.12.8",
+		"@wordpress/components": "^25.1.12",
+		"@wordpress/compose": "^6.12.3",
+		"@wordpress/core-data": "^6.12.16",
+		"@wordpress/data": "^9.5.6",
+		"@wordpress/date": "^4.35.2",
+		"@wordpress/deprecated": "^3.35.2",
+		"@wordpress/dom": "^3.35.2",
+		"@wordpress/element": "^5.12.2",
+		"@wordpress/escape-html": "^2.35.2",
+		"@wordpress/hooks": "^3.35.2",
+		"@wordpress/html-entities": "^3.35.2",
+		"@wordpress/i18n": "^4.35.2",
+		"@wordpress/icons": "^9.26.3",
+		"@wordpress/keycodes": "^3.35.2",
+		"@wordpress/notices": "^4.3.6",
+		"@wordpress/primitives": "^3.33.2",
+		"@wordpress/private-apis": "^0.17.3",
+		"@wordpress/reusable-blocks": "^4.12.16",
+		"@wordpress/rich-text": "^6.12.9",
+		"@wordpress/server-side-render": "^4.12.14",
+		"@wordpress/url": "^3.36.2",
+		"@wordpress/viewport": "^5.12.6",
+		"@wordpress/wordcount": "^3.35.2",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "422f6fd382771134156919d2032765e57432be7e"
+	"gitHead": "86d483d54c987f4d324a760deacb0af29fff8332"
 }

package/src/footnotes/edit.js

@@ -46,7 +46,19 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 	return (
 		<ol { ...blockProps }>
 			{ footnotes.map( ( { id, content } ) => (
-				<li key={ id }>
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+				<li
+					key={ id }
+					onMouseDown={ ( event ) => {
+						// When clicking on the list item (not on descendants),
+						// focus the rich text element since it's only 1px wide when
+						// empty.
+						if ( event.target === event.currentTarget ) {
+							event.target.firstElementChild.focus();
+							event.preventDefault();
+						}
+					} }
+				>
 					<RichText
 						id={ id }
 						tagName="span"

package/src/footnotes/format.js

@@ -37,6 +37,7 @@ export const format = {
 	attributes: {
 		'data-fn': 'data-fn',
 	},
+	interactive: true,
 	contentEditable: false,
 	[ usesContextKey ]: [ 'postType' ],
 	edit: function Edit( {

package/src/image/block.json

@@ -64,10 +64,10 @@
 			"__experimentalRole": "content"
 		},
 		"width": {
-			"type": "number"
+			"type": "string"
 		},
 		"height": {
-			"type": "number"
+			"type": "string"
 		},
 		"aspectRatio": {
 			"type": "string"

package/src/image/deprecated.js

@@ -740,4 +740,211 @@ const v6 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+/**
+ * Deprecation for converting to string width and height block attributes and
+ * removing the width and height img element attributes which are not needed
+ * as they get added by the TODO hook.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/53274
+ */
+const v7 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			__experimentalRole: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			__experimentalRole: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		anchor: true,
+		behaviors: {
+			lightbox: true,
+		},
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+	},
+	migrate( { width, height, ...attributes } ) {
+		return {
+			...attributes,
+			width: `${ width }px`,
+			height: `${ height }px`,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
+
+		const newRel = ! 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 ||
+				( 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,
+					height,
+				} }
+				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={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+export default [ v7, v6, v5, v4, v3, v2, v1 ];

package/src/image/image.js

@@ -114,6 +114,11 @@ export default function Image( {
 		linkTarget,
 		sizeSlug,
 	} = attributes;
+
+	// The only supported unit is px, so we can parseInt to strip the px here.
+	const numericWidth = width ? parseInt( width, 10 ) : undefined;
+	const numericHeight = height ? parseInt( height, 10 ) : undefined;
+
 	const imageRef = useRef();
 	const prevCaption = usePrevious( caption );
 	const [ showCaption, setShowCaption ] = useState( !! caption );
@@ -321,7 +326,12 @@ export default function Image( {
 
 	function updateAlignment( nextAlign ) {
 		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
+			? {
+					width: undefined,
+					height: undefined,
+					aspectRatio: undefined,
+					scale: undefined,
+			  }
 			: {};
 		setAttributes( {
 			...extraUpdatedAttributes,
@@ -472,33 +482,26 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					<DimensionsTool
-						value={ {
-							width: width && `${ width }px`,
-							height: height && `${ height }px`,
-							scale,
-							aspectRatio,
-						} }
-						onChange={ ( newValue ) => {
-							// Rebuilding the object forces setting `undefined`
-							// for values that are removed since setAttributes
-							// doesn't do anything with keys that aren't set.
-							setAttributes( {
-								width:
-									newValue.width &&
-									parseInt( newValue.width, 10 ),
-								height:
-									newValue.height &&
-									parseInt( newValue.height, 10 ),
-								scale: newValue.scale,
-								aspectRatio: newValue.aspectRatio,
-							} );
-						} }
-						defaultScale="cover"
-						defaultAspectRatio="auto"
-						scaleOptions={ scaleOptions }
-						unitsOptions={ dimensionsUnitsOptions }
-					/>
+					{ isResizable && (
+						<DimensionsTool
+							value={ { width, height, scale, aspectRatio } }
+							onChange={ ( newValue ) => {
+								// Rebuilding the object forces setting `undefined`
+								// for values that are removed since setAttributes
+								// doesn't do anything with keys that aren't set.
+								setAttributes( {
+									width: newValue.width,
+									height: newValue.height,
+									scale: newValue.scale,
+									aspectRatio: newValue.aspectRatio,
+								} );
+							} }
+							defaultScale="cover"
+							defaultAspectRatio="auto"
+							scaleOptions={ scaleOptions }
+							unitsOptions={ dimensionsUnitsOptions }
+						/>
+					) }
 					<ResolutionTool
 						value={ sizeSlug }
 						onChange={ updateImage }
@@ -587,8 +590,8 @@ export default function Image( {
 			<ImageEditor
 				id={ id }
 				url={ url }
-				width={ width }
-				height={ height }
+				width={ numericWidth }
+				height={ numericHeight }
 				clientWidth={ fallbackClientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
@@ -604,14 +607,18 @@ export default function Image( {
 	} else if ( ! isResizable ) {
 		img = <div style={ { width, height, aspectRatio } }>{ img }</div>;
 	} else {
+		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );
+		const customRatio = numericWidth / numericHeight;
 		const ratio =
-			( aspectRatio && evalAspectRatio( aspectRatio ) ) ||
-			( width && height && width / height ) ||
-			naturalWidth / naturalHeight ||
-			1;
-
-		const currentWidth = ! width && height ? height * ratio : width;
-		const currentHeight = ! height && width ? width / ratio : height;
+			numericRatio || customRatio || naturalWidth / naturalHeight || 1;
+		const currentWidth =
+			! numericWidth && numericHeight
+				? numericHeight * ratio
+				: numericWidth;
+		const currentHeight =
+			! numericHeight && numericWidth
+				? numericWidth / ratio
+				: numericHeight;
 
 		const minWidth =
 			naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
@@ -687,10 +694,14 @@ export default function Image( {
 				onResizeStart={ onResizeStart }
 				onResizeStop={ ( event, direction, elt ) => {
 					onResizeStop();
+					// Since the aspect ratio is locked when resizing, we can
+					// use the width of the resized element to calculate the
+					// height in CSS to prevent stretching when the max-width
+					// is reached.
 					setAttributes( {
-						width: elt.offsetWidth,
-						height: elt.offsetHeight,
-						aspectRatio: undefined,
+						width: `${ elt.offsetWidth }px`,
+						height: 'auto',
+						aspectRatio: `${ ratio }`,
 					} );
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }

package/src/image/save.js

@@ -61,8 +61,6 @@ export default function save( { attributes } ) {
 				width,
 				height,
 			} }
-			width={ width }
-			height={ height }
 			title={ title }
 		/>
 	);

package/src/post-navigation-link/index.php

@@ -34,6 +34,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
 
+	// Only use hardcoded values here, otherwise we need to add escaping where these values are used.
 	$arrow_map = array(
 		'none'    => '',
 		'arrow'   => array(
@@ -84,7 +85,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	}
 
 	// Display arrows.
-	if ( isset( $attributes['arrow'] ) && ! empty( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] ) {
+	if ( isset( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] && isset( $arrow_map[ $attributes['arrow'] ] ) ) {
 		$arrow = $arrow_map[ $attributes['arrow'] ][ $navigation_type ];
 
 		if ( 'next' === $navigation_type ) {