@wordpress/block-library 9.19.2 → 9.21.0

package/src/button/edit.js

@@ -15,7 +15,13 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useRef,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	TextControl,
 	ToolbarButton,
@@ -219,6 +225,63 @@ function ButtonEdit( props ) {
 	const nofollow = !! rel?.includes( NOFOLLOW_REL );
 	const isLinkTag = 'a' === TagName;
 
+	const {
+		createPageEntity,
+		userCanCreatePages,
+		lockUrlControls = false,
+	} = useSelect(
+		( select ) => {
+			if ( ! isSelected ) {
+				return {};
+			}
+
+			const _settings = select( blockEditorStore ).getSettings();
+
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
+
+			return {
+				createPageEntity: _settings.__experimentalCreatePageEntity,
+				userCanCreatePages: _settings.__experimentalUserCanCreatePages,
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					! blockBindingsSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
+			};
+		},
+		[ context, isSelected, metadata?.bindings?.url ]
+	);
+
+	async function handleCreate( pageTitle ) {
+		const page = await createPageEntity( {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: page.type,
+			title: page.title.rendered,
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
+	function createButtonText( searchTerm ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: search term. */
+				__( 'Create page: <mark>%s</mark>' ),
+				searchTerm
+			),
+			{ mark: <mark /> }
+		);
+	}
+
 	function startEditing( event ) {
 		event.preventDefault();
 		setIsEditingURL( true );
@@ -249,29 +312,6 @@ function ButtonEdit( props ) {
 	const useEnterRef = useEnter( { content: text, clientId } );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
-	const { lockUrlControls = false } = useSelect(
-		( select ) => {
-			if ( ! isSelected ) {
-				return {};
-			}
-
-			const blockBindingsSource = getBlockBindingsSource(
-				metadata?.bindings?.url?.source
-			);
-
-			return {
-				lockUrlControls:
-					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue?.( {
-						select,
-						context,
-						args: metadata?.bindings?.url?.args,
-					} ),
-			};
-		},
-		[ context, isSelected, metadata?.bindings?.url ]
-	);
-
 	const [ fluidTypographySettings, layout ] = useSettings(
 		'typography.fluid',
 		'layout'
@@ -400,6 +440,11 @@ function ButtonEdit( props ) {
 							} }
 							forceIsEditingLink={ isEditingURL }
 							settings={ LINK_SETTINGS }
+							createSuggestion={
+								createPageEntity && handleCreate
+							}
+							withCreateSuggestion={ userCanCreatePages }
+							createSuggestionButtonText={ createButtonText }
 						/>
 					</Popover>
 				) }

package/src/categories/edit.js

@@ -125,7 +125,7 @@ export default function CategoriesEdit( {
 					<RichText
 						className="wp-block-categories__label"
 						aria-label={ __( 'Label text' ) }
-						placeholder={ taxonomy.name }
+						placeholder={ taxonomy?.name }
 						withoutInteractiveFormatting
 						value={ label }
 						onChange={ ( html ) =>
@@ -134,7 +134,7 @@ export default function CategoriesEdit( {
 					/>
 				) : (
 					<VisuallyHidden as="label" htmlFor={ selectId }>
-						{ label ? label : taxonomy.name }
+						{ label ? label : taxonomy?.name }
 					</VisuallyHidden>
 				) }
 				<select id={ selectId }>
@@ -142,7 +142,7 @@ export default function CategoriesEdit( {
 						{ sprintf(
 							/* translators: %s: taxonomy's singular name */
 							__( 'Select %s' ),
-							taxonomy.labels.singular_name
+							taxonomy?.labels?.singular_name
 						) }
 					</option>
 					{ categoriesList.map( ( category ) =>

package/src/comment-template/hooks.js

@@ -107,13 +107,21 @@ const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
 			} ),
 			method: 'HEAD',
 			parse: false,
-		} ).then( ( res ) => {
-			const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
-			setDefaultPages( {
-				...defaultPages,
-				[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
+		} )
+			.then( ( res ) => {
+				const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
+				setDefaultPages( {
+					...defaultPages,
+					[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
+				} );
+			} )
+			.catch( () => {
+				// There's no 0th page, but we can't know the number of pages, fallback to 1.
+				setDefaultPages( {
+					...defaultPages,
+					[ key ]: 1,
+				} );
 			} );
-		} );
 	}, [ defaultPage, postId, perPage, setDefaultPages ] );
 
 	// The oldest one is always the first one.

package/src/cover/block.json

@@ -111,7 +111,6 @@
 			}
 		},
 		"color": {
-			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
 			"heading": true,
 			"text": true,
 			"background": false,
@@ -139,6 +138,14 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"filter": {
+			"duotone": true
+		}
+	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background"
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

package/src/embed/edit.js

@@ -172,7 +172,13 @@ const EmbedEdit = ( props ) => {
 			// When obtaining an incoming preview,
 			// we set the attributes derived from the preview data.
 			const mergedAttributes = getMergedAttributes();
-			setAttributes( mergedAttributes );
+			const hasChanges = Object.keys( mergedAttributes ).some(
+				( key ) => mergedAttributes[ key ] !== attributes[ key ]
+			);
+
+			if ( hasChanges ) {
+				setAttributes( mergedAttributes );
+			}
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(

package/src/image/constants.js

@@ -6,3 +6,4 @@ export const LINK_DESTINATION_CUSTOM = 'custom';
 export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
+export const SIZED_LAYOUTS = [ 'flex', 'grid' ];

package/src/image/edit.js

@@ -116,9 +116,9 @@ export function ImageEdit( {
 	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
 	// This won't work for them because the container width changes with the image.
 	// TODO: Find a way to observe the container width for flex and grid layouts.
+	const layoutType = parentLayout?.type || parentLayout?.default?.type;
 	const isMaxWidthContainerWidth =
-		! parentLayout ||
-		( parentLayout.type !== 'flex' && parentLayout.type !== 'grid' );
+		! layoutType || ( layoutType !== 'flex' && layoutType !== 'grid' );
 	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver();
 
 	const [ placeholderResizeListener, { width: placeholderWidth } ] =
@@ -452,7 +452,7 @@ export function ImageEdit( {
 					context={ context }
 					clientId={ clientId }
 					blockEditingMode={ blockEditingMode }
-					parentLayoutType={ parentLayout?.type }
+					parentLayoutType={ layoutType }
 					maxContentWidth={ maxContentWidth }
 				/>
 				<MediaPlaceholder

package/src/image/editor.scss

@@ -48,19 +48,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
-.wp-block-image .components-resizable-box__container {
-	// Using "display: table" because:
-	// - it visually hides empty white space in between elements
-	// - it allows the element to be as wide as its contents (instead of 100% width, as it would be with `display: block`)
-	display: table;
-	img {
-		display: block;
-		width: inherit;
-		height: inherit;
-	}
-}
-
 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
 	position: absolute;
 	left: 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,13 +38,13 @@ 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';
 import { crop, overlayText, upload, chevronDown } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore, useEntityProp } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -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,14 +284,23 @@ 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 );
 
 	const image = useSelect(
 		( select ) =>
@@ -299,7 +312,7 @@ export default function Image( {
 
 	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, canInsertBlockType } =
+			const { getBlockRootClientId, canInsertBlockType, getSettings } =
 				select( blockEditorStore );
 
 			const rootClientId = getBlockRootClientId( clientId );
@@ -317,10 +330,13 @@ export default function Image( {
 		},
 		[ clientId ]
 	);
+	const { getBlock, getSettings } = useSelect( blockEditorStore );
 
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const [
@@ -367,36 +383,20 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSingleSelected, externalBlob ] );
+	}, [ id, url, isSingleSelected, externalBlob, getSettings ] );
 
-	// 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 +541,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 +603,7 @@ export default function Image( {
 				resetAll={ resetAll }
 				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable &&
-					( parentLayoutType === 'grid'
-						? aspectRatioControl
-						: dimensionsControl ) }
+				{ dimensionsControl }
 			</ToolsPanel>
 		</InspectorControls>
 	);
@@ -835,10 +832,7 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable &&
-						( parentLayoutType === 'grid'
-							? aspectRatioControl
-							: dimensionsControl ) }
+					{ dimensionsControl }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -899,13 +893,6 @@ export default function Image( {
 	const { postType, postId, queryId } = context;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 
-	const [ , setFeaturedImage ] = useEntityProp(
-		'postType',
-		postType,
-		'featured_media',
-		postId
-	);
-
 	let img =
 		temporaryURL && hasImageErrored ? (
 			// Show a placeholder during upload when the blob URL can't be loaded. This can
@@ -926,17 +913,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 +942,7 @@ export default function Image( {
 				<ImageEditor
 					id={ id }
 					url={ url }
-					width={ numericWidth }
-					height={ numericHeight }
+					{ ...pixelSize }
 					naturalHeight={ naturalHeight }
 					naturalWidth={ naturalWidth }
 					onSaveImage={ ( imageAttributes ) =>
@@ -967,26 +955,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 +1015,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 +1037,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 +1080,7 @@ export default function Image( {
 					} );
 				} }
 				resizeRatio={ align === 'center' ? 2 : 1 }
-			>
-				<ImageWrapper href={ href }>{ img }</ImageWrapper>
-			</ResizableBox>
+			/>
 		);
 	}
 
@@ -1111,7 +1098,9 @@ export default function Image( {
 	 * Set the post's featured image with the current image.
 	 */
 	const setPostFeatureImage = () => {
-		setFeaturedImage( id );
+		editEntityRecord( 'postType', postType, postId, {
+			featured_media: id,
+		} );
 		createSuccessNotice( __( 'Post featured image updated.' ), {
 			type: 'snackbar',
 		} );
@@ -1139,6 +1128,7 @@ export default function Image( {
 			{ controls }
 			{ featuredImageControl }
 			{ img }
+			{ resizableBox }
 
 			<Caption
 				attributes={ attributes }