@wordpress/block-library 10.2.0 → 10.3.0

package/src/code/edit.js

@@ -26,8 +26,13 @@ export default function CodeEdit( {
 				aria-label={ __( 'Code' ) }
 				preserveWhiteSpace
 				__unstablePastePlainText
-				__unstableOnSplitAtDoubleLineEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				__unstableOnSplitAtDoubleLineEnd={
+					insertBlocksAfter
+						? () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+						: undefined
 				}
 				style={ { whiteSpace: 'break-spaces' } }
 			/>

package/src/cover/block.json

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

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

@@ -35,6 +35,7 @@ export default function CoverBlockControls( {
 	onEditMedia,
 	editMediaButtonRef,
 	showEditMediaButton,
+	isEditMediaDisabled,
 	blockEditingMode,
 } ) {
 	const {
@@ -123,6 +124,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/index.js

@@ -13,6 +13,7 @@ import {
 	useLayoutEffect,
 	useMemo,
 	useRef,
+	useState,
 } from '@wordpress/element';
 import { Placeholder, SandBox, Spinner } from '@wordpress/components';
 import { compose, useResizeObserver } from '@wordpress/compose';
@@ -20,7 +21,6 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -28,7 +28,8 @@ 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';
 
@@ -134,8 +135,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 +227,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 +320,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 +380,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 +467,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 +526,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 +564,10 @@ function CoverEdit( {
 					return;
 				}
 
+				if ( newId !== id && newUrl ) {
+					setIsSwappingMedia( true );
+				}
+
 				const nextAttributes = {
 					id: newId,
 					backgroundType: IMAGE_BACKGROUND_TYPE,
@@ -563,6 +605,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 +668,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 +702,7 @@ function CoverEdit( {
 			onEditMedia={ openCoverMediaEditorModal }
 			editMediaButtonRef={ editMediaButtonRef }
 			showEditMediaButton={ showEditMediaButton }
+			isEditMediaDisabled={ isSwappingMedia }
 		/>
 	);
 
@@ -722,7 +785,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 +825,8 @@ function CoverEdit( {
 							alt={ alt }
 							src={ url }
 							style={ mediaStyle }
+							onLoad={ () => setIsSwappingMedia( false ) }
+							onError={ () => setIsSwappingMedia( false ) }
 						/>
 					) : (
 						<div
@@ -829,7 +894,7 @@ function CoverEdit( {
 					/>
 				) }
 
-				{ isUploadingMedia && <Spinner /> }
+				{ ( isUploadingMedia || isSwappingMedia ) && <Spinner /> }
 
 				<CoverPlaceholder
 					disableMediaButtons

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

@@ -134,8 +134,15 @@ function render_block_core_cover( $attributes, $content ) {
 		return $content;
 	}
 
-	$object_position = isset( $attributes['focalPoint'] )
-		? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'
+	$cover_focal_point = $attributes['focalPoint'] ?? null;
+	$focal_point_x     = null;
+	$focal_point_y     = null;
+	if ( is_array( $cover_focal_point ) ) {
+		$focal_point_x = isset( $cover_focal_point['x'] ) && is_numeric( $cover_focal_point['x'] ) ? $cover_focal_point['x'] : null;
+		$focal_point_y = isset( $cover_focal_point['y'] ) && is_numeric( $cover_focal_point['y'] ) ? $cover_focal_point['y'] : null;
+	}
+	$object_position = null !== $focal_point_x && null !== $focal_point_y
+		? round( $focal_point_x * 100 ) . '% ' . round( $focal_point_y * 100 ) . '%'
 		: null;
 
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {

package/src/editor.scss

@@ -48,6 +48,7 @@
 @use "./social-link/editor.scss" as *;
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
+@use "./tab-list/editor.scss" as *;
 @use "./table/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;

package/src/embed/edit.js

@@ -239,7 +239,9 @@ const EmbedEdit = ( props ) => {
 					value={ url }
 					cannotEmbed={ cannotEmbed }
 					onChange={ ( value ) => setURL( value ) }
-					fallback={ () => fallback( url, onReplace ) }
+					fallback={
+						onReplace ? () => fallback( url, onReplace ) : undefined
+					}
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
 					} }

package/src/embed/embed-placeholder.js

@@ -70,13 +70,15 @@ export default function EmbedPlaceholder( {
 						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ fallback }
-						>
-							{ _x( 'Convert to link', 'button label' ) }
-						</Button>
+						{ fallback && (
+							<Button
+								__next40pxDefaultSize
+								variant="secondary"
+								onClick={ fallback }
+							>
+								{ _x( 'Convert to link', 'button label' ) }
+							</Button>
+						) }
 					</Stack>
 				</Stack>
 			) }

package/src/form/index.php

@@ -20,12 +20,13 @@ function render_block_core_form( $attributes, $content ) {
 	$processed_content->next_tag( 'form' );
 
 	// Get the action for this form.
-	$action = '';
-	if ( isset( $attributes['action'] ) ) {
+	$action      = '';
+	$form_action = $attributes['action'] ?? null;
+	if ( is_string( $form_action ) ) {
 		$action = str_replace(
 			array( '{SITE_URL}', '{ADMIN_URL}' ),
 			array( site_url(), admin_url() ),
-			$attributes['action']
+			$form_action
 		);
 	}
 	$processed_content->set_attribute( 'action', esc_attr( $action ) );
@@ -55,7 +56,8 @@ function render_block_core_form( $attributes, $content ) {
  * @return string The extra fields.
  */
 function block_core_form_extra_fields_comment_form( $extra_fields, $attributes ) {
-	if ( ! empty( $attributes['action'] ) && str_ends_with( $attributes['action'], '/wp-comments-post.php' ) ) {
+	$form_action = $attributes['action'] ?? null;
+	if ( ! empty( $form_action ) && is_string( $form_action ) && str_ends_with( $form_action, '/wp-comments-post.php' ) ) {
 		$extra_fields .= '<input type="hidden" name="comment_post_ID" value="' . get_the_ID() . '" id="comment_post_ID">';
 	}
 	return $extra_fields;

package/src/gallery/dynamic-gallery.js

@@ -74,14 +74,44 @@ function OrderControl( { orderby, order, onChange } ) {
 	);
 }
 
+/**
+ * Confirmation for leaving dynamic mode, shown from both the block toolbar and
+ * the Source panel so the two entry points explain the change identically.
+ *
+ * Detaching keeps the images the gallery currently shows but breaks the link to
+ * its source, so it's worth confirming — mirroring the dialog `GallerySourcePanel`
+ * shows for the opposite direction.
+ *
+ * @param {Object}   props
+ * @param {Function} props.onConfirm Called when the user confirms detaching.
+ * @param {Function} props.onCancel  Called when the user dismisses the dialog.
+ */
+function DetachGalleryDialog( { onConfirm, onCancel } ) {
+	return (
+		<ConfirmDialog
+			isOpen
+			title={ __( 'Detach Gallery' ) }
+			__experimentalHideHeader={ false }
+			confirmButtonText={ __( 'Detach' ) }
+			onConfirm={ onConfirm }
+			onCancel={ onCancel }
+			size="medium"
+		>
+			{ __(
+				'The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.'
+			) }
+		</ConfirmDialog>
+	);
+}
+
 /**
  * The Gallery block's "Source" inspector panel.
  *
- * In dynamic mode it shows the resolved source, a control to convert back to
- * individual images, and the source ordering. In static mode it offers the
- * entry point into dynamic mode — and, since switching discards any hand-added
- * images, owns the confirmation dialog for that one-way change. Rendered inside
- * the block's `InspectorControls`, alongside the Settings panel.
+ * In dynamic mode it shows the resolved source, a control to detach the gallery
+ * from it, and the source ordering. In static mode it offers the entry point
+ * into dynamic mode. Either direction is a one-way change, so both are behind a
+ * confirmation dialog this panel owns. Rendered inside the block's
+ * `InspectorControls`, alongside the Settings panel.
  *
  * @param {Object}  props
  * @param {Object}  props.dynamic           The `useDynamicGallery` result.
@@ -110,6 +140,7 @@ export function GallerySourcePanel( {
 	const isDynamic = !! dynamicContent;
 
 	const [ isConfirming, setIsConfirming ] = useState( false );
+	const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );
 
 	// Entering dynamic mode discards any hand-added images, so confirm first
 	// when there are images to lose; otherwise switch straight away.
@@ -123,63 +154,76 @@ export function GallerySourcePanel( {
 
 	if ( isDynamic ) {
 		return (
-			<ToolsPanel
-				label={ __( 'Source' ) }
-				resetAll={ resetSource }
-				dropdownMenuProps={ dropdownMenuProps }
-			>
-				<div className="wp-block-gallery__source-settings">
-					<p className="wp-block-gallery__source-description">
-						{ sourceDescriptor?.description ??
-							__( 'Dynamic images.' ) }
-					</p>
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						onClick={ convertToStatic }
-						// Guard the race where the media is still resolving:
-						// converting now would map over an incomplete (or empty)
-						// list and produce a gallery missing images.
-						disabled={ isResolvingDynamic }
-						accessibleWhenDisabled
-					>
-						{ __( 'Convert to individual images' ) }
-					</Button>
-				</div>
-				{ hasMoreImagesThanCap && (
-					<Notice
-						className="wp-block-gallery__source-notice"
-						status="warning"
-						isDismissible={ false }
-					>
-						{ sprintf(
-							/* translators: 1: number of images shown. 2: total number of matching images. */
-							__(
-								'Only the first %1$d of %2$d images will be displayed.'
-							),
-							MAX_IMAGES,
-							dynamicMediaTotal
-						) }
-					</Notice>
-				) }
-				<ToolsPanelItem
-					isShownByDefault
-					label={ __( 'Order by' ) }
-					hasValue={ () =>
-						sourceOrderby !== DEFAULT_ORDERBY ||
-						sourceOrder !== DEFAULT_ORDER
-					}
-					onDeselect={ () => setSourceOrder( undefined, undefined ) }
+			<>
+				<ToolsPanel
+					label={ __( 'Source' ) }
+					resetAll={ resetSource }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
-					<OrderControl
-						orderby={ sourceOrderby }
-						order={ sourceOrder }
-						onChange={ ( { orderby, order } ) =>
-							setSourceOrder( orderby, order )
+					<div className="wp-block-gallery__source-settings">
+						<p className="wp-block-gallery__source-description">
+							{ sourceDescriptor?.description ??
+								__( 'Dynamic images.' ) }
+						</p>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ () => setIsConfirmingDetach( true ) }
+							// Guard the race where the media is still resolving:
+							// detaching now would map over an incomplete (or
+							// empty) list and produce a gallery missing images.
+							disabled={ isResolvingDynamic }
+							accessibleWhenDisabled
+						>
+							{ __( 'Detach Gallery' ) }
+						</Button>
+					</div>
+					{ hasMoreImagesThanCap && (
+						<Notice
+							className="wp-block-gallery__source-notice"
+							status="warning"
+							isDismissible={ false }
+						>
+							{ sprintf(
+								/* translators: 1: number of images shown. 2: total number of matching images. */
+								__(
+									'Only the first %1$d of %2$d images will be displayed.'
+								),
+								MAX_IMAGES,
+								dynamicMediaTotal
+							) }
+						</Notice>
+					) }
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Order by' ) }
+						hasValue={ () =>
+							sourceOrderby !== DEFAULT_ORDERBY ||
+							sourceOrder !== DEFAULT_ORDER
+						}
+						onDeselect={ () =>
+							setSourceOrder( undefined, undefined )
 						}
+					>
+						<OrderControl
+							orderby={ sourceOrderby }
+							order={ sourceOrder }
+							onChange={ ( { orderby, order } ) =>
+								setSourceOrder( orderby, order )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+				{ isConfirmingDetach && (
+					<DetachGalleryDialog
+						onConfirm={ () => {
+							convertToStatic();
+							setIsConfirmingDetach( false );
+						} }
+						onCancel={ () => setIsConfirmingDetach( false ) }
 					/>
-				</ToolsPanelItem>
-			</ToolsPanel>
+				) }
+			</>
 		);
 	}
 
@@ -266,7 +310,8 @@ function GalleryImagesPreview( { imageBlocks } ) {
 /**
  * Renders a dynamic-mode gallery on the canvas:
  *
- * - a block-toolbar control to convert back to individual images;
+ * - a block-toolbar control to detach the gallery from its source, confirmed in
+ *   a dialog;
  * - the gallery `<figure>` wrapper holding a non-editable preview of the
  *   resolved media (or a placeholder while resolving / when nothing is found),
  *   with the gallery's provided context so the previewed images inherit
@@ -306,13 +351,15 @@ export function GalleryDynamicView( {
 		convertToStatic,
 	} = dynamic;
 
-	// Converting to a static gallery materializes editable inner blocks, which
-	// is a structural change. Only offer it when the block is fully editable:
+	// Detaching the gallery materializes editable inner blocks, which is a
+	// structural change. Only offer it when the block is fully editable:
 	// under a content lock (e.g. inside a `contentOnly` group) the editing mode
 	// is `'contentOnly'`/`'disabled'`, where structural toolbar controls are
 	// hidden and the conversion shouldn't be possible.
 	const blockEditingMode = useBlockEditingMode();
 
+	const [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );
+
 	// Empty-state copy for the preview. Framed as forward-looking ("… will appear
 	// here") rather than as an error, since the same empty result covers both a
 	// post with no matching images and a template with no post in context yet —
@@ -326,18 +373,30 @@ export function GalleryDynamicView( {
 	return (
 		<>
 			{ blockEditingMode === 'default' && (
-				<BlockControls group="other">
-					<ToolbarButton
-						onClick={ convertToStatic }
-						// Same guard as the inspector's "Convert to individual
-						// images": both call `convertToStatic`, which would map over
-						// a still-resolving (or empty) media list. (`ToolbarButton`
-						// stays focusable when disabled by default.)
-						disabled={ isResolvingDynamic }
-					>
-						{ __( 'Convert to images' ) }
-					</ToolbarButton>
-				</BlockControls>
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							onClick={ () => setIsConfirmingDetach( true ) }
+							// Same guard as the inspector's "Detach Gallery": both end in
+							// `convertToStatic`, which would map over a
+							// still-resolving (or empty) media list.
+							// (`ToolbarButton` stays focusable when disabled by
+							// default.)
+							disabled={ isResolvingDynamic }
+						>
+							{ __( 'Detach' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isConfirmingDetach && (
+						<DetachGalleryDialog
+							onConfirm={ () => {
+								convertToStatic();
+								setIsConfirmingDetach( false );
+							} }
+							onCancel={ () => setIsConfirmingDetach( false ) }
+						/>
+					) }
+				</>
 			) }
 			<figure { ...blockProps }>
 				{ dynamicImageBlocks.length ? (