@wordpress/block-library 10.2.0 → 10.4.0

package/src/comments-pagination/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
@@ -14,19 +11,9 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-const TEMPLATE = [
-	[ 'core/comments-pagination-previous' ],
-	[ 'core/comments-pagination-numbers' ],
-	[ 'core/comments-pagination-next' ],
-];
-
 export default function QueryPaginationEdit( {
 	attributes: { paginationArrow },
 	setAttributes,
@@ -50,9 +37,7 @@ export default function QueryPaginationEdit( {
 
 	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
 
 	// Get the Discussion settings
 	const pageComments = useSelect( ( select ) => {

package/src/comments-pagination/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { queryPagination as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
@@ -14,8 +7,15 @@ import save from './save';
 const { name } = metadata;
 export { metadata, name };
 
+const TEMPLATE = [
+	[ 'core/comments-pagination-previous' ],
+	[ 'core/comments-pagination-numbers' ],
+	[ 'core/comments-pagination-next' ],
+];
+
 export const settings = {
 	icon,
+	template: TEMPLATE,
 	edit,
 	save,
 };

package/src/comments-pagination/init.js

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

package/src/comments-pagination/save.js

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

package/src/comments-pagination-next/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 

package/src/comments-pagination-next/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { queryPaginationNext as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/comments-pagination-next/init.js

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

package/src/comments-pagination-numbers/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useBlockProps } from '@wordpress/block-editor';
 
 const PaginationItem = ( { content, tag: Tag = 'a', extraClass = '' } ) =>

package/src/comments-pagination-numbers/index.js

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

package/src/comments-pagination-numbers/init.js

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

package/src/comments-pagination-previous/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, PlainText } from '@wordpress/block-editor';
 

package/src/comments-pagination-previous/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { queryPaginationPrevious as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/comments-pagination-previous/init.js

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

package/src/comments-title/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import migrateTextAlign from '../utils/migrate-text-align';
 
 const v2 = {

package/src/comments-title/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	BlockControls,
 	useBlockProps,
@@ -19,10 +16,6 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 

package/src/comments-title/index.js

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

package/src/comments-title/init.js

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

package/src/cover/block.json

@@ -100,6 +100,7 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"__experimentalOnEnter": true,
 		"anchor": true,
 		"align": true,
 		"html": false,

package/src/cover/deprecated.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import {
 	RichText,
@@ -17,10 +10,6 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,

package/src/cover/edit/block-controls.js

@@ -1,8 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
 import {
 	BlockControls,
 	MediaReplaceFlow,
@@ -13,10 +9,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { MenuItem, ToolbarButton } from '@wordpress/components';
 import { crop, link } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { ALLOWED_MEDIA_TYPES, EMBED_VIDEO_BACKGROUND_TYPE } from '../shared';
 import { unlock } from '../../lock-unlock';
 import EmbedVideoUrlInput from './embed-video-url-input';
@@ -35,6 +27,7 @@ export default function CoverBlockControls( {
 	onEditMedia,
 	editMediaButtonRef,
 	showEditMediaButton,
+	isEditMediaDisabled,
 	blockEditingMode,
 } ) {
 	const {
@@ -123,6 +116,10 @@ export default function CoverBlockControls( {
 							label={ __( 'Crop background image' ) }
 							onClick={ onEditMedia }
 							aria-haspopup="dialog"
+							// 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={ isEditMediaDisabled }
 						/>
 					) }
 				</BlockControls>

package/src/cover/edit/color-utils.js

@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { FastAverageColor } from 'fast-average-color';
 import memoize from 'memize';
-
-/**
- * WordPress dependencies
- */
 import { applyFilters } from '@wordpress/hooks';
 
 /**

package/src/cover/edit/cover-placeholder.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { cover as icon } from '@wordpress/icons';
 import { createBlobURL } from '@wordpress/blob';
-
-/**
- * Internal dependencies
- */
 import { ALLOWED_MEDIA_TYPES } from '../shared';
 
 export default function CoverPlaceholder( {

package/src/cover/edit/embed-video-url-input.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import {
 	__experimentalConfirmDialog as ConfirmDialog,
@@ -9,10 +6,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import { isValidVideoEmbedUrl } from '../embed-video-utils';
 
 export default function EmbedVideoUrlInput( {

package/src/cover/edit/index.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
 	useCallback,
@@ -13,6 +6,7 @@ import {
 	useLayoutEffect,
 	useMemo,
 	useRef,
+	useState,
 } from '@wordpress/element';
 import { Placeholder, SandBox, Spinner } from '@wordpress/components';
 import { compose, useResizeObserver } from '@wordpress/compose';
@@ -20,7 +14,6 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -28,13 +21,10 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
 import {
 	attributesFromMedia,
 	IMAGE_BACKGROUND_TYPE,
@@ -134,8 +124,9 @@ function CoverEdit( {
 		[]
 	);
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
+	const { __unstableMarkNextChangeAsNotPersistent, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	// Ref to access latest values after async operations (e.g. getMediaColor),
 	// avoiding stale values that could overwrite concurrent remote changes.
@@ -225,6 +216,35 @@ function CoverEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
 
+	// Create the initial inner paragraph when the block gains a background
+	// and has no content yet.
+	const scaffoldInnerBlocks = () => {
+		const {
+			getBlocks,
+			isBlockSelected,
+			getSelectedBlocksInitialCaretPosition,
+		} = registry.select( blockEditorStore );
+		if ( getBlocks( clientId ).length > 0 ) {
+			return;
+		}
+		// Check for fontSize support before we pass a fontSize attribute to
+		// the innerBlocks.
+		const [ fontSizes ] = unlock(
+			registry.select( blockEditorStore )
+		).getBlockSettings( clientId, 'typography.fontSizes' );
+		const hasFontSizes = fontSizes?.length > 0;
+		replaceInnerBlocks(
+			clientId,
+			createBlocksFromInnerBlocksTemplate(
+				getInnerBlocksTemplate( {
+					fontSize: hasFontSizes ? 'large' : undefined,
+				} )
+			),
+			isBlockSelected( clientId ),
+			getSelectedBlocksInitialCaretPosition()
+		);
+	};
+
 	const onSelectMedia = async ( newMedia ) => {
 		const mediaAttributes = attributesFromMedia( newMedia );
 		const isImage = [ newMedia?.type, newMedia?.media_type ].includes(
@@ -289,13 +309,17 @@ function CoverEdit( {
 			}
 		}
 
-		setAttributes( {
-			...mediaAttributes,
-			focalPoint: undefined,
-			useFeaturedImage: undefined,
-			dimRatio: newDimRatio,
-			isDark: newIsDark,
-			isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
+		registry.batch( () => {
+			setAttributes( {
+				...mediaAttributes,
+				focalPoint: undefined,
+				useFeaturedImage: undefined,
+				dimRatio: newDimRatio,
+				isDark: newIsDark,
+				isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
+			} );
+
+			scaffoldInnerBlocks();
 		} );
 	};
 
@@ -345,9 +369,17 @@ function CoverEdit( {
 		// Fold next attribute change into the same undo level as the setOverlayColor above.
 		__unstableMarkNextChangeAsNotPersistent();
 
-		setAttributes( {
-			isUserOverlayColor: true,
-			isDark: newIsDark,
+		registry.batch( () => {
+			setAttributes( {
+				isUserOverlayColor: true,
+				isDark: newIsDark,
+			} );
+
+			// Skip when the color is cleared: that returns the block to its
+			// placeholder, which only renders while there is no content.
+			if ( newOverlayColor ) {
+				scaffoldInnerBlocks();
+			}
 		} );
 	};
 
@@ -424,6 +456,12 @@ function CoverEdit( {
 		return getBackgroundEmbedHtml( embedPreview.html );
 	}, [ embedPreview, backgroundType ] );
 
+	// Set while the media editor has pointed the cover at a freshly
+	// generated file the browser hasn't finished loading; cleared by the
+	// background <img> load/error handlers (or immediately after
+	// setAttributes for CSS backgrounds, which never fire load events).
+	const [ isSwappingMedia, setIsSwappingMedia ] = useState( false );
+
 	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
@@ -477,22 +515,11 @@ function CoverEdit( {
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
 
-	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
-	const hasFontSizes = fontSizes?.length > 0;
-	const innerBlocksTemplate = getInnerBlocksTemplate( {
-		fontSize: hasFontSizes ? 'large' : undefined,
-	} );
-
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-cover__inner-container',
 		},
 		{
-			// Avoid template sync when the `templateLock` value is `all` or `contentOnly`.
-			// See: https://github.com/WordPress/gutenberg/pull/45632
-			template: ! hasInnerBlocks ? innerBlocksTemplate : undefined,
-			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,
 			dropZoneElement: ref.current,
@@ -526,6 +553,10 @@ function CoverEdit( {
 					return;
 				}
 
+				if ( newId !== id && newUrl ) {
+					setIsSwappingMedia( true );
+				}
+
 				const nextAttributes = {
 					id: newId,
 					backgroundType: IMAGE_BACKGROUND_TYPE,
@@ -563,6 +594,17 @@ function CoverEdit( {
 				}
 
 				setAttributes( nextAttributes );
+
+				// A CSS background (parallax/repeated) renders as a div and
+				// never fires a load event; getMediaColor already fetched
+				// the file, so the swap is done once attributes are set.
+				const {
+					hasParallax: currentHasParallax,
+					isRepeated: currentIsRepeated,
+				} = propsRef.current.attributes;
+				if ( currentHasParallax || currentIsRepeated ) {
+					setIsSwappingMedia( false );
+				}
 			},
 		} );
 	}, [
@@ -615,15 +657,24 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
-		setAttributes( {
-			id: undefined,
-			url: undefined,
-			useFeaturedImage: newUseFeaturedImage,
-			dimRatio: newDimRatio,
-			backgroundType: useFeaturedImage
-				? IMAGE_BACKGROUND_TYPE
-				: undefined,
-			isDark: newIsDark,
+		registry.batch( () => {
+			setAttributes( {
+				id: undefined,
+				url: undefined,
+				useFeaturedImage: newUseFeaturedImage,
+				dimRatio: newDimRatio,
+				backgroundType: useFeaturedImage
+					? IMAGE_BACKGROUND_TYPE
+					: undefined,
+				isDark: newIsDark,
+			} );
+
+			// Skip when the featured image is disabled: that can return the
+			// block to its placeholder, which only renders while there is no
+			// content.
+			if ( newUseFeaturedImage ) {
+				scaffoldInnerBlocks();
+			}
 		} );
 	};
 
@@ -640,6 +691,7 @@ function CoverEdit( {
 			onEditMedia={ openCoverMediaEditorModal }
 			editMediaButtonRef={ editMediaButtonRef }
 			showEditMediaButton={ showEditMediaButton }
+			isEditMediaDisabled={ isSwappingMedia }
 		/>
 	);
 
@@ -722,7 +774,7 @@ function CoverEdit( {
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
-			'is-transient': isUploadingMedia,
+			'is-transient': isUploadingMedia || isSwappingMedia,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 			'has-custom-content-position':
@@ -762,6 +814,8 @@ function CoverEdit( {
 							alt={ alt }
 							src={ url }
 							style={ mediaStyle }
+							onLoad={ () => setIsSwappingMedia( false ) }
+							onError={ () => setIsSwappingMedia( false ) }
 						/>
 					) : (
 						<div
@@ -829,7 +883,7 @@ function CoverEdit( {
 					/>
 				) }
 
-				{ isUploadingMedia && <Spinner /> }
+				{ ( isUploadingMedia || isSwappingMedia ) && <Spinner /> }
 
 				<CoverPlaceholder
 					disableMediaButtons

package/src/cover/edit/inspector-controls.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import {
 	FocalPointPicker,
@@ -27,10 +24,6 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { Link } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';

package/src/cover/edit/resizable-cover-popover.js

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 const RESIZABLE_BOX_ENABLE_OPTION = {

package/src/cover/editor.scss

@@ -44,6 +44,12 @@
 		.wp-block-cover__inner-container {
 			z-index: 2;
 		}
+
+		// Keep the loading spinner above the dim overlay (1) and the inner
+		// blocks (2) so it stays visible over child content while media loads.
+		.components-spinner {
+			z-index: 3;
+		}
 	}
 
 	// Shown while media is being uploaded

package/src/cover/embed-video-utils.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { getBlockVariations } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { matchesPatterns } from '../embed/util';
 
 const DEFAULT_EMBED_BLOCK = 'core/embed';

package/src/cover/index.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { cover 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';