@wordpress/block-library 10.2.0 → 10.4.0

package/src/image/image.js

@@ -1,6 +1,4 @@
-/**
- * WordPress dependencies
- */
+import clsx from 'clsx';
 import {
 	ExternalLink,
 	FocalPointPicker,
@@ -52,10 +50,6 @@ 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 } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import { isExternalImage } from './edit';
@@ -390,6 +384,12 @@ export default function Image( {
 	);
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
 	const cropButtonRef = useRef();
+	// URL of a freshly generated file (crop/rotate result) from the media
+	// editor that the browser may not have finished loading; cleared by the
+	// <img> load/error handlers, or by the settle effect below when the
+	// rendered image already shows it.
+	const [ pendingSwapUrl, setPendingSwapUrl ] = useState();
+	const isSwappingMedia = !! pendingSwapUrl;
 	const handleMediaEditorModalClose = useCallback(
 		() => cropButtonRef.current?.focus(),
 		[]
@@ -398,6 +398,7 @@ export default function Image( {
 		attributes,
 		setAttributes,
 		onClose: handleMediaEditorModalClose,
+		onUrlChange: setPendingSwapUrl,
 	} );
 
 	const {
@@ -485,18 +486,34 @@ export default function Image( {
 		};
 	}, [ loadedNaturalWidth, loadedNaturalHeight, imageElement?.complete ] );
 
+	// A media editor update can be undone or superseded before its
+	// attributes land, leaving the rendered image untouched. No load event
+	// fires in that case, so clear the pending swap whenever the rendered
+	// image already shows the pending URL.
+	useEffect( () => {
+		if (
+			pendingSwapUrl &&
+			pendingSwapUrl === url &&
+			imageElement?.complete
+		) {
+			setPendingSwapUrl( undefined );
+		}
+	}, [ pendingSwapUrl, url, imageElement ] );
+
 	function onImageError() {
+		setPendingSwapUrl( undefined );
 		setHasImageErrored( true );
 
 		// Check if there's an embed block that handles this URL, e.g., instagram URL.
 		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		if ( undefined !== embedBlock ) {
+		if ( undefined !== embedBlock && onReplace ) {
 			onReplace( embedBlock );
 		}
 	}
 
 	function onImageLoad( event ) {
+		setPendingSwapUrl( undefined );
 		setHasImageErrored( false );
 		setLoadedNaturalSize( {
 			loadedNaturalWidth: event.target?.naturalWidth,
@@ -902,6 +919,10 @@ export default function Image( {
 							aria-haspopup="dialog"
 							icon={ crop }
 							label={ __( 'Crop' ) }
+							// Disable rather than hide while the edited image
+							// loads, so the button keeps focus when the modal
+							// closes instead of dropping it to the canvas.
+							disabled={ isSwappingMedia }
 						/>
 					) }
 					{ showCoverControls && (
@@ -1173,7 +1194,9 @@ export default function Image( {
 						onError={ onImageError }
 						onLoad={ onImageLoad }
 						ref={ setRefs }
-						className={ borderProps.className }
+						className={ clsx( borderProps.className, {
+							'is-swapping-media': isSwappingMedia,
+						} ) }
 						width={ naturalWidth }
 						height={ naturalHeight }
 						style={ {
@@ -1222,7 +1245,7 @@ export default function Image( {
 							...shadowProps.style,
 						} }
 					/>
-					{ isUploading && <Spinner /> }
+					{ ( isUploading || isSwappingMedia ) && <Spinner /> }
 				</>
 			) }
 		</ImageWrapper>

package/src/image/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/image/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/image/save.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	RichText,
 	useBlockProps,
@@ -13,10 +6,6 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import { mediaPosition } from './utils';
 
 export default function save( { attributes } ) {

package/src/image/test/transforms.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { stripFirstImage } from '../transforms';
 
 describe( 'stripFirstImage', () => {

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

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { act, renderHook } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useRegistry, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import {
 	getImageBlockMetadataFromAttachment,
 	getSyncedImageBlockAttributes,
@@ -80,6 +69,7 @@ async function runModalUpdate( {
 	attributes,
 	registryOptions = {},
 	updatePayload = { id: attributes.id, url: 'updated.jpg' },
+	hookOptions = {},
 } ) {
 	const registry = createRegistry( registryOptions );
 	useRegistry.mockReturnValue( registry );
@@ -87,7 +77,11 @@ async function runModalUpdate( {
 	const openMediaEditorModal = jest.fn();
 	mockMediaEditorModalSetting( openMediaEditorModal );
 	const { result } = renderHook( () =>
-		useOpenImageMediaEditorModal( { attributes, setAttributes } )
+		useOpenImageMediaEditorModal( {
+			attributes,
+			setAttributes,
+			...hookOptions,
+		} )
 	);
 	await act( async () => {
 		await result.current();
@@ -105,6 +99,37 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		jest.clearAllMocks();
 	} );
 
+	it( 'notifies onUrlChange when the update switches to a new attachment URL', async () => {
+		const onUrlChange = jest.fn();
+		await runModalUpdate( {
+			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
+			updatePayload: { id: 2, url: 'updated.jpg' },
+			hookOptions: { onUrlChange },
+		} );
+		expect( onUrlChange ).toHaveBeenCalledTimes( 1 );
+		expect( onUrlChange ).toHaveBeenCalledWith( 'updated.jpg' );
+	} );
+
+	it( 'does not notify onUrlChange for a same-attachment update', async () => {
+		const onUrlChange = jest.fn();
+		await runModalUpdate( {
+			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
+			updatePayload: { id: 1, url: 'original.jpg' },
+			hookOptions: { onUrlChange },
+		} );
+		expect( onUrlChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'does not notify onUrlChange when the update carries no URL', async () => {
+		const onUrlChange = jest.fn();
+		await runModalUpdate( {
+			attributes: { id: 1, url: 'original.jpg', alt: '', caption: '' },
+			updatePayload: { id: 2 },
+			hookOptions: { onUrlChange },
+		} );
+		expect( onUrlChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'returns no opener when the media editor modal setting is unavailable', () => {
 		useRegistry.mockReturnValue( createRegistry() );
 		mockMediaEditorModalSetting( undefined );

package/src/image/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
 import { select } from '@wordpress/data';

package/src/image/use-max-width-observer.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useRef } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	privateApis as blockEditorPrivateApis,
@@ -9,10 +6,6 @@ import {
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useRegistry, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../lock-unlock';
 
 function normalizeImageBlockCaption( caption ) {
@@ -137,6 +130,7 @@ export function useOpenImageMediaEditorModal( {
 	attributes,
 	setAttributes,
 	onClose,
+	onUrlChange,
 } ) {
 	// Keep this hook private to the Image block and pass the block attributes
 	// object so the callsite stays compact. Destructure only the attributes
@@ -246,6 +240,12 @@ export function useOpenImageMediaEditorModal( {
 			if ( newId !== currentBlockAttributes.id ) {
 				nextAttributes.id = newId;
 				nextAttributes.url = newUrl ?? currentBlockAttributes.url;
+				if ( nextAttributes.url !== currentBlockAttributes.url ) {
+					// The block is about to point at a freshly generated file
+					// the browser hasn't loaded yet; let the caller show a
+					// loading state until its <img> fires load/error.
+					onUrlChange?.( nextAttributes.url );
+				}
 				blockAttributesRef.current = {
 					...blockAttributesRef.current,
 					id: nextAttributes.id,
@@ -294,7 +294,7 @@ export function useOpenImageMediaEditorModal( {
 				setAttributes( nextAttributes );
 			}
 		},
-		[ resolveFreshAttachmentRecord, setAttributes ]
+		[ onUrlChange, resolveFreshAttachmentRecord, setAttributes ]
 	);
 
 	const openImageMediaEditorModal = useCallback( async () => {

package/src/image/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { NEW_TAB_REL, ALLOWED_MEDIA_TYPES } from './constants';
 
 /**

package/src/image/view.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	store,
 	getContext,
@@ -9,10 +6,6 @@ import {
 	withSyncEvent,
 	withScope,
 } from '@wordpress/interactivity';
-
-/**
- * Internal dependencies
- */
 import { IMAGE_PRELOAD_DELAY } from './constants';
 
 /**

package/src/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	setDefaultBlockName,
 	setFreeformContentHandlerName,
@@ -14,15 +11,7 @@ import { select } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useServerSideRender } from '@wordpress/server-side-render';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import HtmlRenderer from './utils/html-renderer';
-
-/**
- * Internal dependencies
- */
 // Experimental blocks are only registered in the Gutenberg plugin (see
 // `__experimentalRegisterExperimentalCoreBlocks`). `registerCoreBlocks`
 // filters them out via `isBlockMetadataExperimental`, so they are never
@@ -147,7 +136,6 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 import * as footnotes from './footnotes';
-
 import isBlockMetadataExperimental from './utils/is-block-metadata-experimental';
 import { unlock } from './lock-unlock';
 

package/src/latest-comments/deprecated.js

@@ -1,7 +1,3 @@
-/**
- * WordPress dependencies
- */
-
 const v1 = {
 	attributes: {
 		commentsToShow: {

package/src/latest-comments/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	RangeControl,
@@ -13,10 +10,6 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useServerSideRender } from '@wordpress/server-side-render';
 import { useDisabled } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import HtmlRenderer from '../utils/html-renderer';
 

package/src/latest-comments/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { comment as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/latest-comments/index.php

@@ -120,7 +120,10 @@ function render_block_core_latest_comments( $attributes ) {
 			}
 			$list_items_markup .= '</footer>';
 			if ( 'full' === $display_content ) {
-				$list_items_markup .= '<div class="wp-block-latest-comments__comment-excerpt">' . wpautop( get_comment_text( $comment ) ) . '</div>';
+				$comment_text       = post_password_required( $comment->comment_post_ID )
+					? __( 'Password protected' )
+					: get_comment_text( $comment );
+				$list_items_markup .= '<div class="wp-block-latest-comments__comment-excerpt">' . wpautop( $comment_text ) . '</div>';
 			} elseif ( 'excerpt' === $display_content ) {
 				$list_items_markup .= '<div class="wp-block-latest-comments__comment-excerpt">' . wpautop( get_comment_excerpt( $comment ) ) . '</div>';
 			}

package/src/latest-comments/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/latest-posts/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import metadata from './block.json';
 
 const currentSupports = {

package/src/latest-posts/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Placeholder,
 	QueryControls,
@@ -42,10 +35,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticeStore } from '@wordpress/notices';
 import { useInstanceId } from '@wordpress/compose';
 import { createInterpolateElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import {
 	MIN_EXCERPT_LENGTH,
 	MAX_EXCERPT_LENGTH,

package/src/latest-posts/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { postList as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';

package/src/latest-posts/index.php

@@ -58,8 +58,9 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	if ( ! empty( $attributes['categories'] ) ) {
-		$args['category__in'] = array_column( $attributes['categories'], 'id' );
+	$categories = $attributes['categories'] ?? null;
+	if ( ! empty( $categories ) && is_array( $categories ) ) {
+		$args['category__in'] = array_column( $categories, 'id' );
 	}
 	if ( isset( $attributes['selectedAuthor'] ) ) {
 		$args['author'] = $attributes['selectedAuthor'];

package/src/latest-posts/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/latest-posts/test/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 // Load block support registration filters.
 import '@wordpress/block-editor';
 import {
@@ -9,10 +6,6 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import deprecated from '../deprecated';
 import metadata from '../block.json';
 

package/src/list/deprecated.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import migrateFontFamily from '../utils/migrate-font-family';
 import { migrateToListV2, migrateTypeToInlineStyle } from './utils';
 

package/src/list/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	BlockControls,
 	useBlockProps,
@@ -21,10 +18,6 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { useCallback, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import OrderedListSettings from './ordered-list-settings';
 import { migrateToListV2 } from './utils';
 import TagName from './tag-name';
@@ -32,7 +25,6 @@ import TagName from './tag-name';
 const DEFAULT_BLOCK = {
 	name: 'core/list-item',
 };
-const TEMPLATE = [ [ 'core/list-item' ] ];
 
 /**
  * At the moment, deprecations don't handle create blocks from attributes
@@ -44,7 +36,7 @@ const TEMPLATE = [ [ 'core/list-item' ] ];
  */
 function useMigrateOnLoad( attributes, clientId ) {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } =
+	const { updateBlockAttributes, replaceInnerBlocks, selectBlock } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
@@ -62,9 +54,19 @@ function useMigrateOnLoad( attributes, clientId ) {
 			alternative: 'inner blocks',
 		} );
 
+		// The selection can be inside an inner block created from the block
+		// type template at insertion, which the migration replaces; restore
+		// the selection to the migrated block in that case.
+		const shouldReselectBlock = registry
+			.select( blockEditorStore )
+			.hasSelectedInnerBlock( clientId, true );
+
 		registry.batch( () => {
 			updateBlockAttributes( clientId, newAttributes );
 			replaceInnerBlocks( clientId, newInnerBlocks );
+			if ( shouldReselectBlock ) {
+				selectBlock( clientId );
+			}
 		} );
 	}, [ attributes.values ] );
 }
@@ -128,9 +130,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		defaultBlock: DEFAULT_BLOCK,
 		directInsert: true,
-		template: TEMPLATE,
 		templateLock: false,
-		templateInsertUpdatesSelection: true,
 		__experimentalCaptureToolbars: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );

package/src/list/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { list as icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
@@ -18,6 +11,8 @@ const { name } = metadata;
 
 export { metadata, name };
 
+const TEMPLATE = [ [ 'core/list-item' ] ];
+
 const settings = {
 	icon,
 	example: {
@@ -45,6 +40,8 @@ const settings = {
 		],
 	},
 	transforms,
+	template: TEMPLATE,
+	templateInsertUpdatesSelection: true,
 	edit,
 	save,
 	deprecated,

package/src/list/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import {
@@ -10,10 +7,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const LIST_STYLE_OPTIONS = [

package/src/list/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {

package/src/list/tag-name.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 
 function TagName( props, ref ) {

package/src/list/transforms.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import { create, split, toHTMLString } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
 import { createListBlockFromDOMElement } from './utils';
 
 function getListContentSchema( { phrasingContentSchema } ) {

package/src/list/utils.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock, rawHandler } from '@wordpress/blocks';
 
 const LIST_STYLES = {