@wordpress/block-editor 12.25.0 → 13.0.0

package/src/components/media-upload-progress/index.native.js

@@ -9,7 +9,10 @@ import { View } from 'react-native';
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import {
+	subscribeMediaUpload,
+	requestImageUploadCancel,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -44,12 +47,17 @@ export class MediaUploadProgress extends Component {
 	}
 
 	componentWillUnmount() {
+		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { mediaId } = this.props;
+
+		if ( isUploadInProgress || isUploadFailed ) {
+			requestImageUploadCancel( mediaId );
+		}
 		this.removeMediaUploadListener();
 	}
 
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
-
 		if (
 			payload.mediaId !== mediaId ||
 			( payload.state === this.state.uploadState &&
@@ -58,6 +66,11 @@ export class MediaUploadProgress extends Component {
 			return;
 		}
 
+		if ( payload?.mediaUrl && ! payload.state ) {
+			this.updateMediaThumbnail( payload );
+			return;
+		}
+
 		switch ( payload.state ) {
 			case MEDIA_UPLOAD_STATE_UPLOADING:
 				this.updateMediaProgress( payload );
@@ -89,6 +102,13 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	updateMediaThumbnail( payload ) {
+		const { onUpdateMediaProgress } = this.props;
+		if ( onUpdateMediaProgress ) {
+			onUpdateMediaProgress( payload );
+		}
+	}
+
 	finishMediaUploadWithSuccess( payload ) {
 		this.setState( {
 			uploadState: payload.state,

package/src/components/plain-text/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'block-editor-plain-text', className ) }
+			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...remainingProps }
 		/>

package/src/components/provider/use-block-sync.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -82,6 +82,15 @@ export default function useBlockSync( {
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
 		registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -177,6 +186,23 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		// On mount, controlled blocks are already set in the effect above.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+
+		// When the block becomes uncontrolled, it means its inner state has been reset
+		// we need to take the blocks again from the external value property.
+		if ( ! isControlled ) {
+			pendingChanges.current.outgoing = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectedBlocksInitialCaretPosition,

package/src/components/provider/with-registry-provider.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
-const withRegistryProvider = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
-				const [ subRegistry, setSubRegistry ] = useState( null );
-				useEffect( () => {
-					const newRegistry = createRegistry( {}, registry );
-					newRegistry.registerStore(
-						blockEditorStoreName,
-						storeConfig
-					);
-					setSubRegistry( newRegistry );
-				}, [ registry ] );
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( blockEditorStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
 
-				if ( ! subRegistry ) {
-					return null;
-				}
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
 
-				return (
-					<RegistryProvider value={ subRegistry }>
-						<WrappedComponent
-							registry={ subRegistry }
-							{ ...props }
-						/>
-					</RegistryProvider>
-				);
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
-		);
-	},
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
 	'withRegistryProvider'
 );
 

package/src/components/publish-date-time-picker/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
@@ -11,29 +11,57 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
-	{ onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+	{
+		onClose,
+		onChange,
+		showPopoverHeaderActions,
+		isCompact,
+		currentDate,
+		...additionalProps
+	},
 	ref
 ) {
+	const datePickerProps = {
+		startOfWeek: getSettings().l10n.startOfWeek,
+		onChange,
+		currentDate: isCompact ? undefined : currentDate,
+		currentTime: isCompact ? currentDate : undefined,
+		...additionalProps,
+	};
+	const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
 				title={ __( 'Publish' ) }
-				actions={ [
-					{
-						label: __( 'Now' ),
-						onClick: () => onChange?.( null ),
-					},
-				] }
+				actions={
+					showPopoverHeaderActions
+						? [
+								{
+									label: __( 'Now' ),
+									onClick: () => onChange?.( null ),
+								},
+						  ]
+						: undefined
+				}
 				onClose={ onClose }
 			/>
-			<DateTimePicker
-				startOfWeek={ getSettings().l10n.startOfWeek }
-				onChange={ onChange }
-				{ ...additionalProps }
-			/>
+			<DatePickerComponent { ...datePickerProps } />
 		</div>
 	);
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+	return (
+		<PrivatePublishDateTimePicker
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicPublishDateTimePicker );

package/src/components/resolution-tool/index.js

@@ -49,7 +49,7 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/responsive-block-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -98,7 +98,7 @@ function ResponsiveBlockControl( props ) {
 					help={ toggleHelpText }
 				/>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-responsive-block-control__group',
 						{
 							'is-responsive': isResponsive,

package/src/components/rich-text/README.md

@@ -29,14 +29,6 @@ _Optional._ Placeholder text to show when the field is empty, similar to the
 
 _Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
 
-### `multiline: Boolean | String`
-
-_Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
-
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `RichText` instance can be replaced with the given blocks.

package/src/components/rich-text/event-listeners/enter.js

@@ -3,33 +3,37 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { insert, remove } from '@wordpress/rich-text';
-import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-import { splitValue } from '../split-value';
 
 export default ( props ) => ( element ) => {
-	function onKeyDown( event ) {
-		if ( event.target.contentEditable !== 'true' ) {
+	function onKeyDownDeprecated( event ) {
+		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
+		const { onReplace, onSplit } = props.current;
+
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
 
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
 		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
 		const {
-			removeEditorOnlyFormats,
 			value,
-			onReplace,
-			onSplit,
 			onChange,
 			disableLineBreaks,
 			onSplitAtEnd,
@@ -39,43 +43,12 @@ export default ( props ) => ( element ) => {
 
 		event.preventDefault();
 
-		const _value = { ...value };
-		_value.formats = removeEditorOnlyFormats( value );
-		const canSplit = onReplace && onSplit;
-
-		if ( onReplace ) {
-			const transforms = getBlockTransforms( 'from' ).filter(
-				( { type } ) => type === 'enter'
-			);
-			const transformation = findTransform( transforms, ( item ) => {
-				return item.regExp.test( _value.text );
-			} );
-
-			if ( transformation ) {
-				onReplace( [
-					transformation.transform( {
-						content: _value.text,
-					} ),
-				] );
-				registry
-					.dispatch( blockEditorStore )
-					.__unstableMarkAutomaticChange();
-				return;
-			}
-		}
-
-		const { text, start, end } = _value;
+		const { text, start, end } = value;
 
 		if ( event.shiftKey ) {
 			if ( ! disableLineBreaks ) {
-				onChange( insert( _value, '\n' ) );
+				onChange( insert( value, '\n' ) );
 			}
-		} else if ( canSplit ) {
-			splitValue( {
-				value: _value,
-				onReplace,
-				onSplit,
-			} );
 		} else if ( onSplitAtEnd && start === end && end === text.length ) {
 			onSplitAtEnd();
 		} else if (
@@ -88,17 +61,24 @@ export default ( props ) => ( element ) => {
 			text.slice( -2 ) === '\n\n'
 		) {
 			registry.batch( () => {
+				const _value = { ...value };
 				_value.start = _value.end - 2;
 				onChange( remove( _value ) );
 				onSplitAtDoubleLineEnd();
 			} );
 		} else if ( ! disableLineBreaks ) {
-			onChange( insert( _value, '\n' ) );
+			onChange( insert( value, '\n' ) );
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'keydown', onKeyDown );
+	element.addEventListener( 'keydown', onKeyDownDeprecated );
 	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
+		defaultView.removeEventListener( 'keydown', onKeyDown );
+		element.removeEventListener( 'keydown', onKeyDownDeprecated );
 	};
 };

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	pasteHandler,
-	findTransform,
-	getBlockTransforms,
-} from '@wordpress/blocks';
+import { pasteHandler } from '@wordpress/blocks';
 import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -13,7 +9,6 @@ import { isURL } from '@wordpress/url';
  * Internal dependencies
  */
 import { addActiveFormats } from '../utils';
-import { splitValue } from '../split-value';
 import { getPasteEventData } from '../../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
@@ -27,12 +22,22 @@ export default ( props ) => ( element ) => {
 			formatTypes,
 			tagName,
 			onReplace,
-			onSplit,
 			__unstableEmbedURLOnPaste,
+			preserveWhiteSpace,
 			pastePlainText,
 		} = props.current;
 
-		const { plainText, html, files } = getPasteEventData( event );
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { plainText, html } = getPasteEventData( event );
 
 		event.preventDefault();
 
@@ -85,47 +90,7 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		if ( files?.length ) {
-			// Allows us to ask for this information when we get a report.
-			// eslint-disable-next-line no-console
-			window.console.log( 'Received items:\n\n', files );
-
-			const fromTransforms = getBlockTransforms( 'from' );
-			const blocks = files
-				.reduce( ( accumulator, file ) => {
-					const transformation = findTransform(
-						fromTransforms,
-						( transform ) =>
-							transform.type === 'files' &&
-							transform.isMatch( [ file ] )
-					);
-					if ( transformation ) {
-						accumulator.push(
-							transformation.transform( [ file ] )
-						);
-					}
-					return accumulator;
-				}, [] )
-				.flat();
-			if ( ! blocks.length ) {
-				return;
-			}
-
-			if ( onReplace && isEmpty( value ) ) {
-				onReplace( blocks );
-			} else {
-				splitValue( {
-					value,
-					pastedBlocks: blocks,
-					onReplace,
-					onSplit,
-				} );
-			}
-
-			return;
-		}
-
-		let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
+		let mode = 'INLINE';
 
 		const trimmedPlainText = plainText.trim();
 
@@ -144,6 +109,7 @@ export default ( props ) => ( element ) => {
 			plainText,
 			mode,
 			tagName,
+			preserveWhiteSpace,
 		} );
 
 		if ( typeof content === 'string' ) {
@@ -151,19 +117,16 @@ export default ( props ) => ( element ) => {
 		} else if ( content.length > 0 ) {
 			if ( onReplace && isEmpty( value ) ) {
 				onReplace( content, content.length - 1, -1 );
-			} else {
-				splitValue( {
-					value,
-					pastedBlocks: content,
-					onReplace,
-					onSplit,
-				} );
 			}
 		}
 	}
 
-	element.addEventListener( 'paste', _onPaste );
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'paste', _onPaste );
 	return () => {
-		element.removeEventListener( 'paste', _onPaste );
+		defaultView.removeEventListener( 'paste', _onPaste );
 	};
 };

package/src/components/rich-text/format-toolbar/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ const FormatToolbar = () => {
 									label={ __( 'More' ) }
 									toggleProps={ {
 										...toggleProps,
-										className: classnames(
+										className: clsx(
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),