@wordpress/block-library 10.2.0 → 10.3.0

package/src/gallery/use-dynamic-gallery.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createBlock } from '@wordpress/blocks';
@@ -122,7 +122,9 @@ export default function useDynamicGallery( {
 	const sourceOrderby = dynamicContent?.args?.orderBy ?? DEFAULT_ORDERBY;
 	const sourceOrder = dynamicContent?.args?.order ?? DEFAULT_ORDER;
 
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const registry = useRegistry();
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Resolve the configured source to a media query. `null` (static mode, or an
 	// unresolvable source) short-circuits the select below so no request fires.
@@ -208,21 +210,34 @@ export default function useDynamicGallery( {
 	// for the pre-innerBlocks format (see `deprecated.js`/`transforms.js`), empty
 	// on any gallery reachable here.
 	function enableDynamicMode() {
-		setAttributes( { dynamicContent: { source: ATTACHED_MEDIA } } );
-		replaceInnerBlocks( clientId, [] );
+		// Batch the attribute change and the inner-block reset into a single
+		// undo level: they're two halves of one mode switch, so one undo should
+		// revert both. Marking the second dispatch non-persistent stops it from
+		// opening a second undo level, which would otherwise leave the gallery
+		// in a half-switched state (dynamic source set, images still present).
+		registry.batch( () => {
+			setAttributes( { dynamicContent: { source: ATTACHED_MEDIA } } );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [] );
+		} );
 	}
 
 	// "Pins" a dynamic gallery: materializes the currently-resolved media as
 	// real, editable image blocks and leaves dynamic mode.
 	function convertToStatic() {
-		// Build fresh blocks rather than reusing the preview's `dynamicImageBlocks`
-		// so the materialized inner blocks get their own client IDs, distinct from
-		// the (disabled) preview instances.
-		replaceInnerBlocks(
-			clientId,
-			buildImageBlocks( dynamicMedia, imageAttributes )
-		);
-		setAttributes( { dynamicContent: undefined } );
+		// Batch the inner-block materialization and the attribute change into a
+		// single undo level so one undo reverts the whole conversion (see
+		// `enableDynamicMode`). Build fresh blocks rather than reusing the
+		// preview's `dynamicImageBlocks` so the materialized inner blocks get
+		// their own client IDs, distinct from the (disabled) preview instances.
+		registry.batch( () => {
+			replaceInnerBlocks(
+				clientId,
+				buildImageBlocks( dynamicMedia, imageAttributes )
+			);
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { dynamicContent: undefined } );
+		} );
 	}
 
 	// Updates the source ordering within `dynamicContent.args`. Passing

package/src/heading/edit.js

@@ -94,7 +94,7 @@ function HeadingEdit( props ) {
 			onChange={ onContentChange }
 			onMerge={ mergeBlocks }
 			onReplace={ onReplace }
-			onRemove={ () => onReplace( [] ) }
+			onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 			placeholder={ placeholder || __( 'Heading' ) }
 			{ ...blockProps }
 		/>

package/src/html/modal.js

@@ -13,7 +13,11 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	PlainText,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { fullscreen, square } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -25,6 +29,7 @@ import Preview from './preview';
 import { parseContent, serializeContent } from './utils';
 
 const { Tabs } = unlock( componentsPrivateApis );
+const { useNativeUndo } = unlock( blockEditorPrivateApis );
 
 export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 	// Parse content into separate sections and use as initial state
@@ -33,6 +38,9 @@ export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 	const [ editedCss, setEditedCss ] = useState( css );
 	const [ editedJs, setEditedJs ] = useState( js );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
+	// The fields hold local state that is only committed when the dialog is
+	// saved, so undo and redo within them must remain the browser's own.
+	const nativeUndoRef = useNativeUndo();
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 
@@ -132,7 +140,10 @@ export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 							align="stretch"
 							gap={ 8 }
 						>
-							<div className="block-library-html__modal-content">
+							<div
+								ref={ nativeUndoRef }
+								className="block-library-html__modal-content"
+							>
 								<Tabs.TabPanel
 									tabId="html"
 									focusable={ false }

package/src/icon/README.md

@@ -28,9 +28,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"left"`, `"center"`, `"right"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
-- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
-  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
-  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):

package/src/icon/block.json

@@ -33,9 +33,11 @@
 		"align": [ "left", "center", "right" ],
 		"html": false,
 		"color": {
-			"background": true,
-			"text": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/icon/editor.scss

@@ -66,10 +66,7 @@
 .wp-block-icon__inserter-grid-icons-list-item-title {
 	font-size: $font-size-small;
 	padding: $grid-unit-05 $grid-unit-05 $grid-unit-10;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
+	overflow-wrap: break-word;
 }
 
 .wp-block-icon__toolbar-content {

package/src/image/edit.js

@@ -353,11 +353,7 @@ export function ImageEdit( {
 
 	const isSideloading = useSelect(
 		( select ) => {
-			if (
-				( ! window.__clientSideMediaProcessing &&
-					! window.__heicUploadSupport ) ||
-				! id
-			) {
+			if ( ! window.__clientSideMediaProcessing || ! id ) {
 				return false;
 			}
 			return select( uploadStore ).isUploadingById( id );

package/src/image/editor.scss

@@ -22,12 +22,16 @@ figure.wp-block-image:not(.wp-block) {
 	// width (e.g. a small animated GIF being transcoded to a video) otherwise
 	// leaves the spinner off to one side. Wide and full alignments keep their
 	// own width.
-	&.is-transient:not(.alignwide):not(.alignfull) {
+	// The media editor swap state marks the img rather than the figure (its
+	// state lives alongside the img's load handlers), hence the :has() variant.
+	&.is-transient:not(.alignwide):not(.alignfull),
+	&:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
 		width: fit-content;
 	}
 
 	.is-applying img,
-	&.is-transient img {
+	&.is-transient img,
+	img.is-swapping-media {
 		opacity: 0.3;
 	}
 
@@ -123,49 +127,6 @@ figure.wp-block-image:not(.wp-block) {
 	position: relative;
 }
 
-.wp-block-image__crop-area {
-	position: relative;
-	max-width: 100%;
-	width: 100%;
-	overflow: hidden;
-
-	// stylelint-disable selector-class-pattern -- react-easy-crop library class names.
-	.reactEasyCrop_Container {
-		// The linked Image block has `pointer-events: none` applied. Override it
-		// here to enable the crop action.
-		pointer-events: auto;
-
-		// This removes the border from the img within the image cropper so it
-		// can be applied to the cropper itself. This then allows the image to be
-		// cropped within the visual border providing more accurate editing and
-		// smoother UX.
-		.reactEasyCrop_Image {
-			border: none;
-			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
-		}
-	}
-	// stylelint-enable selector-class-pattern
-}
-
-.wp-block-image__crop-icon {
-	padding: 0 8px;
-	min-width: 48px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	svg {
-		fill: currentColor;
-	}
-}
-
-.wp-block-image__zoom {
-	.components-popover__content {
-		min-width: 260px;
-		overflow: visible !important;
-	}
-}
-
 .wp-block-image__toolbar_content_textarea__container {
 	padding: $grid-unit;
 }
@@ -174,4 +135,3 @@ figure.wp-block-image:not(.wp-block) {
 	// Corresponds to the size of the textarea in the block inspector.
 	width: 250px;
 }
-

package/src/image/image.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -390,6 +395,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 +409,7 @@ export default function Image( {
 		attributes,
 		setAttributes,
 		onClose: handleMediaEditorModalClose,
+		onUrlChange: setPendingSwapUrl,
 	} );
 
 	const {
@@ -485,18 +497,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 +930,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 +1205,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 +1256,7 @@ export default function Image( {
 							...shadowProps.style,
 						} }
 					/>
-					{ isUploading && <Spinner /> }
+					{ ( isUploading || isSwappingMedia ) && <Spinner /> }
 				</>
 			) }
 		</ImageWrapper>

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

@@ -80,6 +80,7 @@ async function runModalUpdate( {
 	attributes,
 	registryOptions = {},
 	updatePayload = { id: attributes.id, url: 'updated.jpg' },
+	hookOptions = {},
 } ) {
 	const registry = createRegistry( registryOptions );
 	useRegistry.mockReturnValue( registry );
@@ -87,7 +88,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 +110,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/use-open-image-media-editor-modal.js

@@ -137,6 +137,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 +247,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 +301,7 @@ export function useOpenImageMediaEditorModal( {
 				setAttributes( nextAttributes );
 			}
 		},
-		[ resolveFreshAttachmentRecord, setAttributes ]
+		[ onUrlChange, resolveFreshAttachmentRecord, setAttributes ]
 	);
 
 	const openImageMediaEditorModal = useCallback( async () => {

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/list-item/hooks/use-indent-list-item.js

@@ -16,6 +16,8 @@ export default function useIndentListItem( clientId ) {
 		getSelectionEnd,
 		hasMultiSelection,
 		getMultiSelectedBlockClientIds,
+		getBlockRootClientId,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	return useCallback( () => {
 		const _hasMultiSelection = hasMultiSelection();
@@ -27,9 +29,16 @@ export default function useIndentListItem( clientId ) {
 		);
 		const previousSiblingId = getPreviousBlockClientId( clientId );
 		const newListItem = cloneBlock( getBlock( previousSiblingId ) );
+		// Get the parent list's attributes to inherit the ordered property
+		const parentListId = getBlockRootClientId( clientId );
+		const parentListAttributes = getBlockAttributes( parentListId );
 		// If the sibling has no innerBlocks, create a new `list` block.
 		if ( ! newListItem.innerBlocks?.length ) {
-			newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
+			newListItem.innerBlocks = [
+				createBlock( 'core/list', {
+					ordered: parentListAttributes.ordered,
+				} ),
+			];
 		}
 		// A list item usually has one `list`, but it's possible to have
 		// more. So we need to preserve the previous `list` blocks and

package/src/math/edit.js

@@ -1,27 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	TextareaControl,
 	Popover,
-	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
 
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
+const { ValidatedTextareaControl } = unlock( componentsPrivateApis );
 
 export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const { latex, mathML } = attributes;
@@ -29,6 +26,7 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
 	const initialLatex = useRef( latex );
+	const formRef = useRef();
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -74,63 +72,48 @@ export default function MathEdit( { attributes, setAttributes, isSelected } ) {
 					offset={ 8 }
 					anchor={ blockRef }
 					focusOnMount={ false }
+					// Surface any parsing error before focus leaves the block.
+					// An invalid field is refocused, keeping the popover open.
+					onFocusOutside={ () => formRef.current?.reportValidity() }
 					__unstableSlotName="__unstable-block-tools-after"
 				>
-					<div style={ { padding: '4px', minWidth: '300px' } }>
-						<VStack spacing={ 1 }>
-							<TextareaControl
-								__next40pxDefaultSize
-								label={ __( 'LaTeX math syntax' ) }
-								hideLabelFromVision
-								value={ latex }
-								className="wp-block-math__textarea-control"
-								onChange={ ( newLatex ) => {
-									if ( ! latexToMathML ) {
-										setAttributes( { latex: newLatex } );
-										return;
-									}
-									let newMathML = '';
-									try {
-										newMathML = latexToMathML( newLatex, {
-											displayMode: true,
-										} );
-										setError( null );
-									} catch ( err ) {
-										setError( err.message );
-										speak(
-											sprintf(
-												/* translators: %s: error message returned when parsing LaTeX. */
-												__(
-													'Error parsing mathematical expression: %s'
-												),
-												err.message
-											)
-										);
-									}
-									setAttributes( {
-										mathML: newMathML,
-										latex: newLatex,
+					<form
+						ref={ formRef }
+						style={ { padding: '4px', minWidth: '300px' } }
+						onSubmit={ ( event ) => event.preventDefault() }
+					>
+						<ValidatedTextareaControl
+							label={ __( 'LaTeX math syntax' ) }
+							hideLabelFromVision
+							value={ latex }
+							className="wp-block-math__textarea-control"
+							customValidity={
+								error
+									? { type: 'invalid', message: error }
+									: undefined
+							}
+							onChange={ ( newLatex ) => {
+								if ( ! latexToMathML ) {
+									setAttributes( { latex: newLatex } );
+									return;
+								}
+								let newMathML = '';
+								try {
+									newMathML = latexToMathML( newLatex, {
+										displayMode: true,
 									} );
-								} }
-								placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
-							/>
-							{ error && (
-								<>
-									<WCBadge
-										intent="error"
-										className="wp-block-math__error"
-									>
-										{ sprintf(
-											/* translators: %s: error message returned when parsing LaTeX. */
-											__( 'Error: %s' ),
-											error
-										) }
-									</WCBadge>
-									<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
-								</>
-							) }
-						</VStack>
-					</div>
+									setError( null );
+								} catch ( err ) {
+									setError( err.message );
+								}
+								setAttributes( {
+									mathML: newMathML,
+									latex: newLatex,
+								} );
+							} }
+							placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
+						/>
+					</form>
 				</Popover>
 			) }
 		</div>

package/src/media-text/edit.js

@@ -499,6 +499,7 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
+							label={ __( 'Align media and text vertically' ) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }

package/src/media-text/index.php

@@ -31,8 +31,17 @@ function render_block_core_media_text( $attributes, $content ) {
 
 	$has_media_on_right = 'right' === ( $attributes['mediaPosition'] ?? null );
 	$image_fill         = (bool) ( $attributes['imageFill'] ?? false );
-	$focal_point        = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
-	$unique_id          = 'wp-block-media-text__media-' . wp_unique_id();
+	$focal_point_attr   = $attributes['focalPoint'] ?? null;
+	$focal_point_x      = null;
+	$focal_point_y      = null;
+	if ( is_array( $focal_point_attr ) ) {
+		$focal_point_x = isset( $focal_point_attr['x'] ) && is_numeric( $focal_point_attr['x'] ) ? $focal_point_attr['x'] : null;
+		$focal_point_y = isset( $focal_point_attr['y'] ) && is_numeric( $focal_point_attr['y'] ) ? $focal_point_attr['y'] : null;
+	}
+	$focal_point = null !== $focal_point_x && null !== $focal_point_y
+		? round( $focal_point_x * 100 ) . '% ' . round( $focal_point_y * 100 ) . '%'
+		: '50% 50%';
+	$unique_id   = 'wp-block-media-text__media-' . wp_unique_id();
 
 	$block_tag_processor = new WP_HTML_Tag_Processor( $content );
 	$block_query         = array(

package/src/more/edit.js

@@ -76,10 +76,13 @@ export default function MoreEdit( {
 						setAttributes( { customText: value } )
 					}
 					disableLineBreaks
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
+					__unstableOnSplitAtEnd={
+						insertBlocksAfter
+							? () =>
+									insertBlocksAfter(
+										createBlock( getDefaultBlockName() )
+									)
+							: undefined
 					}
 				/>
 			</div>