@wordpress/block-library 9.19.1 → 9.20.0

package/src/image/image.js

@@ -19,7 +19,11 @@ import {
 	DropdownMenu,
 	Popover,
 } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useResizeObserver,
+	useViewportMatch,
+} from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
@@ -34,7 +38,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	BlockSettingsMenuControls,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
@@ -54,7 +58,7 @@ import { Caption } from '../utils/caption';
  * Module constants
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
+import { MIN_SIZE, ALLOWED_MEDIA_TYPES, SIZED_LAYOUTS } from './constants';
 import { evalAspectRatio } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
@@ -280,12 +284,22 @@ export default function Image( {
 		lightbox,
 		metadata,
 	} = 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 [ imageElement, setImageElement ] = useState();
+	const [ resizeDelta, setResizeDelta ] = useState( null );
+	const [ pixelSize, setPixelSize ] = useState( {} );
+	const [ offsetTop, setOffsetTop ] = useState( 0 );
+	const setResizeObserved = useResizeObserver( ( [ entry ] ) => {
+		if ( ! resizeDelta ) {
+			const [ box ] = entry.borderBoxSize;
+			setPixelSize( { width: box.inlineSize, height: box.blockSize } );
+		}
+		// This is usually 0 unless the image height is less than the line-height.
+		setOffsetTop( entry.target.offsetTop );
+	} );
+	const effectResizeableBoxPlacement = useCallback( () => {
+		setOffsetTop( imageElement?.offsetTop ?? 0 );
+	}, [ imageElement ] );
+	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
 
@@ -369,34 +383,18 @@ export default function Image( {
 			.catch( () => {} );
 	}, [ id, url, isSingleSelected, externalBlob ] );
 
-	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
+	// Get naturalWidth and naturalHeight from image, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
 	// width and height is otherwise lost when switching between alignments.
 	// See: https://github.com/WordPress/gutenberg/pull/37210.
 	const { naturalWidth, naturalHeight } = useMemo( () => {
 		return {
 			naturalWidth:
-				imageRef.current?.naturalWidth ||
-				loadedNaturalWidth ||
-				undefined,
+				imageElement?.naturalWidth || loadedNaturalWidth || undefined,
 			naturalHeight:
-				imageRef.current?.naturalHeight ||
-				loadedNaturalHeight ||
-				undefined,
+				imageElement?.naturalHeight || loadedNaturalHeight || undefined,
 		};
-	}, [
-		loadedNaturalWidth,
-		loadedNaturalHeight,
-		imageRef.current?.complete,
-	] );
-
-	function onResizeStart() {
-		toggleSelection( false );
-	}
-
-	function onResizeStop() {
-		toggleSelection( true );
-	}
+	}, [ loadedNaturalWidth, loadedNaturalHeight, imageElement?.complete ] );
 
 	function onImageError() {
 		setHasImageErrored( true );
@@ -541,49 +539,49 @@ export default function Image( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	const dimensionsControl = (
-		<DimensionsTool
-			value={ { width, height, scale, aspectRatio } }
-			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( {
-					// 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,
+	const dimensionsControl =
+		isResizable &&
+		( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
+			<DimensionsTool
+				value={ { aspectRatio } }
+				onChange={ ( { aspectRatio: newAspectRatio } ) => {
+					setAttributes( {
+						aspectRatio: newAspectRatio,
+						scale: 'cover',
+					} );
+				} }
+				defaultAspectRatio="auto"
+				tools={ [ 'aspectRatio' ] }
+			/>
+		) : (
+			<DimensionsTool
+				value={ { width, height, scale, aspectRatio } }
+				onChange={ ( {
+					width: newWidth,
 					height: newHeight,
 					scale: newScale,
 					aspectRatio: newAspectRatio,
-				} );
-			} }
-			defaultScale="cover"
-			defaultAspectRatio="auto"
-			scaleOptions={ scaleOptions }
-			unitsOptions={ dimensionsUnitsOptions }
-		/>
-	);
-
-	const aspectRatioControl = (
-		<DimensionsTool
-			value={ { aspectRatio } }
-			onChange={ ( { aspectRatio: newAspectRatio } ) => {
-				setAttributes( {
-					aspectRatio: newAspectRatio,
-					scale: 'cover',
-				} );
-			} }
-			defaultAspectRatio="auto"
-			tools={ [ 'aspectRatio' ] }
-		/>
-	);
+				} ) => {
+					// Rebuilding the object forces setting `undefined`
+					// for values that are removed since setAttributes
+					// doesn't do anything with keys that aren't set.
+					setAttributes( {
+						// 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,
+					} );
+				} }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				scaleOptions={ scaleOptions }
+				unitsOptions={ dimensionsUnitsOptions }
+			/>
+		) );
 
 	const resetAll = () => {
 		setAttributes( {
@@ -603,10 +601,7 @@ export default function Image( {
 				resetAll={ resetAll }
 				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable &&
-					( parentLayoutType === 'grid'
-						? aspectRatioControl
-						: dimensionsControl ) }
+				{ dimensionsControl }
 			</ToolsPanel>
 		</InspectorControls>
 	);
@@ -835,10 +830,7 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable &&
-						( parentLayoutType === 'grid'
-							? aspectRatioControl
-							: dimensionsControl ) }
+					{ dimensionsControl }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -926,17 +918,19 @@ export default function Image( {
 					alt={ defaultedAlt }
 					onError={ onImageError }
 					onLoad={ onImageLoad }
-					ref={ imageRef }
+					ref={ setRefs }
 					className={ borderProps.className }
+					width={ naturalWidth }
+					height={ naturalHeight }
 					style={ {
-						width:
-							( width && height ) || aspectRatio
-								? '100%'
-								: undefined,
-						height:
-							( width && height ) || aspectRatio
-								? '100%'
-								: undefined,
+						aspectRatio,
+						...( resizeDelta
+							? {
+									width: pixelSize.width + resizeDelta.width,
+									height:
+										pixelSize.height + resizeDelta.height,
+							  }
+							: { width, height } ),
 						objectFit: scale,
 						...borderProps.style,
 						...shadowProps.style,
@@ -953,8 +947,7 @@ export default function Image( {
 				<ImageEditor
 					id={ id }
 					url={ url }
-					width={ numericWidth }
-					height={ numericHeight }
+					{ ...pixelSize }
 					naturalHeight={ naturalHeight }
 					naturalWidth={ naturalWidth }
 					onSaveImage={ ( imageAttributes ) =>
@@ -967,26 +960,21 @@ export default function Image( {
 				/>
 			</ImageWrapper>
 		);
-	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
-		img = (
-			<div style={ { width, height, aspectRatio } }>
-				<ImageWrapper href={ href }>{ img }</ImageWrapper>
-			</div>
-		);
 	} else {
+		img = <ImageWrapper href={ href }>{ img }</ImageWrapper>;
+	}
+
+	let resizableBox;
+	if (
+		isResizable &&
+		isSingleSelected &&
+		! isEditingImage &&
+		! SIZED_LAYOUTS.includes( parentLayoutType )
+	) {
 		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );
-		const customRatio = numericWidth / numericHeight;
+		const customRatio = pixelSize.width / pixelSize.height;
 		const naturalRatio = naturalWidth / naturalHeight;
 		const ratio = numericRatio || customRatio || naturalRatio || 1;
-		const currentWidth =
-			! numericWidth && numericHeight
-				? numericHeight * ratio
-				: numericWidth;
-		const currentHeight =
-			! numericHeight && numericWidth
-				? numericWidth / ratio
-				: numericHeight;
-
 		const minWidth =
 			naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
 		const minHeight =
@@ -1032,21 +1020,17 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-		img = (
+		resizableBox = (
 			<ResizableBox
+				ref={ effectResizeableBoxPlacement }
 				style={ {
-					display: 'block',
-					objectFit: scale,
-					aspectRatio:
-						! width && ! height && aspectRatio
-							? aspectRatio
-							: undefined,
-				} }
-				size={ {
-					width: currentWidth ?? 'auto',
-					height: currentHeight ?? 'auto',
+					position: 'absolute',
+					// To match the vertical-align: bottom of the img (from style.scss)
+					// syncs the top with the img. This matters when the img height is
+					// less than the line-height.
+					inset: `${ offsetTop }px 0 0 0`,
 				} }
-				showHandle={ isSingleSelected }
+				size={ pixelSize }
 				minWidth={ minWidth }
 				maxWidth={ maxResizeWidth }
 				minHeight={ minHeight }
@@ -1058,9 +1042,19 @@ export default function Image( {
 					bottom: true,
 					left: showLeftHandle,
 				} }
-				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt ) => {
-					onResizeStop();
+				onResizeStart={ () => {
+					toggleSelection( false );
+				} }
+				onResize={ ( event, direction, elt, delta ) => {
+					setResizeDelta( delta );
+				} }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					toggleSelection( true );
+					setResizeDelta( null );
+					setPixelSize( ( current ) => ( {
+						width: current.width + delta.width,
+						height: current.height + delta.height,
+					} ) );
 
 					// Clear hardcoded width if the resized width is close to the max-content width.
 					if (
@@ -1091,9 +1085,7 @@ export default function Image( {
 					} );
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
-			>
-				<ImageWrapper href={ href }>{ img }</ImageWrapper>
-			</ResizableBox>
+			/>
 		);
 	}
 
@@ -1139,6 +1131,7 @@ export default function Image( {
 			{ controls }
 			{ featuredImageControl }
 			{ img }
+			{ resizableBox }
 
 			<Caption
 				attributes={ attributes }

package/src/post-author/block.json

@@ -58,7 +58,6 @@
 		"color": {
 			"gradients": true,
 			"link": true,
-			"__experimentalDuotone": ".wp-block-post-author__avatar img",
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -78,6 +77,14 @@
 				"width": true,
 				"style": true
 			}
+		},
+		"filter": {
+			"duotone": true
+		}
+	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-post-author .wp-block-post-author__avatar img"
 		}
 	},
 	"editorStyle": "wp-block-post-author-editor",

package/src/site-logo/block.json

@@ -36,7 +36,6 @@
 		"align": true,
 		"alignWide": false,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -50,6 +49,9 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"filter": {
+			"duotone": true
 		}
 	},
 	"styles": [
@@ -60,6 +62,11 @@
 		},
 		{ "name": "rounded", "label": "Rounded" }
 	],
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-site-logo img, .wp-block-site-logo .components-placeholder__illustration, .wp-block-site-logo .components-placeholder::before"
+		}
+	},
 	"editorStyle": "wp-block-site-logo-editor",
 	"style": "wp-block-site-logo"
 }

package/src/social-links/block.json

@@ -50,6 +50,7 @@
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"anchor": true,
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
 		"layout": {
 			"allowSwitching": false,

package/src/table-of-contents/hooks.js

@@ -16,8 +16,8 @@ function getLatestHeadings( select, clientId ) {
 	const {
 		getBlockAttributes,
 		getBlockName,
-		getClientIdsWithDescendants,
 		getBlocksByName,
+		getClientIdsOfDescendants,
 	} = select( blockEditorStore );
 
 	// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
@@ -31,8 +31,11 @@ function getLatestHeadings( select, clientId ) {
 	const isPaginated = getBlocksByName( 'core/nextpage' ).length !== 0;
 	const { onlyIncludeCurrentPage } = getBlockAttributes( clientId ) ?? {};
 
+	// Get post-content block client ID.
+	const [ postContentClientId = '' ] = getBlocksByName( 'core/post-content' );
+
 	// Get the client ids of all blocks in the editor.
-	const allBlockClientIds = getClientIdsWithDescendants();
+	const allBlockClientIds = getClientIdsOfDescendants( postContentClientId );
 
 	// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
 	let tocPage = 1;