@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.2.0

package/src/gallery/index.php

@@ -52,6 +52,41 @@ function block_core_gallery_render_context( $context, $parsed_block ) {
 
 add_filter( 'render_block_context', 'block_core_gallery_render_context', 10, 2 );
 
+/**
+ * Returns the column gap value used for Gallery image width calculations.
+ *
+ * @since 7.1.0
+ *
+ * @param string|array|null $gap          Gallery block gap value.
+ * @param string            $fallback_gap Fallback gap value.
+ * @return string Gallery column gap value.
+ */
+function block_core_gallery_get_column_gap_value( $gap, $fallback_gap ) {
+	if ( is_array( $gap ) ) {
+		$gap = $gap['left'] ?? $fallback_gap;
+	}
+
+	// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+	$gap = is_string( $gap ) ? $gap : '';
+
+	// Skip if gap value contains unsupported characters.
+	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+	// because we only want to match against the value, not the CSS attribute.
+	$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+
+	// Get spacing CSS variable from preset value if provided.
+	if ( is_string( $gap ) && str_contains( $gap, 'var:preset|spacing|' ) ) {
+		$index_to_splice = strrpos( $gap, '|' ) + 1;
+		$slug            = _wp_to_kebab_case( substr( $gap, $index_to_splice ) );
+		$gap             = "var(--wp--preset--spacing--$slug)";
+	}
+
+	$gap_column = ( null !== $gap && '' !== $gap ) ? $gap : $fallback_gap;
+
+	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
+	return '0' === $gap_column ? '0px' : $gap_column;
+}
+
 /**
  * Resolves a Gallery block's `dynamicContent` to an ordered list of image
  * attachment IDs.
@@ -272,6 +307,8 @@ function block_core_gallery_render_dynamic_image( $attachment_id, $attributes, $
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content, $block ) {
+	static $global_styles = null;
+
 	// In dynamic mode the gallery's images are resolved at render time instead of
 	// being authored as inner blocks, so `save.js` persists at most the
 	// gallery-level caption — a bare `<figcaption>`, or nothing when there is no
@@ -345,36 +382,15 @@ function block_core_gallery_render( $attributes, $content, $block ) {
 	// the current gap setting in order to maintain the number of flex columns
 	// so a css var is added to allow this.
 
-	$gap = $attributes['style']['spacing']['blockGap'] ?? null;
-	// Skip if gap value contains unsupported characters.
-	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
-	// because we only want to match against the value, not the CSS attribute.
-	if ( is_array( $gap ) ) {
-		foreach ( $gap as $key => $value ) {
-			// Make sure $value is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
-			$value = is_string( $value ) ? $value : '';
-			$value = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
-
-			// Get spacing CSS variable from preset value if provided.
-			if ( is_string( $value ) && str_contains( $value, 'var:preset|spacing|' ) ) {
-				$index_to_splice = strrpos( $value, '|' ) + 1;
-				$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
-				$value           = "var(--wp--preset--spacing--$slug)";
-			}
-
-			$gap[ $key ] = $value;
-		}
-	} else {
-		// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
-		$gap = is_string( $gap ) ? $gap : '';
-		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
-
-		// Get spacing CSS variable from preset value if provided.
-		if ( is_string( $gap ) && str_contains( $gap, 'var:preset|spacing|' ) ) {
-			$index_to_splice = strrpos( $gap, '|' ) + 1;
-			$slug            = _wp_to_kebab_case( substr( $gap, $index_to_splice ) );
-			$gap             = "var(--wp--preset--spacing--$slug)";
-		}
+	$style_attr = is_array( $attributes['style'] ?? null )
+		? $attributes['style']
+		: array();
+	if (
+		defined( 'IS_GUTENBERG_PLUGIN' ) &&
+		IS_GUTENBERG_PLUGIN &&
+		function_exists( 'gutenberg_resolve_style_state_aliases' )
+	) {
+		$style_attr = gutenberg_resolve_style_state_aliases( $style_attr, 'core/gallery' );
 	}
 
 	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
@@ -385,31 +401,75 @@ function block_core_gallery_render( $attributes, $content, $block ) {
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
 	$fallback_gap = 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
-	$gap_value    = $gap ? $gap : $fallback_gap;
-	$gap_column   = $gap_value;
 
-	if ( is_array( $gap_value ) ) {
-		$gap_row    = $gap_value['top'] ?? $fallback_gap;
-		$gap_column = $gap_value['left'] ?? $fallback_gap;
-		$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+	if ( null === $global_styles ) {
+		$global_styles = function_exists( 'wp_get_global_styles' ) ? wp_get_global_styles() : array();
 	}
 
-	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
-	if ( '0' === $gap_column ) {
-		$gap_column = '0px';
-	}
-
-	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
+	$global_gallery_styles = $global_styles['blocks']['core/gallery'] ?? array();
+	$global_gallery_gap    = $global_gallery_styles['spacing']['blockGap'] ?? $fallback_gap;
+	$has_block_gap         = is_array( $style_attr['spacing'] ?? null ) && array_key_exists( 'blockGap', $style_attr['spacing'] );
+	// Prefer the block's own gap value, then Gallery global styles. Missing
+	// values fall back to the Gallery blockGap default.
+	$block_gap  = $has_block_gap
+		? $style_attr['spacing']['blockGap']
+		: $global_gallery_gap;
+	$gap_column = block_core_gallery_get_column_gap_value( $block_gap, $fallback_gap );
+
+	// Set the CSS variable to the column value for Gallery's flex width calculations.
 	$gallery_styles = array(
 		array(
 			'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
 			'declarations' => array(
 				'--wp--style--unstable-gallery-gap' => $gap_column,
-				'gap'                               => $gap_value,
 			),
 		),
 	);
 
+	$global_settings          = wp_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = array();
+	foreach ( array( 'WP_Theme_JSON_Gutenberg', 'WP_Theme_JSON' ) as $theme_json_class_name ) {
+		if ( method_exists( $theme_json_class_name, 'get_viewport_media_queries' ) ) {
+			$responsive_media_queries = $theme_json_class_name::get_viewport_media_queries( $viewport_settings );
+			break;
+		}
+	}
+
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
+		$viewport_style                = $style_attr[ $breakpoint ] ?? null;
+		$has_viewport_block_gap        = is_array( $viewport_style ) &&
+			is_array( $viewport_style['spacing'] ?? null ) &&
+			array_key_exists( 'blockGap', $viewport_style['spacing'] );
+		$has_global_viewport_block_gap = is_array( $global_gallery_styles[ $breakpoint ]['spacing'] ?? null ) &&
+			array_key_exists( 'blockGap', $global_gallery_styles[ $breakpoint ]['spacing'] );
+
+		// Viewport-specific block values win. Gallery global viewport values
+		// only apply when the block has no base gap, so they do not override an instance value.
+		if ( $has_viewport_block_gap ) {
+			$viewport_gap = $viewport_style['spacing']['blockGap'];
+		} elseif ( ! $has_block_gap && $has_global_viewport_block_gap ) {
+			$viewport_gap = $global_gallery_styles[ $breakpoint ]['spacing']['blockGap'];
+		} else {
+			continue;
+		}
+
+		if ( null === $viewport_gap ) {
+			continue;
+		}
+
+		$gallery_styles[] = array(
+			'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+			'declarations' => array(
+				'--wp--style--unstable-gallery-gap' => block_core_gallery_get_column_gap_value(
+					$viewport_gap,
+					$fallback_gap
+				),
+			),
+			'rules_group'  => $media_query,
+		);
+	}
+
 	wp_style_engine_get_stylesheet_from_css_rules(
 		$gallery_styles,
 		array( 'context' => 'block-supports' )

package/src/group/transforms.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createBlock,
-	__experimentalCloneSanitizedBlock,
-} from '@wordpress/blocks';
+import { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -33,7 +30,7 @@ const transforms = {
 				// are removed both from their original location and within the
 				// new group block.
 				const groupInnerBlocks = blocks.map( ( block ) =>
-					__experimentalCloneSanitizedBlock( block )
+					cloneSanitizedBlock( block )
 				);
 
 				return createBlock(

package/src/icon/components/custom-inserter/icon-grid.js

@@ -3,13 +3,44 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
 import HtmlRenderer from '../../../utils/html-renderer';
 
-export default function IconGrid( { icons, onChange, attributes } ) {
+const BATCH_SIZE = 20;
+
+export default function IconGrid( { icons, onChange, value } ) {
+	const shownIcons = useAsyncList( icons, {
+		step: BATCH_SIZE,
+	} );
+
+	// Scroll the selected icon into view, but wait until enough icons render
+	// below it so it can be centered rather than stuck at the bottom. Skip it
+	// if the user has already scrolled the list.
+	const selectedIconRef = useRef();
+	const selectedIndex =
+		icons?.findIndex( ( icon ) => icon.name === value ) ?? -1;
+	const isReadyToScroll =
+		selectedIndex >= 0 &&
+		( shownIcons.length >= selectedIndex + BATCH_SIZE ||
+			shownIcons.length === icons.length );
+
+	useLayoutEffect( () => {
+		const node = selectedIconRef.current;
+		if ( ! isReadyToScroll || ! node ) {
+			return;
+		}
+		if ( getScrollContainer( node )?.scrollTop ) {
+			return;
+		}
+		node.scrollIntoView( { block: 'center' } );
+	}, [ isReadyToScroll ] );
+
 	return (
 		<div className="wp-block-icon__inserter-grid">
 			{ ! icons?.length ? (
@@ -21,26 +52,24 @@ export default function IconGrid( { icons, onChange, attributes } ) {
 					className="wp-block-icon__inserter-grid-icons-list"
 					aria-label={ __( 'Icon library' ) }
 				>
-					{ icons.map( ( icon ) => {
+					{ shownIcons.map( ( icon ) => {
 						return (
 							<Button
 								key={ icon.name }
+								ref={
+									icon.name === value
+										? selectedIconRef
+										: undefined
+								}
 								className="wp-block-icon__inserter-grid-icons-list-item"
 								onClick={ () => onChange( icon.name ) }
 								variant={
-									icon.name === attributes?.icon
-										? 'primary'
-										: undefined
+									icon.name === value ? 'primary' : undefined
 								}
 								__next40pxDefaultSize
 							>
 								<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
-									<HtmlRenderer
-										html={ icon.content }
-										wrapperProps={ {
-											style: { width: '24px' },
-										} }
-									/>
+									<HtmlRenderer html={ icon.content } />
 								</span>
 								<span className="wp-block-icon__inserter-grid-icons-list-item-title">
 									{ icon.label }

package/src/icon/components/custom-inserter/index.js

@@ -2,9 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, SearchControl } from '@wordpress/components';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { Modal, SearchControl, Spinner } from '@wordpress/components';
+import { Stack, Tabs } from '@wordpress/ui';
+import { useState, useMemo } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,27 +15,56 @@ import { useDebounce } from '@wordpress/compose';
 import IconGrid from './icon-grid';
 import { normalizeSearchInput } from '../../../utils/search-patterns';
 
-export default function CustomInserterModal( {
-	icons = [],
-	setInserterOpen,
-	attributes,
-	setAttributes,
-} ) {
+export default function CustomInserterModal( { onClose, value, onChange } ) {
 	const [ searchInput, setSearchInput ] = useState( '' );
+	const [ currentCollection, setCurrentCollection ] = useState( null );
 
 	const debouncedSetSearchInput = useDebounce( setSearchInput, 300 );
 
-	const setIcon = useCallback(
-		( name ) => {
-			setAttributes( {
-				icon: name,
-			} );
-			setInserterOpen( false );
+	const collections = useSelect(
+		( select ) =>
+			select( coreDataStore ).getEntityRecords(
+				'root',
+				'iconCollection'
+			),
+		[]
+	);
+
+	// Default to the collection the selected icon belongs to, otherwise the
+	// first collection.
+	const selectedCollection = value?.split( '/' )[ 0 ];
+	const collectionSlug =
+		currentCollection ??
+		( collections?.some( ( { slug } ) => slug === selectedCollection )
+			? selectedCollection
+			: collections?.[ 0 ]?.slug ) ??
+		null;
+
+	const { icons, hasResolvedIcons } = useSelect(
+		( select ) => {
+			if ( collectionSlug === null ) {
+				return { icons: null, hasResolvedIcons: false };
+			}
+			const query =
+				collectionSlug === '' ? {} : { collection: collectionSlug };
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreDataStore );
+			return {
+				icons: getEntityRecords( 'root', 'icon', query ),
+				hasResolvedIcons: hasFinishedResolution( 'getEntityRecords', [
+					'root',
+					'icon',
+					query,
+				] ),
+			};
 		},
-		[ setAttributes, setInserterOpen ]
+		[ collectionSlug ]
 	);
 
 	const filteredIcons = useMemo( () => {
+		if ( ! icons ) {
+			return [];
+		}
 		if ( searchInput ) {
 			const input = normalizeSearchInput( searchInput );
 			return icons.filter( ( icon ) => {
@@ -52,22 +84,63 @@ export default function CustomInserterModal( {
 		<Modal
 			className="wp-block-icon__inserter-modal"
 			title={ __( 'Icon library' ) }
-			onRequestClose={ () => setInserterOpen( false ) }
+			onRequestClose={ onClose }
 			isFullScreen
 		>
-			<div className="wp-block-icon__inserter">
-				<div className="wp-block-icon__inserter-header">
+			<Tabs.Root
+				className="wp-block-icon__inserter"
+				orientation="vertical"
+				value={ collectionSlug }
+				onValueChange={ setCurrentCollection }
+			>
+				<Stack
+					direction="column"
+					gap="lg"
+					className="wp-block-icon__inserter-sidebar"
+				>
 					<SearchControl
 						value={ searchInput }
 						onChange={ debouncedSetSearchInput }
 					/>
-				</div>
-				<IconGrid
-					icons={ filteredIcons }
-					onChange={ setIcon }
-					attributes={ attributes }
-				/>
-			</div>
+					<Tabs.List>
+						<Tabs.Tab value="">{ __( 'All' ) }</Tabs.Tab>
+						{ collections?.map( ( collection ) => (
+							<Tabs.Tab
+								key={ collection.slug }
+								value={ collection.slug }
+							>
+								{ collection.label }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.List>
+				</Stack>
+				{ [ { slug: '' }, ...( collections ?? [] ) ].map(
+					( collection ) => (
+						<Tabs.Panel
+							tabIndex={ -1 }
+							key={ collection.slug }
+							value={ collection.slug }
+							className="wp-block-icon__inserter-panel"
+						>
+							{ ! hasResolvedIcons ? (
+								<div
+									className="wp-block-icon__inserter-loading"
+									role="status"
+									aria-label={ __( 'Loading…' ) }
+								>
+									<Spinner />
+								</div>
+							) : (
+								<IconGrid
+									icons={ filteredIcons }
+									onChange={ onChange }
+									value={ value }
+								/>
+							) }
+						</Tabs.Panel>
+					)
+				) }
+			</Tabs.Root>
 		</Modal>
 	);
 }

package/src/icon/edit.js

@@ -74,20 +74,12 @@ export function Edit( { attributes, setAttributes } ) {
 	const borderProps = useBorderProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 
-	const { selectedIcon, allIcons = [] } = useSelect(
+	const selectedIcon = useSelect(
 		( select ) => {
-			const { getEntityRecord, getEntityRecords } =
-				select( coreDataStore );
-			return {
-				selectedIcon: icon
-					? getEntityRecord( 'root', 'icon', icon )
-					: null,
-				allIcons: isInserterOpen
-					? getEntityRecords( 'root', 'icon' )
-					: undefined,
-			};
+			const { getEntityRecord } = select( coreDataStore );
+			return icon ? getEntityRecord( 'root', 'icon', icon ) : null;
 		},
-		[ isInserterOpen, icon ]
+		[ icon ]
 	);
 
 	const iconToDisplay = selectedIcon?.content || '';
@@ -218,7 +210,7 @@ export function Edit( { attributes, setAttributes } ) {
 			{ blockControls }
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
-				{ icon ? (
+				{ iconToDisplay ? (
 					<HtmlRenderer
 						html={ iconToDisplay }
 						wrapperProps={ {
@@ -258,10 +250,12 @@ export function Edit( { attributes, setAttributes } ) {
 			</div>
 			{ isInserterOpen && (
 				<CustomInserterModal
-					icons={ allIcons }
-					setInserterOpen={ setInserterOpen }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
+					onClose={ () => setInserterOpen( false ) }
+					value={ attributes.icon }
+					onChange={ ( name ) => {
+						setAttributes( { icon: name } );
+						setInserterOpen( false );
+					} }
 				/>
 			) }
 		</>

package/src/icon/editor.scss

@@ -1,22 +1,38 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
 
 .wp-block[data-align="center"] > .wp-block-icon {
 	display: flex;
 	justify-content: center;
 }
 
-// Style for the icon library modal.
-.wp-block-icon__inserter {
-	padding: 0 $grid-unit-30;
-	margin: 0 (-1 * $grid-unit-30);
+.wp-block-icon__inserter-sidebar {
+	padding-bottom: $grid-unit-30;
+
+	@include break-medium() {
+		overflow-x: visible;
+		overflow-y: auto;
+		position: absolute;
+		top: $header-height + $grid-unit-10;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding-top: $grid-unit-30;
+		padding-inline: $grid-unit-30;
+	}
+}
+
+.wp-block-icon__inserter-panel {
+	@include break-medium() {
+		margin-inline-start: $sidebar-width;
+	}
 }
 
-.wp-block-icon__inserter-header {
-	align-items: center;
+.wp-block-icon__inserter-loading {
 	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-20;
+	justify-content: center;
+	padding: $grid-unit-30;
 }
 
 .wp-block-icon__inserter-grid-icons-list {
@@ -37,6 +53,14 @@
 
 .wp-block-icon__inserter-grid-icons-list-item-icon {
 	padding: $grid-unit-15;
+
+	// Fit any icon within 24x24. The viewBox preserves the aspect ratio, so
+	// non-square icons are scaled and centered without distortion.
+	svg {
+		display: block;
+		width: $icon-size;
+		height: $icon-size;
+	}
 }
 
 .wp-block-icon__inserter-grid-icons-list-item-title {
@@ -45,6 +69,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	width: 100%;
 }
 
 .wp-block-icon__toolbar-content {

package/src/image/README.md

@@ -79,7 +79,7 @@ _Defined via the [`styles`](https://developer.wordpress.org/block-editor/referen
 
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
-- **dimensions**: `.wp-block-image img`
+- **dimensions**: `.wp-block-image img, .wp-block-image .components-placeholder`
 - **border**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **shadow**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **filter**:

package/src/image/block.json

@@ -141,7 +141,7 @@
 		}
 	},
 	"selectors": {
-		"dimensions": ".wp-block-image img",
+		"dimensions": ".wp-block-image img, .wp-block-image .components-placeholder",
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"filter": {

package/src/image/edit.js

@@ -31,7 +31,6 @@ import { store as uploadStore } from '@wordpress/upload-media';
  * Internal dependencies
  */
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
-import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
 import Image from './image';
 import { isValidFileType } from './utils';
 import { useMaxWidthObserver } from './use-max-width-observer';
@@ -238,57 +237,6 @@ export function ImageEdit( {
 			return;
 		}
 
-		// Switch to a converted GIF video block when the selected media is
-		// an animated GIF whose sideloaded video companion is available.
-		// Triggering off the upload's onChange (rather than watching the
-		// attachment record) means already-saved image blocks are left
-		// alone on page load - the explicit "Display as video" toolbar
-		// button is the path for converting those. `animated_video` is
-		// only ever set on GIF image attachments, so its presence is a
-		// sufficient signal that this swap applies.
-		//
-		// A gallery only accepts `core/image` children, so the swap is
-		// skipped there; the converted video is still sideloaded and
-		// stored for use elsewhere.
-		const rootClientId = getBlockRootClientId( clientId );
-		const isInGallery =
-			!! rootClientId && getBlockName( rootClientId ) === 'core/gallery';
-		if (
-			! isInGallery &&
-			media.media_details?.animated_video &&
-			media.url
-		) {
-			const dir = media.url.slice( 0, media.url.lastIndexOf( '/' ) + 1 );
-			const poster = media.media_details.animated_video_poster;
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceBlock(
-				clientId,
-				createBlock( 'core/video', {
-					...getCarriedGifConversionAttributes( attributes ),
-					id: media.id,
-					src: dir + media.media_details.animated_video,
-					poster: poster ? dir + poster : undefined,
-					caption: media.caption?.raw ?? media.caption,
-					controls: false,
-					loop: true,
-					autoplay: true,
-					muted: true,
-					playsInline: true,
-					/*
-					 * Carry the GIF's intrinsic dimensions so the <video> keeps
-					 * its aspect ratio from the first paint. Without them the
-					 * element collapses to the browser-default size and then
-					 * jumps once the poster/metadata load, which shows up as a
-					 * brief duplicated image during the swap.
-					 */
-					width: media.media_details.width,
-					height: media.media_details.height,
-				} )
-			);
-			setTemporaryURL();
-			return;
-		}
-
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available

package/src/image/editor.scss

@@ -129,6 +129,7 @@ figure.wp-block-image:not(.wp-block) {
 	width: 100%;
 	overflow: hidden;
 
+	// stylelint-disable selector-class-pattern -- react-easy-crop library class names.
 	.reactEasyCrop_Container {
 		// The linked Image block has `pointer-events: none` applied. Override it
 		// here to enable the crop action.
@@ -143,6 +144,7 @@ figure.wp-block-image:not(.wp-block) {
 			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
 		}
 	}
+	// stylelint-enable selector-class-pattern
 }
 
 .wp-block-image__crop-icon {