@wordpress/block-library 9.48.1 → 10.0.0

package/src/image/image.js

@@ -64,6 +64,12 @@ import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
 import { MediaControl } from '../utils/media-control';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import {
+	getActiveDimensionValue,
+	getDimensionResetAttributes,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../utils/style-state';
 import { useOpenImageMediaEditorModal } from './use-open-image-media-editor-modal';
 import {
 	MIN_SIZE,
@@ -73,9 +79,12 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	DimensionsTool,
+	isDefaultBlockStyleState,
+	ResolutionTool,
+	mediaEditKey,
+} = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
 	{
@@ -227,7 +236,6 @@ function ContentOnlyControls( {
 				>
 					<div className="wp-block-image__toolbar_content_textarea__container">
 						<TextControl
-							__next40pxDefaultSize
 							className="wp-block-image__toolbar_content_textarea"
 							label={ __( 'Title attribute' ) }
 							value={ attributes.title || '' }
@@ -644,7 +652,8 @@ export default function Image( {
 		isSingleSelected &&
 		canEditImage &&
 		! isEditingImage &&
-		! isContentOnlyMode;
+		! isContentOnlyMode &&
+		! isUploading;
 
 	function switchToCover() {
 		replaceBlocks(
@@ -673,14 +682,67 @@ export default function Image( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const selectedStyleState = useSelect(
+		( select ) => {
+			if ( ! isSingleSelected ) {
+				return undefined;
+			}
+			const { getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
+			return getSelectedBlockStyleState( clientId );
+		},
+		[ clientId, isSingleSelected ]
+	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const activeWidth = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'width',
+	} );
+	const activeHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'height',
+	} );
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+	} );
+	const activeScale = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'scale',
+		styleKey: 'objectFit',
+	} );
+	const setDimensionAttributes = ( nextDimensions ) => {
+		setAttributes(
+			getDimensionUpdateAttributes( {
+				style: attributes.style,
+				selectedState: selectedStyleState,
+				hasSelectedStyleState,
+				nextDimensions,
+				dimensionKeyMap: { scale: 'objectFit' },
+			} )
+		);
+	};
+
 	const dimensionsControl =
 		showDimensionsControls &&
 		( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
 			<DimensionsTool
+				key={ selectedStyleStateKey }
 				panelId={ clientId }
-				value={ { aspectRatio } }
+				value={ { aspectRatio: activeAspectRatio, scale: activeScale } }
 				onChange={ ( { aspectRatio: newAspectRatio } ) => {
-					setAttributes( {
+					setDimensionAttributes( {
 						aspectRatio: newAspectRatio,
 						scale: 'cover',
 					} );
@@ -690,26 +752,29 @@ export default function Image( {
 			/>
 		) : (
 			<DimensionsTool
+				key={ selectedStyleStateKey }
 				panelId={ clientId }
-				value={ { width, height, scale, aspectRatio } }
+				value={ {
+					width: activeWidth,
+					height: activeHeight,
+					scale: activeScale,
+					aspectRatio: activeAspectRatio,
+				} }
 				onChange={ ( {
 					width: newWidth,
 					height: newHeight,
 					scale: newScale,
 					aspectRatio: newAspectRatio,
 				} ) => {
-					// Rebuilding the object forces setting `undefined`
-					// for values that are removed since setAttributes
-					// doesn't do anything with keys that aren't set.
-					setAttributes( {
+					setDimensionAttributes( {
 						// CSS includes `height: auto`, but we need
 						// `width: auto` to fix the aspect ratio when
 						// only height is set due to the width and
 						// height attributes set via the server.
 						width: ! newWidth && newHeight ? 'auto' : newWidth,
 						height: newHeight,
-						scale: newScale,
 						aspectRatio: newAspectRatio,
+						scale: newScale,
 					} );
 				} }
 				defaultScale="cover"
@@ -742,14 +807,11 @@ 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,
@@ -767,7 +829,6 @@ export default function Image( {
 				titleBinding?.source
 			);
 			return {
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
 				lockUrlControls:
 					!! urlBinding &&
 					! urlBindingSource?.canUserEditValue?.( {
@@ -812,7 +873,6 @@ export default function Image( {
 		},
 		[
 			arePatternOverridesEnabled,
-			clientId,
 			context,
 			isSingleSelected,
 			metadata?.bindings,
@@ -1018,47 +1078,52 @@ export default function Image( {
 					</ToolsPanel>
 				</InspectorControls>
 			) }
-			{ ! hasSelectedStyleState && (
-				<InspectorControls
-					group="dimensions"
-					resetAllFilter={ ( attrs ) => ( {
-						...attrs,
-						aspectRatio: undefined,
-						width: undefined,
-						height: undefined,
-						scale: undefined,
-						focalPoint: undefined,
-					} ) }
-				>
-					{ dimensionsControl }
-					{ url && scale && (
-						<ToolsPanelItem
+			<InspectorControls
+				group="dimensions"
+				resetAllFilter={ ( attrs ) => {
+					return getDimensionResetAttributes( {
+						attributes: attrs,
+						selectedState: selectedStyleState,
+						hasSelectedStyleState,
+						keys: [ 'aspectRatio', 'height', 'objectFit', 'width' ],
+						defaultAttributes: {
+							aspectRatio: undefined,
+							width: undefined,
+							height: undefined,
+							scale: undefined,
+							focalPoint: undefined,
+						},
+					} );
+				} }
+			>
+				{ dimensionsControl }
+				{ ! hasSelectedStyleState && url && scale && (
+					<ToolsPanelItem
+						label={ __( 'Focal point' ) }
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( {
+								focalPoint: undefined,
+							} )
+						}
+						panelId={ clientId }
+					>
+						<FocalPointPicker
 							label={ __( 'Focal point' ) }
-							isShownByDefault
-							hasValue={ () => !! focalPoint }
-							onDeselect={ () =>
+							url={ url }
+							value={ focalPoint }
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+							onChange={ ( newFocalPoint ) =>
 								setAttributes( {
-									focalPoint: undefined,
+									focalPoint: newFocalPoint,
 								} )
 							}
-							panelId={ clientId }
-						>
-							<FocalPointPicker
-								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
-									setAttributes( {
-										focalPoint: newFocalPoint,
-									} )
-								}
-							/>
-						</ToolsPanelItem>
-					) }
-				</InspectorControls>
-			) }
+						/>
+					</ToolsPanelItem>
+				) }
+			</InspectorControls>
 			{ !! imageSizeOptions.length && (
 				<InspectorControls>
 					<ToolsPanel
@@ -1077,7 +1142,6 @@ export default function Image( {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }

package/src/image/index.php

@@ -390,7 +390,6 @@ function block_core_image_print_lightbox_overlay() {
 							data-wp-bind--style="state.imgStyles"
 							data-wp-bind--src="state.enlargedSrc"
 							data-wp-bind--srcset="state.enlargedSrcset"
-							data-wp-bind--srcset="state.enlargedSrcset"
 							sizes="100vw"
 						>
 					</figure>

package/src/image/test/use-open-image-media-editor-modal.js

@@ -45,8 +45,7 @@ jest.mock( '../../lock-unlock', () => ( {
 
 function createRegistry( {
 	getEditedEntityRecord = () => false,
-	getEntityRecord = () => undefined,
-	resolveGetEntityRecord = getEntityRecord,
+	resolveGetEntityRecord = () => undefined,
 } = {} ) {
 	const actions = {
 		invalidateResolution: jest.fn(),
@@ -54,7 +53,6 @@ function createRegistry( {
 	return {
 		select: jest.fn( () => ( {
 			getEditedEntityRecord,
-			getEntityRecord,
 		} ) ),
 		dispatch: jest.fn( () => actions ),
 		resolveSelect: jest.fn( () => ( {
@@ -169,11 +167,8 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: 'Original caption',
 			},
 			registryOptions: {
-				getEntityRecord: () => originalAttachment,
-				resolveGetEntityRecord: ( kind, name, attachmentId, query ) =>
-					query?.context === 'edit'
-						? updatedAttachment
-						: originalAttachment,
+				getEditedEntityRecord: () => originalAttachment,
+				resolveGetEntityRecord: () => updatedAttachment,
 			},
 		} );
 
@@ -181,13 +176,15 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			alt: 'Updated alt',
 			caption: 'Updated caption',
 		} );
-		expect( registry.actions.invalidateResolution ).toHaveBeenCalledWith(
-			'getEntityRecord',
-			[ 'postType', 'attachment', 1 ]
+		// A single, query-less resolution is invalidated: the hook reads,
+		// resolves, and invalidates the attachment through the entity's default
+		// (edit) context rather than an explicitly-keyed query.
+		expect( registry.actions.invalidateResolution ).toHaveBeenCalledTimes(
+			1
 		);
 		expect( registry.actions.invalidateResolution ).toHaveBeenCalledWith(
 			'getEntityRecord',
-			[ 'postType', 'attachment', 1, { context: 'edit' } ]
+			[ 'postType', 'attachment', 1 ]
 		);
 	} );
 
@@ -220,8 +217,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			1,
 			'postType',
 			'attachment',
-			1,
-			{ context: 'edit' }
+			1
 		);
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
@@ -263,8 +259,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			1,
 			'postType',
 			'attachment',
-			1,
-			{ context: 'edit' }
+			1
 		);
 		expect( openMediaEditorModal ).toHaveBeenCalledWith( {
 			id: 1,
@@ -299,7 +294,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: undefined,
 			},
 			registryOptions: {
-				getEntityRecord: () => ( {
+				getEditedEntityRecord: () => ( {
 					id: 1,
 					alt_text: '',
 					caption: {
@@ -314,8 +309,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 			1,
 			'postType',
 			'attachment',
-			1,
-			{ context: 'edit' }
+			1
 		);
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			caption: 'Updated attachment caption',
@@ -341,7 +335,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: '',
 			},
 			registryOptions: {
-				getEntityRecord: ( kind, name, attachmentId ) =>
+				getEditedEntityRecord: ( kind, name, attachmentId ) =>
 					attachmentId === 1 ? originalAttachment : undefined,
 				resolveGetEntityRecord: ( kind, name, attachmentId ) =>
 					attachmentId === 2 ? updatedAttachment : undefined,
@@ -371,7 +365,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		};
 		const deferredAttachment = createDeferred();
 		const registry = createRegistry( {
-			getEntityRecord: ( kind, name, attachmentId ) =>
+			getEditedEntityRecord: ( kind, name, attachmentId ) =>
 				attachmentId === 1 ? originalAttachment : undefined,
 			resolveGetEntityRecord: ( kind, name, attachmentId ) =>
 				attachmentId === 2 ? deferredAttachment.promise : undefined,
@@ -437,7 +431,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: '',
 			},
 			registryOptions: {
-				getEntityRecord: ( kind, name, attachmentId ) =>
+				getEditedEntityRecord: ( kind, name, attachmentId ) =>
 					attachmentId === 1
 						? originalAttachment
 						: {
@@ -469,7 +463,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: undefined,
 			},
 			registryOptions: {
-				getEntityRecord: () => ( {
+				getEditedEntityRecord: () => ( {
 					id: 1,
 					alt_text: '',
 					caption: { raw: 'Existing caption' },
@@ -526,7 +520,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: undefined,
 			},
 			registryOptions: {
-				getEntityRecord: () => ( {
+				getEditedEntityRecord: () => ( {
 					id: 1,
 					alt_text: 'Original alt',
 					caption: { raw: 'Existing caption' },
@@ -556,7 +550,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 				caption: { toString: () => '' },
 			},
 			registryOptions: {
-				getEntityRecord: () => ( {
+				getEditedEntityRecord: () => ( {
 					id: 1,
 					alt_text: 'Original alt',
 					caption: { raw: 'Existing caption' },
@@ -603,7 +597,7 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		};
 		const deferredAttachment = createDeferred();
 		const registry = createRegistry( {
-			getEntityRecord: () => ( {
+			getEditedEntityRecord: () => ( {
 				id: 1,
 				alt_text: '',
 				caption: { raw: '' },

package/src/image/transforms.js

@@ -52,10 +52,10 @@ const imageSchema = {
 	},
 };
 
-// Read a pixel dimension from an `<img>` HTML attribute and normalise it to
-// the `<value>px` form the Image block stores in its `width` / `height`
-// attributes. Non-integer values (e.g. `50%`) are dropped because the block
-// attribute round-trips through inline styles that expect pixel units.
+// Normalise an `<img>` pixel dimension attribute to the `<value>px` form the
+// Image block stores in its `width`/`height` attributes. Non-integer values
+// (e.g. `50%`) are dropped because the attribute round-trips through inline
+// styles that expect pixel units.
 function parsePixelDimension( value ) {
 	return value && /^\d+$/.test( value ) ? `${ value }px` : undefined;
 }
@@ -114,14 +114,39 @@ const transforms = {
 					anchorElement && anchorElement.className
 						? anchorElement.className
 						: undefined;
-				// Preserve explicit pixel dimensions set on the source `<img>`
-				// (e.g. legacy "Add Media" output: `<img width="77" height="77">`).
-				const width = parsePixelDimension(
+				// Pin only one dimension and let the other follow the aspect
+				// ratio via `auto`. Pinning both as fixed pixels stretches the
+				// image when a theme caps the width while the height stays
+				// fixed. So width sources use `height: 'auto'`; height-only
+				// sources use `width: 'auto'`.
+				const widthValue = parsePixelDimension(
 					img.getAttribute( 'width' )
 				);
-				const height = parsePixelDimension(
+				const heightValue = parsePixelDimension(
 					img.getAttribute( 'height' )
 				);
+				// When both dimensions are declared, preserve the source's
+				// shape via `aspectRatio` (mirroring the resize handle). CSS
+				// `aspect-ratio` needs no fixed dimensions, so the image keeps
+				// its proportions even when the `src` can't resolve to natural
+				// dimensions (e.g. an empty or blob `src`) — without it the
+				// `height: 'auto'` would collapse to `0`.
+				// `parseInt` is `NaN` for an absent dimension and `0` for a
+				// zero one (both falsy), so a bogus ratio is never stored.
+				const widthNumber = parseInt( widthValue, 10 );
+				const heightNumber = parseInt( heightValue, 10 );
+				const aspectRatio =
+					widthNumber && heightNumber
+						? String( widthNumber / heightNumber )
+						: undefined;
+				// A height-only source declares a single dimension, so it can't
+				// carry an aspect ratio: `width: 'auto'` is capped by
+				// `max-width: 100%` while the fixed height can still stretch a
+				// wide source. This is a known edge case (a panoramic image
+				// pinned by height only) left unsolved here.
+				const width =
+					widthValue || ( heightValue ? 'auto' : undefined );
+				const height = widthValue ? 'auto' : heightValue;
 				const attributes = getBlockAttributes(
 					'core/image',
 					node.outerHTML,
@@ -135,6 +160,7 @@ const transforms = {
 						anchor,
 						width,
 						height,
+						aspectRatio,
 					}
 				);
 

package/src/image/use-open-image-media-editor-modal.js

@@ -104,9 +104,6 @@ export function getSyncedImageBlockAttributes(
 }
 
 const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
-// Caption sync needs `caption.raw`; view/default attachment records can contain
-// only rendered caption data or be tied to an in-flight stale resolution.
-const ATTACHMENT_EDIT_QUERY = { context: 'edit' };
 
 function getAttachmentFallbackForEmptyBlockMetadata( { alt, caption } ) {
 	const attachment = {};
@@ -177,25 +174,23 @@ export function useOpenImageMediaEditorModal( {
 		};
 	}, [ alt, caption, id, url ] );
 
+	// Reads the cached attachment record. The `attachment` postType entity
+	// fetches with `context: 'edit'` by default, so `getEditedEntityRecord`
+	// returns the edit-context record — carrying `caption` as `{ raw }` and a
+	// usable `alt_text` — without us specifying a context. It is resolver-
+	// backed, so on a cold cache this also kicks off the fetch and returns a
+	// falsy value synchronously; that resolution shares its cache key with the
+	// `resolveAttachmentRecord` call below (both keyed on the no-query
+	// `getEntityRecord`), so the two dedupe into a single request.
 	const getCachedAttachmentRecord = useCallback(
-		( attachmentId ) => {
-			const { getEditedEntityRecord, getEntityRecord } =
-				registry.select( coreStore );
-			return (
-				getEditedEntityRecord(
+		( attachmentId ) =>
+			registry
+				.select( coreStore )
+				.getEditedEntityRecord(
 					'postType',
 					'attachment',
 					attachmentId
-				) ||
-				getEntityRecord(
-					'postType',
-					'attachment',
-					attachmentId,
-					ATTACHMENT_EDIT_QUERY
-				) ||
-				getEntityRecord( 'postType', 'attachment', attachmentId )
-			);
-		},
+				),
 		[ registry ]
 	);
 
@@ -204,18 +199,10 @@ export function useOpenImageMediaEditorModal( {
 			const resolveSelect = registry.resolveSelect( coreStore );
 
 			try {
-				return (
-					( await resolveSelect.getEntityRecord(
-						'postType',
-						'attachment',
-						attachmentId,
-						ATTACHMENT_EDIT_QUERY
-					) ) ||
-					( await resolveSelect.getEntityRecord(
-						'postType',
-						'attachment',
-						attachmentId
-					) )
+				return await resolveSelect.getEntityRecord(
+					'postType',
+					'attachment',
+					attachmentId
 				);
 			} catch {
 				return undefined;
@@ -226,8 +213,9 @@ export function useOpenImageMediaEditorModal( {
 
 	const resolveFreshAttachmentRecord = useCallback(
 		async ( attachmentId ) => {
-			// Bust cached records so resolveAttachmentRecord fetches the
-			// server state that reflects the media editor's saved changes.
+			// Invalidate the cached resolution so resolveAttachmentRecord
+			// re-fetches the server state that reflects the media editor's
+			// saved changes.
 			const { invalidateResolution } = registry.dispatch( coreStore );
 
 			invalidateResolution( 'getEntityRecord', [
@@ -235,12 +223,6 @@ export function useOpenImageMediaEditorModal( {
 				'attachment',
 				attachmentId,
 			] );
-			invalidateResolution( 'getEntityRecord', [
-				'postType',
-				'attachment',
-				attachmentId,
-				ATTACHMENT_EDIT_QUERY,
-			] );
 			return resolveAttachmentRecord( attachmentId );
 		},
 		[ registry, resolveAttachmentRecord ]
@@ -321,10 +303,10 @@ export function useOpenImageMediaEditorModal( {
 		}
 
 		// Snapshot the attachment's current metadata before the user makes
-		// any changes so handleMediaUpdate can compare against it later.
-		// Prefer a freshly resolved edit-context record for accuracy; fall
-		// back to whatever is in the cache, or a minimal object derived from
-		// the block's own attributes when nothing is cached yet.
+		// any changes so handleMediaUpdate can compare against it later. Use
+		// the cached record when it's already present; only resolve when
+		// nothing is cached yet, then fall back to a minimal object derived
+		// from the block's own attributes.
 		const cachedAttachmentRecord = getCachedAttachmentRecord( id );
 		const fallbackAttachmentRecord =
 			getAttachmentFallbackForEmptyBlockMetadata(

package/src/index.js

@@ -23,15 +23,10 @@ import HtmlRenderer from './utils/html-renderer';
 /**
  * Internal dependencies
  */
-// When IS_GUTENBERG_PLUGIN is set to false, imports of experimental blocks
-// are transformed by packages/block-library/src/index.js as follows:
-//    import * as experimentalBlock from './experimental-block'
-// becomes
-//    const experimentalBlock = null;
-// This enables webpack to eliminate the experimental blocks code from the
-// production build to make the final bundle smaller.
-//
-// See https://github.com/WordPress/gutenberg/pull/40655 for more context.
+// Experimental blocks are only registered in the Gutenberg plugin (see
+// `__experimentalRegisterExperimentalCoreBlocks`). `registerCoreBlocks`
+// filters them out via `isBlockMetadataExperimental`, so they are never
+// available in WordPress core regardless of what ends up in the bundle.
 import * as accordion from './accordion';
 import * as accordionItem from './accordion-item';
 import * as accordionHeading from './accordion-heading';
@@ -135,7 +130,6 @@ import * as siteTitle from './site-title';
 import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
-import * as tab from './tab';
 import * as tabPanel from './tab-panel';
 import * as tabPanels from './tab-panels';
 import * as table from './table';
@@ -287,7 +281,6 @@ const getAllBlocks = () => {
 	}
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
-		blocks.push( tab );
 		blocks.push( tabList );
 		blocks.push( tabs );
 		blocks.push( tabPanel );

package/src/list/ordered-list-settings.js

@@ -86,7 +86,6 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 					}
 				>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Start value' ) }
 						type="number"
 						onChange={ ( value ) => {