@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -15,23 +15,28 @@ import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
  * Internal dependencies
  */
 import styles from './styles.scss';
-
-export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
-export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
-export const MEDIA_UPLOAD_STATE_FAILED = 3;
-export const MEDIA_UPLOAD_STATE_RESET = 4;
+import {
+	MEDIA_UPLOAD_STATE_IDLE,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+	MEDIA_UPLOAD_STATE_PAUSED,
+} from './constants';
 
 export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
+			uploadState: MEDIA_UPLOAD_STATE_IDLE,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
+		this.getRetryMessage = this.getRetryMessage.bind( this );
 	}
 
 	componentDidMount() {
@@ -45,7 +50,11 @@ export class MediaUploadProgress extends Component {
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
 
-		if ( payload.mediaId !== mediaId ) {
+		if (
+			payload.mediaId !== mediaId ||
+			( payload.state === this.state.uploadState &&
+				payload.progress === this.state.progress )
+		) {
 			return;
 		}
 
@@ -56,6 +65,9 @@ export class MediaUploadProgress extends Component {
 			case MEDIA_UPLOAD_STATE_SUCCEEDED:
 				this.finishMediaUploadWithSuccess( payload );
 				break;
+			case MEDIA_UPLOAD_STATE_PAUSED:
+				this.finishMediaUploadWithPause( payload );
+				break;
 			case MEDIA_UPLOAD_STATE_FAILED:
 				this.finishMediaUploadWithFailure( payload );
 				break;
@@ -68,6 +80,7 @@ export class MediaUploadProgress extends Component {
 	updateMediaProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
+			uploadState: payload.state,
 			isUploadInProgress: true,
 			isUploadFailed: false,
 		} );
@@ -77,21 +90,48 @@ export class MediaUploadProgress extends Component {
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
-		this.setState( { isUploadInProgress: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+		} );
 		if ( this.props.onFinishMediaUploadWithSuccess ) {
 			this.props.onFinishMediaUploadWithSuccess( payload );
 		}
 	}
 
+	finishMediaUploadWithPause( payload ) {
+		if ( ! this.props.enablePausedUploads ) {
+			this.finishMediaUploadWithFailure( payload );
+			return;
+		}
+
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: true,
+			isUploadFailed: false,
+		} );
+		if ( this.props.onFinishMediaUploadWithFailure ) {
+			this.props.onFinishMediaUploadWithFailure( payload );
+		}
+	}
+
 	finishMediaUploadWithFailure( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: true } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: true,
+		} );
 		if ( this.props.onFinishMediaUploadWithFailure ) {
 			this.props.onFinishMediaUploadWithFailure( payload );
 		}
 	}
 
 	mediaUploadStateReset( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: false,
+		} );
 		if ( this.props.onMediaUploadStateReset ) {
 			this.props.onMediaUploadStateReset( payload );
 		}
