@wordpress/block-library 9.19.0 → 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/latest-posts/edit.js

@@ -126,6 +126,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					orderby: orderBy,
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
+					ignore_sticky: true,
 				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
 			);
 

package/src/navigation/use-template-part-area-label.js

@@ -36,24 +36,24 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
+			const { getCurrentTheme, getEditedEntityRecord } =
+				select( coreStore );
+
+			const currentTheme = getCurrentTheme();
 			const defaultTemplatePartAreas =
-				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-					?.default_template_part_areas || [];
+				currentTheme?.default_template_part_areas || [];
 
 			const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( {
 				...item,
 				icon: getTemplatePartIcon( item.icon ),
 			} ) );
 
-			const { getCurrentTheme, getEditedEntityRecord } =
-				select( coreStore );
-
 			for ( const templatePartClientId of parentTemplatePartClientIds ) {
 				const templatePartBlock = getBlock( templatePartClientId );
 
 				// The 'area' usually isn't stored on the block, but instead
 				// on the entity.
-				const { theme = getCurrentTheme()?.stylesheet, slug } =
+				const { theme = currentTheme?.stylesheet, slug } =
 					templatePartBlock.attributes;
 				const templatePartEntityId = createTemplatePartId(
 					theme,

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/post-author/edit.js

@@ -99,7 +99,7 @@ function PostAuthorEdit( {
 	const showAuthorControl =
 		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
-	if ( ! supportsAuthor ) {
+	if ( ! supportsAuthor && postType !== undefined ) {
 		return (
 			<div { ...blockProps }>
 				{ sprintf(

package/src/post-author-name/edit.js

@@ -132,15 +132,15 @@ function PostAuthorNameEdit( {
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ supportsAuthor
-					? displayAuthor
-					: sprintf(
+				{ ! supportsAuthor && postType !== undefined
+					? sprintf(
 							// translators: %s: Name of the post type e.g: "post".
 							__(
 								'This post type (%s) does not support the author.'
 							),
 							postType
-					  ) }
+					  )
+					: displayAuthor }
 			</div>
 		</>
 	);

package/src/query/edit/inspector-controls/index.js

@@ -35,6 +35,7 @@ import {
 	useAllowedControls,
 	isControlAllowed,
 	useTaxonomies,
+	useOrderByOptions,
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
@@ -111,6 +112,7 @@ export default function QueryInspectorControls( props ) {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 
+	const orderByOptions = useOrderByOptions( postType );
 	const showInheritControl =
 		! isSingular && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
@@ -329,7 +331,7 @@ export default function QueryInspectorControls( props ) {
 							isShownByDefault
 						>
 							<OrderControl
-								{ ...{ order, orderBy } }
+								{ ...{ order, orderBy, orderByOptions } }
 								onChange={ setQuery }
 							/>
 						</ToolsPanelItem>

package/src/query/edit/inspector-controls/order-control.js

@@ -4,7 +4,7 @@
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const orderOptions = [
+const defaultOrderByOptions = [
 	{
 		label: __( 'Newest to oldest' ),
 		value: 'date/desc',
@@ -24,14 +24,20 @@ const orderOptions = [
 		value: 'title/desc',
 	},
 ];
-function OrderControl( { order, orderBy, onChange } ) {
+
+function OrderControl( {
+	order,
+	orderBy,
+	orderByOptions = defaultOrderByOptions,
+	onChange,
+} ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
-			options={ orderOptions }
+			options={ orderByOptions }
 			onChange={ ( value ) => {
 				const [ newOrderBy, newOrder ] = value.split( '/' );
 				onChange( { order: newOrder, orderBy: newOrderBy } );

package/src/query/utils.js

@@ -6,6 +6,7 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import {
 	cloneBlock,
 	getBlockSupport,
@@ -13,6 +14,7 @@ import {
 } from '@wordpress/blocks';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+/** @typedef {import('@wordpress/components/build-types/query-controls/types').OrderByOption} OrderByOption */
 
 /**
  * @typedef IHasNameAndId
@@ -186,6 +188,62 @@ export function useIsPostTypeHierarchical( postType ) {
 	);
 }
 
+/**
+ * List of avaiable options to order by.
+ *
+ * @param {string} postType The post type to check.
+ * @return {OrderByOption[]} List of order options.
+ */
+export function useOrderByOptions( postType ) {
+	const supportsCustomOrder = useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return !! type?.supports?.[ 'page-attributes' ];
+		},
+		[ postType ]
+	);
+
+	return useMemo( () => {
+		const orderByOptions = [
+			{
+				label: __( 'Newest to oldest' ),
+				value: 'date/desc',
+			},
+			{
+				label: __( 'Oldest to newest' ),
+				value: 'date/asc',
+			},
+			{
+				/* translators: Label for ordering posts by title in ascending order. */
+				label: __( 'A → Z' ),
+				value: 'title/asc',
+			},
+			{
+				/* translators: Label for ordering posts by title in descending order. */
+				label: __( 'Z → A' ),
+				value: 'title/desc',
+			},
+		];
+
+		if ( supportsCustomOrder ) {
+			orderByOptions.push(
+				{
+					/* translators: Label for ordering posts by ascending menu order. */
+					label: __( 'Ascending by order' ),
+					value: 'menu_order/asc',
+				},
+				{
+					/* translators: Label for ordering posts by descending menu order. */
+					label: __( 'Descending by order' ),
+					value: 'menu_order/desc',
+				}
+			);
+		}
+
+		return orderByOptions;
+	}, [ supportsCustomOrder ] );
+}
+
 /**
  * Hook that returns the query properties' names defined by the active
  * block variation, to determine which block's filters to show.

package/src/query-total/block.json

@@ -23,9 +23,9 @@
 		},
 		"color": {
 			"gradients": true,
-			"text": true,
 			"__experimentalDefaultControls": {
-				"background": true
+				"background": true,
+				"text": true
 			}
 		},
 		"typography": {

package/src/query-total/index.php

@@ -23,7 +23,7 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
 		$query_to_use = $wp_query;
-		$current_page = max( 1, get_query_var( 'paged', 1 ) );
+		$current_page = max( 1, (int) get_query_var( 'paged', 1 ) );
 	} else {
 		$page_key     = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 		$current_page = isset( $_GET[ $page_key ] ) ? (int) $_GET[ $page_key ] : 1;
@@ -31,7 +31,7 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	}
 
 	$max_rows       = $query_to_use->found_posts;
-	$posts_per_page = $query_to_use->get( 'posts_per_page' );
+	$posts_per_page = (int) $query_to_use->get( 'posts_per_page' );
 
 	// Calculate the range of posts being displayed.
 	$start = ( $current_page - 1 ) * $posts_per_page + 1;

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/site-title/index.php

@@ -31,7 +31,7 @@ function render_block_core_site_title( $attributes ) {
 	}
 
 	if ( $attributes['isLink'] ) {
-		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$aria_current = ! is_paged() && ( is_front_page() || is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) ? ' aria-current="page"' : '';
 		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
 
 		$site_title = sprintf(

package/src/social-links/block.json

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