@wordpress/block-library 10.5.0 → 10.6.1-next.v.202609031004.0

package/src/icon/index.php

@@ -96,7 +96,17 @@ function render_block_core_icon( $attributes ) {
 	$processor = new WP_HTML_Tag_Processor( $svg );
 	if ( $processor->next_tag( 'svg' ) ) {
 		if ( ! empty( $styles['css'] ) ) {
-			$processor->set_attribute( 'style', $styles['css'] );
+			// Merge with the SVG's intrinsic style (e.g. `fill: none` on
+			// stroke-based icons) so it is preserved. The block styles come last
+			// so they win on any conflicting property.
+			$existing_style = $processor->get_attribute( 'style' );
+			$trimmed_style  = is_string( $existing_style )
+				? rtrim( trim( $existing_style ), ';' )
+				: '';
+			$merged_style   = '' !== $trimmed_style
+				? $trimmed_style . '; ' . $styles['css']
+				: $styles['css'];
+			$processor->set_attribute( 'style', $merged_style );
 		}
 
 		// Apply flip classes to the SVG.
@@ -115,11 +125,13 @@ function render_block_core_icon( $attributes ) {
 		if ( $rotation ) {
 			$current_style = $processor->get_attribute( 'style' ) ?? '';
 			$rotation_css  = 'rotate: ' . $rotation . 'deg;';
-			if ( $current_style ) {
-				$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
-			} else {
-				$processor->set_attribute( 'style', $rotation_css );
-			}
+			$trimmed_style = is_string( $current_style )
+				? rtrim( trim( $current_style ), ';' )
+				: '';
+			$merged_style  = '' !== $trimmed_style
+				? $trimmed_style . '; ' . $rotation_css
+				: $rotation_css;
+			$processor->set_attribute( 'style', $merged_style );
 		}
 
 		$svg = $processor->get_updated_html();

package/src/icon/style.scss

@@ -34,4 +34,11 @@
 :where(.wp-block-icon) svg {
 	width: 100%;
 	height: 100%;
+
+	// Maintain stroke-width: neutralize `vector-effect="non-scaling-stroke"` on
+	// shape elements so stroked icons continue to scale their strokes with the
+	// icon size, preserving existing visual behavior.
+	:where(path, rect, circle, ellipse, line, polygon, polyline) {
+		vector-effect: none;
+	}
 }

package/src/image/README.md

@@ -98,6 +98,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/image/{image.js → image.jsx}

@@ -316,7 +316,11 @@ export default function Image( {
 		setOffsetTop( imageElement?.offsetTop ?? 0 );
 	}, [ imageElement ] );
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
-	const { allowResize = true } = context;
+	const { allowResize = true, imageCrop = false } = context;
+	// Only a cropped gallery (flex layout) controls the image height via its
+	// own CSS. Grid galleries and standalone images keep the baseline
+	// `height: auto` so a theme can't squish them.
+	const isCroppedGalleryImage = imageCrop && parentLayoutType === 'flex';
 
 	const { image, attachmentResolutionError } = useSelect(
 		( select ) => {
@@ -1222,17 +1226,23 @@ export default function Image( {
 													? `${ width }px`
 													: width;
 										}
-										if (
-											height === 'auto' ||
-											height === undefined ||
-											height === null
-										) {
+										if ( height === 'auto' ) {
 											style.height = 'auto';
-										} else {
+										} else if (
+											height !== undefined &&
+											height !== null
+										) {
 											style.height =
 												typeof height === 'number'
 													? `${ height }px`
 													: height;
+										} else if ( ! isCroppedGalleryImage ) {
+											// Default to `height: auto` so a
+											// theme that sets an explicit height
+											// on images can't squish them. Inside
+											// a cropped gallery the gallery's own
+											// CSS controls the height instead.
+											style.height = 'auto';
 										}
 										return style;
 								  } )() ),

package/src/image/test/{use-open-image-media-editor-modal.js → use-open-image-media-editor-modal.jsdom.test.js}

@@ -2,6 +2,7 @@ import { act, renderHook } from '@testing-library/react';
 import { useRegistry, useSelect } from '@wordpress/data';
 import {
 	getImageBlockMetadataFromAttachment,
+	getNewAttachmentImageBlockAttributes,
 	getSyncedImageBlockAttributes,
 	useOpenImageMediaEditorModal,
 } from '../use-open-image-media-editor-modal';
@@ -94,6 +95,60 @@ async function runModalUpdate( {
 	return { setAttributes, registry, openMediaEditorModal };
 }
 
+// The attachment as it was before the edit. Its metadata matches the blocks
+// used below, so the metadata sync never contributes attributes and the
+// assertions stay about the ones derived from the edited attachment.
+const ORIGINAL_ATTACHMENT = {
+	id: 1,
+	alt_text: '',
+	caption: { raw: '' },
+};
+
+// Editing media saves to a new attachment, with its own sub-sizes, file and
+// attachment page.
+const CROPPED_ATTACHMENT = {
+	id: 2,
+	alt_text: '',
+	caption: { raw: '' },
+	source_url: 'cropped.jpg',
+	link: 'https://example.com/cropped/',
+	media_details: {
+		sizes: {
+			medium: { source_url: 'cropped-300x200.jpg' },
+			full: { source_url: 'cropped.jpg' },
+		},
+	},
+};
+
+// What the media editor reports after a crop, rotate or flip: it saved to a
+// new attachment, and reports that attachment's full-size file.
+const CROP_UPDATE = {
+	id: CROPPED_ATTACHMENT.id,
+	url: CROPPED_ATTACHMENT.source_url,
+};
+
+/**
+ * Registry options for an edit that saved to a new attachment: the pre-edit
+ * record is cached, and the edited one is only reachable by resolving it.
+ *
+ * @param {Object}  options             Options.
+ * @param {boolean} options.hasOriginal Whether the pre-edit attachment is
+ *                                      known at all; without it there is no
+ *                                      metadata baseline.
+ */
+function croppedAttachmentRecords( { hasOriginal = true } = {} ) {
+	return {
+		getEditedEntityRecord: ( kind, name, attachmentId ) =>
+			hasOriginal && attachmentId === ORIGINAL_ATTACHMENT.id
+				? ORIGINAL_ATTACHMENT
+				: undefined,
+		resolveGetEntityRecord: ( kind, name, attachmentId ) =>
+			attachmentId === CROPPED_ATTACHMENT.id
+				? CROPPED_ATTACHMENT
+				: undefined,
+	};
+}
+
 describe( 'useOpenImageMediaEditorModal', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -392,6 +447,121 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		} );
 	} );
 
+	it( 'keeps the selected image size when the edit created a new attachment', async () => {
+		const onUrlChange = jest.fn();
+		const { setAttributes } = await runModalUpdate( {
+			attributes: {
+				id: 1,
+				url: 'original-300x200.jpg',
+				alt: '',
+				caption: '',
+				sizeSlug: 'medium',
+			},
+			registryOptions: croppedAttachmentRecords(),
+			updatePayload: CROP_UPDATE,
+			hookOptions: { onUrlChange },
+		} );
+
+		// Everything lands in one update, so the block never renders against
+		// half-updated settings.
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 2,
+			url: 'cropped-300x200.jpg',
+		} );
+		// The loading state settles against the file the block will render,
+		// not the full-size file the media editor reported.
+		expect( onUrlChange ).toHaveBeenLastCalledWith( 'cropped-300x200.jpg' );
+	} );
+
+	it( 'falls back to the saved record when the refetch fails', async () => {
+		const { setAttributes } = await runModalUpdate( {
+			attributes: {
+				id: 1,
+				url: 'original-300x200.jpg',
+				alt: '',
+				caption: '',
+				sizeSlug: 'medium',
+				href: 'original.jpg',
+				linkDestination: 'media',
+			},
+			registryOptions: {
+				// The media editor put the saved record in the store, so it
+				// is cached even though refetching it fails.
+				getEditedEntityRecord: ( kind, name, attachmentId ) =>
+					attachmentId === ORIGINAL_ATTACHMENT.id
+						? ORIGINAL_ATTACHMENT
+						: CROPPED_ATTACHMENT,
+				resolveGetEntityRecord: ( kind, name, attachmentId ) => {
+					if ( attachmentId === CROPPED_ATTACHMENT.id ) {
+						throw new Error( 'Network error' );
+					}
+					return undefined;
+				},
+			},
+			updatePayload: CROP_UPDATE,
+		} );
+
+		// The size and link still follow the edited image, rather than the
+		// block half-updating to the new file at its old settings.
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 2,
+			url: 'cropped-300x200.jpg',
+			href: 'cropped.jpg',
+		} );
+	} );
+
+	it( 'derives the size of the edited image without a metadata baseline', async () => {
+		const { setAttributes, registry } = await runModalUpdate( {
+			// Custom metadata leaves the block with no fallback baseline, and
+			// the original attachment is unknown, so no metadata is synced.
+			attributes: {
+				id: 1,
+				url: 'original-300x200.jpg',
+				alt: 'Custom alt',
+				caption: 'Custom caption',
+				sizeSlug: 'medium',
+			},
+			registryOptions: croppedAttachmentRecords( { hasOriginal: false } ),
+			updatePayload: CROP_UPDATE,
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 2,
+			url: 'cropped-300x200.jpg',
+		} );
+		// The size is derived from a freshly resolved record for the edited
+		// attachment, not a stale cached one.
+		expect( registry.actions.invalidateResolution ).toHaveBeenCalledWith(
+			'getEntityRecord',
+			[ 'postType', 'attachment', 2 ]
+		);
+	} );
+
+	it( 'points a media file link at the edited image', async () => {
+		const { setAttributes } = await runModalUpdate( {
+			attributes: {
+				id: 1,
+				url: 'original.jpg',
+				alt: '',
+				caption: '',
+				href: 'original.jpg',
+				linkDestination: 'media',
+			},
+			registryOptions: croppedAttachmentRecords(),
+			updatePayload: CROP_UPDATE,
+		} );
+
+		expect( setAttributes ).toHaveBeenCalledTimes( 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( {
+			id: 2,
+			url: 'cropped.jpg',
+			href: 'cropped.jpg',
+		} );
+	} );
+
 	it( 'updates back to the previous attachment from the original modal callback', async () => {
 		const originalAttachment = {
 			id: 1,
@@ -924,3 +1094,147 @@ describe( 'getSyncedImageBlockAttributes', () => {
 		).toEqual( {} );
 	} );
 } );
+
+describe( 'getNewAttachmentImageBlockAttributes', () => {
+	const croppedAttachment = {
+		id: 2,
+		source_url: 'cropped.jpg',
+		link: 'https://example.com/cropped/',
+		media_details: {
+			sizes: {
+				medium: { source_url: 'cropped-300x200.jpg' },
+				full: { source_url: 'cropped.jpg' },
+			},
+		},
+	};
+
+	it( 'points the URL at the selected size on the new attachment', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'medium' },
+				croppedAttachment
+			)
+		).toEqual( { url: 'cropped-300x200.jpg' } );
+	} );
+
+	it( 'falls back to full when the new attachment lacks the selected size', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'large' },
+				croppedAttachment
+			)
+		).toEqual( { url: 'cropped.jpg', sizeSlug: 'full' } );
+	} );
+
+	it( 'falls back to full when the edited image is too small for any sub-size', () => {
+		// Cropping below the smallest registered size leaves
+		// `media_details.sizes` empty, so the block has to fall back to the
+		// file itself and stop reporting a size it no longer has.
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'medium' },
+				{
+					id: 2,
+					source_url: 'cropped-103x45.jpg',
+					media_details: { width: 103, height: 45, sizes: {} },
+				}
+			)
+		).toEqual( {
+			url: 'cropped-103x45.jpg',
+			sizeSlug: 'full',
+		} );
+	} );
+
+	it( 'makes no change when no full-size URL is available', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'large' },
+				{ id: 2, media_details: { sizes: { medium: {} } } }
+			)
+		).toEqual( {} );
+	} );
+
+	it( 'makes no change for the full size or an unset size', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'full' },
+				croppedAttachment
+			)
+		).toEqual( {} );
+		expect(
+			getNewAttachmentImageBlockAttributes( {}, croppedAttachment )
+		).toEqual( {} );
+	} );
+
+	it( 'makes no change when the attachment sizes are unknown', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'medium' },
+				{ id: 2 }
+			)
+		).toEqual( {} );
+	} );
+
+	it( 'makes no change when the attachment record is unknown', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'medium' },
+				undefined
+			)
+		).toBeUndefined();
+	} );
+
+	it( 'points a media file link at the new attachment file', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ sizeSlug: 'medium', linkDestination: 'media' },
+				croppedAttachment
+			)
+		).toEqual( {
+			url: 'cropped-300x200.jpg',
+			href: 'cropped.jpg',
+		} );
+	} );
+
+	it( 'points an attachment page link at the new attachment page', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ linkDestination: 'attachment' },
+				croppedAttachment
+			)
+		).toEqual( { href: 'https://example.com/cropped/' } );
+	} );
+
+	it( 'leaves custom and absent links alone', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ linkDestination: 'custom' },
+				croppedAttachment
+			)
+		).toEqual( {} );
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ linkDestination: 'none' },
+				croppedAttachment
+			)
+		).toEqual( {} );
+		expect(
+			getNewAttachmentImageBlockAttributes( {}, croppedAttachment )
+		).toEqual( {} );
+	} );
+
+	it( 'keeps the existing link when the new attachment record lacks it', () => {
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ linkDestination: 'media' },
+				{ id: 2 }
+			)
+		).toEqual( {} );
+		expect(
+			getNewAttachmentImageBlockAttributes(
+				{ linkDestination: 'attachment' },
+				{ id: 2 }
+			)
+		).toEqual( {} );
+	} );
+} );