@@ -115,15 +155,24 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	getRetryMessage() {
+		if (
+			this.state.uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+			this.props.enablePausedUploads
+		) {
+			return __( 'Waiting for connection' );
+		}
+
+		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+		return __( 'Failed to insert media.\nTap for more info.' );
+	}
+
 	render() {
 		const { renderContent = () => null } = this.props;
-		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { isUploadInProgress, isUploadFailed, uploadState } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
-		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-		const retryMessage = __(
-			'Failed to insert media.\nTap for more info.'
-		);
+		const retryMessage = this.getRetryMessage();
 
 		const progressBarStyle = [
 			styles.progressBar,
@@ -149,6 +198,9 @@ export class MediaUploadProgress extends Component {
 					) }
 				</View>
 				{ renderContent( {
+					isUploadPaused:
+						uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+						this.props.enablePausedUploads,
 					isUploadInProgress,
 					isUploadFailed,
 					retryMessage,

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

@@ -14,13 +14,13 @@ import {
 /**
  * Internal dependencies
  */
+import { MediaUploadProgress } from '../';
 import {
-	MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from '../';
+} from '../constants';
 
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {

package/src/components/multi-selection-inspector/README.md

@@ -6,11 +6,6 @@ This card contains information on the number of blocks selected, and in the case
 
 ![Multi selection inspector card](https://make.wordpress.org/core/files/2020/09/multi-selection-inspector-card.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/navigable-toolbar/README.md

@@ -8,6 +8,8 @@ The component accepts the following props. Props not included in this set will b
 
 ## `focusOnMount`
 
+_Note: this prop is deprecated._
+
 Whether to immediately focus when the component mounts.
 
 - Type: `Boolean`

package/src/components/navigable-toolbar/index.js

@@ -19,14 +19,19 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
 	return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) );
 }
 
-function getAllToolbarItemsIn( container ) {
-	return Array.from( container.querySelectorAll( '[data-toolbar-item]' ) );
+function getAllFocusableToolbarItemsIn( container ) {
+	return Array.from(
+		container.querySelectorAll(
+			'[data-toolbar-item]:not([disabled]):not([aria-disabled="true"])'
+		)
+	);
 }
 
 function hasFocusWithin( container ) {
@@ -141,7 +146,8 @@ function useToolbarFocus( {
 		let raf = 0;
 		if ( ! initialFocusOnMount ) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( navigableToolbarRef );
+				const items =
+					getAllFocusableToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
@@ -158,18 +164,13 @@ function useToolbarFocus( {
 			if ( ! onIndexChange || ! navigableToolbarRef ) return;
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( navigableToolbarRef );
+			const items = getAllFocusableToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
-	}, [ initialIndex, initialFocusOnMount, toolbarRef ] );
+	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
-	const { lastFocus } = useSelect( ( select ) => {
-		const { getLastFocus } = select( blockEditorStore );
-		return {
-			lastFocus: getLastFocus(),
-		};
-	}, [] );
+	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 	/**
 	 * Handles returning focus to the block editor canvas when pressing escape.
 	 */
@@ -178,6 +179,7 @@ function useToolbarFocus( {
 
 		if ( focusEditorOnEscape ) {
 			const handleKeyDown = ( event ) => {
+				const lastFocus = getLastFocus();
 				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
 					// Focus the last focused element when pressing escape.
 					event.preventDefault();
@@ -192,7 +194,7 @@ function useToolbarFocus( {
 				);
 			};
 		}
-	}, [ focusEditorOnEscape, lastFocus, toolbarRef ] );
+	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
 }
 
 export default function NavigableToolbar( {
@@ -210,9 +212,9 @@ export default function NavigableToolbar( {
 	useToolbarFocus( {
 		toolbarRef,
 		focusOnMount,
-		isAccessibleToolbar,
 		defaultIndex: initialIndex,
 		onIndexChange,
+		isAccessibleToolbar,
 		shouldUseKeyboardFocusShortcut,
 		focusEditorOnEscape,
 	} );

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

@@ -7,7 +7,12 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../rich-text';
 
 /**
  * Internal dependencies

package/src/components/preview-options/index.js

@@ -1,91 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet } from '@wordpress/icons';
-
-export default function PreviewOptions( {
-	children,
-	viewLabel,
-	className,
-	isEnabled = true,
-	deviceType,
-	setDeviceType,
-	label,
-	showIconLabels,
-} ) {
-	const isMobile = useViewportMatch( 'small', '<' );
-	if ( isMobile ) return null;
-
-	const popoverProps = {
-		className: classnames(
-			className,
-			'block-editor-post-preview__dropdown-content'
-		),
-		placement: 'bottom-end',
-	};
-	const toggleProps = {
-		className: 'block-editor-post-preview__button-toggle',
-		disabled: ! isEnabled,
-		__experimentalIsFocusable: ! isEnabled,
-		children: viewLabel,
-		showTooltip: ! showIconLabels,
-	};
-	const menuProps = {
-		'aria-label': __( 'View options' ),
-	};
-
-	const deviceIcons = {
-		mobile,
-		tablet,
-		desktop,
-	};
+import deprecated from '@wordpress/deprecated';
 
-	return (
-		<DropdownMenu
-			className="block-editor-post-preview__dropdown"
-			popoverProps={ popoverProps }
-			toggleProps={ toggleProps }
-			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			label={ label || __( 'Preview' ) }
-			disableOpenOnArrowDown={ ! isEnabled }
-		>
-			{ ( renderProps ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
-					</MenuGroup>
-					{ children?.( renderProps ) }
-				</>
-			) }
-		</DropdownMenu>
-	);
+export default function PreviewOptions() {
+	deprecated( 'wp.blockEditor.PreviewOptions', {
+		version: '6.5',
+	} );
+	return null;
 }

package/src/components/provider/index.js

@@ -45,7 +45,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		useBlockSync( props );
 
 		return (
-			<SlotFillProvider>
+			<SlotFillProvider passthrough>
 				<KeyboardShortcuts.Register />
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>

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

@@ -263,13 +263,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onInput ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
@@ -303,13 +303,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onChange ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -406,13 +406,13 @@ describe( 'useBlockSync hook', () => {
 					attributes: { foo: 2 },
 				},
 			],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -447,13 +447,16 @@ describe( 'useBlockSync hook', () => {
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 2 } },
 		];
 
-		expect( onChange1 ).toHaveBeenCalledWith( updatedBlocks1, {
-			selection: {
-				initialPosition: null,
-				selectionEnd: {},
-				selectionStart: {},
-			},
-		} );
+		expect( onChange1 ).toHaveBeenCalledWith(
+			updatedBlocks1,
+			expect.objectContaining( {
+				selection: {
+					initialPosition: null,
+					selectionEnd: {},
+					selectionStart: {},
+				},
+			} )
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -485,13 +488,13 @@ describe( 'useBlockSync hook', () => {
 		// The second callback should be called with the new change.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 
@@ -544,13 +547,13 @@ describe( 'useBlockSync hook', () => {
 		// Only the new callback should be called.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 } );

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

@@ -9,6 +9,7 @@ import { cloneBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -264,6 +265,10 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
+				const undoIgnore = undoIgnoreBlocks.has( blocks );
+				if ( undoIgnore ) {
+					undoIgnoreBlocks.delete( blocks );
+				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
@@ -271,6 +276,7 @@ export default function useBlockSync( {
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
+					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

package/src/components/rich-text/content.js

@@ -5,36 +5,43 @@ import { RawHTML } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * Internal dependencies
+ */
+import RichText from './';
+
 /**
  * Internal dependencies
  */
 import { getMultilineTag } from './utils';
 
-export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	if ( RichText.isEmpty( value ) ) {
+		const MultilineTag = getMultilineTag( multiline );
+		value = MultilineTag ? <MultilineTag /> : null;
+	} else if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
 			since: '6.1',
 			version: '6.3',
 			alternative: 'value prop as string',
 			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
 		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
+		value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
+	} else if ( typeof value === 'string' ) {
+		// To do: deprecate.
+		value = <RawHTML>{ value }</RawHTML>;
+	} else {
+		// To do: create a toReactComponent method on RichTextData, which we
+		// might in the future also use for the editable tree. See
+		// https://github.com/WordPress/gutenberg/pull/41655.
+		value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
 	}
 
-	return content;
-};
+	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
+}

package/src/components/rich-text/get-rich-text-values.js

@@ -6,6 +6,7 @@ import {
 	getSaveElement,
 	__unstableGetBlockProps as getBlockProps,
 } from '@wordpress/blocks';
+import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -95,5 +96,9 @@ export function getRichTextValues( blocks = [] ) {
 	const values = [];
 	addValuesForBlocks( values, blocks );
 	getBlockProps.skipFilters = false;
-	return values;
+	return values.map( ( value ) =>
+		value instanceof RichTextData
+			? value
+			: RichTextData.fromHTMLString( value )
+	);
 }