@wordpress/block-library 8.13.0 → 8.14.0

package/src/image/edit.js

@@ -183,8 +183,6 @@ export function ImageEdit( {
 		// Reset the dimension attributes if changing to a different image.
 		if ( ! media.id || media.id !== id ) {
 			additionalAttributes = {
-				width: undefined,
-				height: undefined,
 				// Fallback to size "full" if there's no default image size.
 				// It means the image is smaller, and the block will use a full-size URL.
 				sizeSlug: hasDefaultSize( media, imageDefaultSize )
@@ -248,8 +246,6 @@ export function ImageEdit( {
 			setAttributes( {
 				url: newURL,
 				id: undefined,
-				width: undefined,
-				height: undefined,
 				sizeSlug: imageDefaultSize,
 			} );
 		}

package/src/image/image.js

@@ -4,13 +4,15 @@
 import { isBlobURL } from '@wordpress/blob';
 import {
 	ExternalLink,
-	PanelBody,
 	ResizableBox,
 	Spinner,
 	TextareaControl,
 	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useViewportMatch, usePrevious } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -18,7 +20,6 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalImageSizeControl as ImageSizeControl,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
@@ -26,6 +27,7 @@ import {
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	useEffect,
@@ -34,7 +36,7 @@ import {
 	useRef,
 	useCallback,
 } from '@wordpress/element';
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import {
 	createBlock,
@@ -53,6 +55,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
 import { isExternalImage } from './edit';
@@ -61,6 +64,22 @@ import { isExternalImage } from './edit';
  * Module constants
  */
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
+import { evalAspectRatio } from './utils';
+
+const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
+
+const scaleOptions = [
+	{
+		value: 'cover',
+		label: _x( 'Cover', 'Scale option for dimensions control' ),
+		help: __( 'Image covers the space evenly.' ),
+	},
+	{
+		value: 'contain',
+		label: _x( 'Contain', 'Scale option for dimensions control' ),
+		help: __( 'Image is contained without distortion.' ),
+	},
+];
 
 export default function Image( {
 	temporaryURL,
@@ -90,6 +109,8 @@ export default function Image( {
 		title,
 		width,
 		height,
+		aspectRatio,
+		scale,
 		linkTarget,
 		sizeSlug,
 	} = attributes;
@@ -272,8 +293,6 @@ export default function Image( {
 
 		setAttributes( {
 			url: newUrl,
-			width: undefined,
-			height: undefined,
 			sizeSlug: newSizeSlug,
 		} );
 	}
@@ -329,6 +348,13 @@ export default function Image( {
 		);
 	}
 
+	// TODO: Can allow more units after figuring out how they should interact
+	// with the ResizableBox and ImageEditor components. Calculations later on
+	// for those components are currently assuming px units.
+	const dimensionsUnitsOptions = useCustomUnits( {
+		availableUnits: [ 'px' ],
+	} );
+
 	const controls = (
 		<>
 			<BlockControls group="block">
@@ -407,41 +433,78 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () =>
+						setAttributes( {
+							width: undefined,
+							height: undefined,
+							scale: undefined,
+							aspectRatio: undefined,
+						} )
+					}
+				>
 					{ ! multiImageSelection && (
-						<TextareaControl
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
-							value={ alt }
-							onChange={ updateAlt }
-							help={
-								<>
-									<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-										{ __(
-											'Describe the purpose of the image.'
-										) }
-									</ExternalLink>
-									<br />
-									{ __( 'Leave empty if decorative.' ) }
-								</>
+							isShownByDefault={ true }
+							hasValue={ () => alt !== '' }
+							onDeselect={ () =>
+								setAttributes( { alt: undefined } )
 							}
-						/>
+						>
+							<TextareaControl
+								label={ __( 'Alternative text' ) }
+								value={ alt }
+								onChange={ updateAlt }
+								help={
+									<>
+										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											{ __(
+												'Describe the purpose of the image.'
+											) }
+										</ExternalLink>
+										<br />
+										{ __( 'Leave empty if decorative.' ) }
+									</>
+								}
+								__nextHasNoMarginBottom
+							/>
+						</ToolsPanelItem>
 					) }
-					<ImageSizeControl
-						onChangeImage={ updateImage }
-						onChange={ ( value ) => setAttributes( value ) }
-						slug={ sizeSlug }
-						width={ width }
-						height={ height }
-						imageSizeOptions={ imageSizeOptions }
-						isResizable={ isResizable }
-						imageWidth={ naturalWidth }
-						imageHeight={ naturalHeight }
-						imageSizeHelp={ __(
-							'Select the size of the source image.'
-						) }
+					<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 }
+					/>
+					<ResolutionTool
+						value={ sizeSlug }
+						onChange={ updateImage }
+						options={ imageSizeOptions }
 					/>
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
@@ -483,9 +546,6 @@ export default function Image( {
 
 	const borderProps = useBorderProps( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
-	const hasCustomBorder =
-		!! borderProps.className ||
-		( borderProps.style && Object.keys( borderProps.style ).length > 0 );
 
 	let img = (
 		// Disable reason: Image itself is not meant to be interactive, but
@@ -504,25 +564,20 @@ export default function Image( {
 				} }
 				ref={ imageRef }
 				className={ borderProps.className }
-				style={ borderProps.style }
+				style={ {
+					width:
+						( width && height ) || aspectRatio ? '100%' : 'inherit',
+					height:
+						( width && height ) || aspectRatio ? '100%' : 'inherit',
+					objectFit: scale,
+					...borderProps.style,
+				} }
 			/>
 			{ temporaryURL && <Spinner /> }
 		</>
 		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 	);
 
-	let imageWidthWithinContainer;
-	let imageHeightWithinContainer;
-
-	if ( clientWidth && naturalWidth && naturalHeight ) {
-		const exceedMaxWidth = naturalWidth > clientWidth;
-		const ratio = naturalHeight / naturalWidth;
-		imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth;
-		imageHeightWithinContainer = exceedMaxWidth
-			? clientWidth * ratio
-			: naturalHeight;
-	}
-
 	// clientWidth needs to be a number for the image Cropper to work, but sometimes it's 0
 	// So we try using the imageRef width first and fallback to clientWidth.
 	const fallbackClientWidth = imageRef.current?.width || clientWidth;
@@ -546,13 +601,18 @@ export default function Image( {
 				borderProps={ isRounded ? undefined : borderProps }
 			/>
 		);
-	} else if ( ! isResizable || ! imageWidthWithinContainer ) {
-		img = <div style={ { width, height } }>{ img }</div>;
+	} else if ( ! isResizable ) {
+		img = <div style={ { width, height, aspectRatio } }>{ img }</div>;
 	} else {
-		const currentWidth = width || imageWidthWithinContainer;
-		const currentHeight = height || imageHeightWithinContainer;
+		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;
 
-		const ratio = naturalWidth / naturalHeight;
 		const minWidth =
 			naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
 		const minHeight =
@@ -600,16 +660,24 @@ export default function Image( {
 
 		img = (
 			<ResizableBox
+				style={ {
+					display: 'block',
+					objectFit: scale,
+					aspectRatio:
+						! width && ! height && aspectRatio
+							? aspectRatio
+							: undefined,
+				} }
 				size={ {
-					width: width ?? 'auto',
-					height: height && ! hasCustomBorder ? height : 'auto',
+					width: currentWidth ?? 'auto',
+					height: currentHeight ?? 'auto',
 				} }
 				showHandle={ isSelected }
 				minWidth={ minWidth }
 				maxWidth={ maxWidthBuffer }
 				minHeight={ minHeight }
 				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
+				lockAspectRatio={ ratio }
 				enable={ {
 					top: false,
 					right: showRightHandle,
@@ -617,11 +685,12 @@ export default function Image( {
 					left: showLeftHandle,
 				} }
 				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop={ ( event, direction, elt ) => {
 					onResizeStop();
 					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
+						width: elt.offsetWidth,
+						height: elt.offsetHeight,
+						aspectRatio: undefined,
 					} );
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }

package/src/image/save.js

@@ -24,6 +24,8 @@ export default function save( { attributes } ) {
 		linkClass,
 		width,
 		height,
+		aspectRatio,
+		scale,
 		id,
 		linkTarget,
 		sizeSlug,
@@ -52,7 +54,13 @@ export default function save( { attributes } ) {
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
-			style={ borderProps.style }
+			style={ {
+				...borderProps.style,
+				aspectRatio,
+				objectFit: scale,
+				width,
+				height,
+			} }
 			width={ width }
 			height={ height }
 			title={ title }

package/src/image/style.scss

@@ -184,11 +184,12 @@
 	width: 100vw;
 	height: 100vh;
 	visibility: hidden;
+	cursor: zoom-out;
 
 	.close-button {
 		position: absolute;
-		top: 12.5px;
-		right: 12.5px;
+		top: calc(env(safe-area-inset-top) + 12.5px);
+		right: calc(env(safe-area-inset-right) + 12.5px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
@@ -231,6 +232,18 @@
 	}
 
 	&.fade {
+		.wp-block-image {
+			padding: 40px 0;
+
+			@media screen and (min-width: 480px) {
+				padding: 40px;
+			}
+
+			@media screen and (min-width: 1920px) {
+				padding: 40px 80px;
+			}
+		}
+
 		&.active {
 			visibility: visible;
 			animation: both turn-on-visibility 0.25s;

package/src/image/utils.js

@@ -3,6 +3,22 @@
  */
 import { NEW_TAB_REL } from './constants';
 
+/**
+ * Evaluates a CSS aspect-ratio property value as a number.
+ *
+ * Degenerate or invalid ratios behave as 'auto'. And 'auto' ratios return NaN.
+ *
+ * @see https://drafts.csswg.org/css-sizing-4/#aspect-ratio
+ *
+ * @param {string} value CSS aspect-ratio property value.
+ * @return {number} Numerical aspect ratio or NaN if invalid.
+ */
+export function evalAspectRatio( value ) {
+	const [ width, height = 1 ] = value.split( '/' ).map( Number );
+	const aspectRatio = width / height;
+	return aspectRatio === Infinity || aspectRatio === 0 ? NaN : aspectRatio;
+}
+
 export function removeNewTabRel( currentRel ) {
 	let newRel = currentRel;
 

package/src/image/{interactivity.js → view-interactivity.js}

@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { store } from '../utils/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -22,32 +22,43 @@ store( {
 		core: {
 			image: {
 				showLightbox: ( { context, event } ) => {
+					// We can't initialize the lightbox until the reference
+					// image is loaded, otherwise the UX is broken.
+					if ( ! context.core.image.imageLoaded ) {
+						return;
+					}
 					context.core.image.initialized = true;
 					context.core.image.lastFocusedElement =
 						window.document.activeElement;
 					context.core.image.scrollDelta = 0;
 
+					context.core.image.lightboxEnabled = true;
+					if ( context.core.image.lightboxAnimation === 'zoom' ) {
+						setZoomStyles(
+							event.target.nextElementSibling,
+							context,
+							event
+						);
+					}
+					// Hide overflow only when the animation is in progress,
+					// otherwise the removal of the scrollbars will draw attention
+					// to itself and look like an error
+					document.documentElement.classList.add(
+						'has-lightbox-open'
+					);
+
 					// Since the img is hidden and its src not loaded until
 					// the lightbox is opened, let's create an img element on the fly
 					// so we can get the dimensions we need to calculate the styles
+					context.core.image.preloadInitialized = true;
 					const imgDom = document.createElement( 'img' );
-
 					imgDom.onload = function () {
-						// Enable the lightbox only after the image
-						// is loaded to prevent flashing of unstyled content
-						context.core.image.lightboxEnabled = true;
-						if ( context.core.image.lightboxAnimation === 'zoom' ) {
-							setZoomStyles( imgDom, context, event );
-						}
-
-						// Hide overflow only when the animation is in progress,
-						// otherwise the removal of the scrollbars will draw attention
-						// to itself and look like an error
-						document.documentElement.classList.add(
-							'has-lightbox-open'
-						);
+						context.core.image.activateLargeImage = true;
 					};
-					imgDom.setAttribute( 'src', context.core.image.imageSrc );
+					imgDom.setAttribute(
+						'src',
+						context.core.image.imageUploadedSrc
+					);
 				},
 				hideLightbox: async ( { context, event } ) => {
 					context.core.image.hideAnimationEnabled = true;
@@ -122,6 +133,16 @@ store( {
 						}
 					}
 				},
+				preloadLightboxImage: ( { context } ) => {
+					if ( ! context.core.image.preloadInitialized ) {
+						context.core.image.preloadInitialized = true;
+						const imgDom = document.createElement( 'img' );
+						imgDom.setAttribute(
+							'src',
+							context.core.image.imageUploadedSrc
+						);
+					}
+				},
 			},
 		},
 	},
@@ -131,9 +152,15 @@ store( {
 				roleAttribute: ( { context } ) => {
 					return context.core.image.lightboxEnabled ? 'dialog' : '';
 				},
-				imageSrc: ( { context } ) => {
+				responsiveImgSrc: ( { context } ) => {
+					return context.core.image.activateLargeImage &&
+						context.core.image.hideAnimationEnabled
+						? ''
+						: context.core.image.imageCurrentSrc;
+				},
+				enlargedImgSrc: ( { context } ) => {
 					return context.core.image.initialized
-						? context.core.image.imageSrc
+						? context.core.image.imageUploadedSrc
 						: '';
 				},
 			},
@@ -142,6 +169,18 @@ store( {
 	effects: {
 		core: {
 			image: {
+				setCurrentSrc: ( { context, ref } ) => {
+					if ( ref.complete ) {
+						context.core.image.imageLoaded = true;
+						context.core.image.imageCurrentSrc = ref.currentSrc;
+					} else {
+						ref.addEventListener( 'load', function () {
+							context.core.image.imageLoaded = true;
+							context.core.image.imageCurrentSrc =
+								this.currentSrc;
+						} );
+					}
+				},
 				initLightbox: async ( { context, ref } ) => {
 					context.core.image.figureRef =
 						ref.querySelector( 'figure' );
@@ -163,51 +202,61 @@ store( {
 } );
 
 function setZoomStyles( imgDom, context, event ) {
-	let targetWidth = imgDom.naturalWidth;
-	let targetHeight = imgDom.naturalHeight;
+	// Typically, we use the image's full-sized dimensions. If those
+	// dimensions have not been set (i.e. an external image with only one size),
+	// the image's dimensions in the lightbox are the same
+	// as those of the image in the content.
+	let targetWidth =
+		context.core.image.targetWidth !== 'none'
+			? context.core.image.targetWidth
+			: event.target.nextElementSibling.naturalWidth;
+	let targetHeight =
+		context.core.image.targetHeight !== 'none'
+			? context.core.image.targetHeight
+			: event.target.nextElementSibling.naturalHeight;
 
-	const verticalPadding = 40;
+	// Since the lightbox image has `position:absolute`, it
+	// ignores its parent's padding, so we need to set padding here
+	// to calculate dimensions and positioning.
 
-	// As per the design, let's allow the image to stretch
-	// to the full width of its containing figure, but for the height,
-	// constrain it with a fixed padding
-	const containerWidth = context.core.image.figureRef.clientWidth;
+	// As per the design, let's constrain the height with fixed padding
+	const containerOuterHeight = window.innerHeight;
+	const verticalPadding = 40;
+	const containerInnerHeight = containerOuterHeight - verticalPadding * 2;
 
-	// The lightbox image has `positione:absolute` and
-	// ignores its parent's padding, so let's set the padding here,
-	// to be used when calculating the image width and positioning
+	// Let's set a variable horizontal padding based on the container width
+	const containerOuterWidth = window.innerWidth;
 	let horizontalPadding = 0;
-	if ( containerWidth > 480 ) {
+	if ( containerOuterWidth > 480 ) {
 		horizontalPadding = 40;
-	} else if ( containerWidth > 1920 ) {
+	} else if ( containerOuterWidth > 1920 ) {
 		horizontalPadding = 80;
 	}
-
-	const containerHeight =
-		context.core.image.figureRef.clientHeight - verticalPadding * 2;
+	const containerInnerWidth = containerOuterWidth - horizontalPadding * 2;
 
 	// Check difference between the image and figure dimensions
 	const widthOverflow = Math.abs(
-		Math.min( containerWidth - targetWidth, 0 )
+		Math.min( containerInnerWidth - targetWidth, 0 )
 	);
 	const heightOverflow = Math.abs(
-		Math.min( containerHeight - targetHeight, 0 )
+		Math.min( containerInnerHeight - targetHeight, 0 )
 	);
 
-	// If image is larger than its container any dimension, resize along its largest axis.
-	// For vertically oriented devices, always maximize the width.
+	// If the image is larger than the container, let's resize
+	// it along the greater axis relative to the container
 	if ( widthOverflow > 0 || heightOverflow > 0 ) {
-		if (
-			widthOverflow >= heightOverflow ||
-			containerHeight >= containerWidth
-		) {
-			targetWidth = containerWidth - horizontalPadding * 2;
+		const containerInnerAspectRatio =
+			containerInnerWidth / containerInnerHeight;
+		const imageAspectRatio = targetWidth / targetHeight;
+
+		if ( imageAspectRatio > containerInnerAspectRatio ) {
+			targetWidth = containerInnerWidth;
 			targetHeight =
-				imgDom.naturalHeight * ( targetWidth / imgDom.naturalWidth );
+				( targetWidth * imgDom.naturalHeight ) / imgDom.naturalWidth;
 		} else {
-			targetHeight = containerHeight;
+			targetHeight = containerInnerHeight;
 			targetWidth =
-				imgDom.naturalWidth * ( targetHeight / imgDom.naturalHeight );
+				( targetHeight * imgDom.naturalWidth ) / imgDom.naturalHeight;
 		}
 	}
 
@@ -221,16 +270,16 @@ function setZoomStyles( imgDom, context, event ) {
 
 	// Get values used to center the image
 	let targetLeft = 0;
-	if ( targetWidth >= containerWidth ) {
+	if ( targetWidth >= containerInnerWidth ) {
 		targetLeft = horizontalPadding;
 	} else {
-		targetLeft = ( containerWidth - targetWidth ) / 2;
+		targetLeft = ( containerOuterWidth - targetWidth ) / 2;
 	}
 	let targetTop = 0;
-	if ( targetHeight >= containerHeight ) {
+	if ( targetHeight >= containerInnerHeight ) {
 		targetTop = verticalPadding;
 	} else {
-		targetTop = ( containerHeight - targetHeight ) / 2 + verticalPadding;
+		targetTop = ( containerOuterHeight - targetHeight ) / 2;
 	}
 
 	const root = document.documentElement;

package/src/index.js

@@ -142,7 +142,6 @@ const getAllBlocks = () => {
 		buttons,
 		calendar,
 		categories,
-		...( window.wp && window.wp.oldEditor ? [ classic ] : [] ), // Only add the classic block in WP Context.
 		code,
 		column,
 		columns,
@@ -229,6 +228,24 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
+
+	// When in a WordPress context, conditionally
+	// add the classic block and TinyMCE editor
+	// under any of the following conditions:
+	//   - the current post contains a classic block
+	//   - the experiment to disable TinyMCE isn't active.
+	//   - a query argument specifies that TinyMCE should be loaded
+	if (
+		window?.wp?.oldEditor &&
+		( window?.wp?.needsClassicBlock ||
+			! window?.__experimentalDisableTinymce ||
+			!! new URLSearchParams( window?.location?.search ).get(
+				'requiresTinymce'
+			) )
+	) {
+		blocks.push( classic );
+	}
+
 	return blocks.filter( Boolean );
 };