@wordpress/block-editor 12.9.0 → 12.10.0

package/src/components/list-view/use-block-selection.js

@@ -5,7 +5,7 @@ import { speak } from '@wordpress/a11y';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { UP, DOWN, HOME, END } from '@wordpress/keycodes';
+import { UP, DOWN, HOME, END, ESCAPE } from '@wordpress/keycodes';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -30,7 +30,7 @@ export default function useBlockSelection() {
 
 	const updateBlockSelection = useCallback(
 		async ( event, clientId, destinationClientId, focusPosition ) => {
-			if ( ! event?.shiftKey ) {
+			if ( ! event?.shiftKey && event?.keyCode !== ESCAPE ) {
 				selectBlock( clientId, focusPosition );
 				return;
 			}
@@ -39,6 +39,8 @@ export default function useBlockSelection() {
 			// the browser default behavior of opening the link in a new window.
 			event.preventDefault();
 
+			const isOnlyDeselection =
+				event.type === 'keydown' && event.keyCode === ESCAPE;
 			const isKeyPress =
 				event.type === 'keydown' &&
 				( event.keyCode === UP ||
@@ -63,10 +65,11 @@ export default function useBlockSelection() {
 			];
 
 			if (
-				isKeyPress &&
-				! selectedBlocks.some( ( blockId ) =>
-					clientIdWithParents.includes( blockId )
-				)
+				isOnlyDeselection ||
+				( isKeyPress &&
+					! selectedBlocks.some( ( blockId ) =>
+						clientIdWithParents.includes( blockId )
+					) )
 			) {
 				// Ensure that shift-selecting blocks via the keyboard only
 				// expands the current selection if focusing over already
@@ -75,35 +78,38 @@ export default function useBlockSelection() {
 				await clearSelectedBlock();
 			}
 
-			let startTarget = getBlockSelectionStart();
-			let endTarget = clientId;
-
-			// Handle keyboard behavior for selecting multiple blocks.
-			if ( isKeyPress ) {
-				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
-					// Set the starting point of the selection to the currently
-					// focused block, if there are no blocks currently selected.
-					// This ensures that as the selection is expanded or contracted,
-					// the starting point of the selection is anchored to that block.
-					startTarget = clientId;
+			// Update selection, if not only clearing the selection.
+			if ( ! isOnlyDeselection ) {
+				let startTarget = getBlockSelectionStart();
+				let endTarget = clientId;
+
+				// Handle keyboard behavior for selecting multiple blocks.
+				if ( isKeyPress ) {
+					if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
+						// Set the starting point of the selection to the currently
+						// focused block, if there are no blocks currently selected.
+						// This ensures that as the selection is expanded or contracted,
+						// the starting point of the selection is anchored to that block.
+						startTarget = clientId;
+					}
+					if ( destinationClientId ) {
+						// If the user presses UP or DOWN, we want to ensure that the block they're
+						// moving to is the target for selection, and not the currently focused one.
+						endTarget = destinationClientId;
+					}
 				}
-				if ( destinationClientId ) {
-					// If the user presses UP or DOWN, we want to ensure that the block they're
-					// moving to is the target for selection, and not the currently focused one.
-					endTarget = destinationClientId;
-				}
-			}
 
-			const startParents = getBlockParents( startTarget );
-			const endParents = getBlockParents( endTarget );
+				const startParents = getBlockParents( startTarget );
+				const endParents = getBlockParents( endTarget );
 
-			const { start, end } = getCommonDepthClientIds(
-				startTarget,
-				endTarget,
-				startParents,
-				endParents
-			);
-			await multiSelect( start, end, null );
+				const { start, end } = getCommonDepthClientIds(
+					startTarget,
+					endTarget,
+					startParents,
+					endParents
+				);
+				await multiSelect( start, end, null );
+			}
 
 			// Announce deselected block, or number of deselected blocks if
 			// the total number of blocks deselected is greater than one.

package/src/components/media-placeholder/README.md

@@ -133,9 +133,9 @@ An object that can contain a `title` and `instructions` properties. These proper
 
 ### multiple
 
-Whether to allow multiple selection of files or not.
+Whether to allow multiple selection of files or not. This property will also accept a string with the value `add` to allow multiple selection of files without the need to use the `Shift` or `Ctrl`/`Cmd` keys.
 
--   Type: `Boolean`
+-   Type: `Boolean|String`
 -   Required: No
 -   Default: `false`
 -   Platform: Web

package/src/components/media-placeholder/index.js

@@ -469,7 +469,7 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						onChange={ onUpload }
 						accept={ accept }
-						multiple={ multiple }
+						multiple={ !! multiple }
 						render={ ( { openFileDialog } ) => {
 							const content = (
 								<>
@@ -508,7 +508,7 @@ export function MediaPlaceholder( {
 						) }
 						onChange={ onUpload }
 						accept={ accept }
-						multiple={ multiple }
+						multiple={ !! multiple }
 					>
 						{ __( 'Upload' ) }
 					</FormFileUpload>

package/src/components/media-placeholder/index.native.js

@@ -2,18 +2,11 @@
  * External dependencies
  */
 import { View, Text, TouchableOpacity } from 'react-native';
-import { sentenceCase } from 'change-case';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MediaUpload,
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-} from '@wordpress/block-editor';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { cloneElement, useCallback, useRef } from '@wordpress/element';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
@@ -23,6 +16,12 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
  */
 import styles from './styles.scss';
 import { useBlockEditContext } from '../block-edit/context';
+import MediaUpload from '../media-upload';
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+} from '../media-upload/constants';
 
 const isMediaEqual = ( media1, media2 ) =>
 	media1.id === media2.id || media1.url === media2.url;
@@ -104,13 +103,13 @@ function MediaPlaceholder( props ) {
 	let instructions = labels.instructions;
 	if ( instructions === undefined ) {
 		if ( isImage ) {
-			instructions = __( 'ADD IMAGE' );
+			instructions = __( 'Add image' );
 		} else if ( isVideo ) {
-			instructions = __( 'ADD VIDEO' );
+			instructions = __( 'Add video' );
 		} else if ( isAudio ) {
-			instructions = __( 'ADD AUDIO' );
+			instructions = __( 'Add audio' );
 		} else {
-			instructions = __( 'ADD IMAGE OR VIDEO' );
+			instructions = __( 'Add image or video' );
 		}
 	}
 
@@ -171,7 +170,7 @@ function MediaPlaceholder( props ) {
 						onPress={ onButtonPress( open ) }
 					>
 						<Text style={ emptyStateDescriptionStyles }>
-							{ sentenceCase( instructions ) }
+							{ instructions }
 						</Text>
 					</TouchableOpacity>
 				</>

package/src/components/media-replace-flow/index.js

@@ -179,7 +179,7 @@ const MediaReplaceFlow = ( {
 									uploadFiles( event, onClose );
 								} }
 								accept={ accept }
-								multiple={ multiple }
+								multiple={ !! multiple }
 								render={ ( { openFileDialog } ) => {
 									return (
 										<MenuItem
@@ -220,7 +220,7 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURL } position="bottom">
+							<Tooltip text={ mediaURL }>
 								<div>
 									<LinkControl
 										value={ { url: mediaURL } }

package/src/components/media-replace-flow/test/index.js

@@ -32,16 +32,6 @@ function TestWrapper() {
 	);
 }
 
-/**
- * Returns the first found popover element up the DOM tree.
- *
- * @param {HTMLElement} element Element to start with.
- * @return {HTMLElement|null} Popover element, or `null` if not found.
- */
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
 		render( <TestWrapper /> );
@@ -67,11 +57,7 @@ describe( 'General media replace flow', () => {
 		);
 		const uploadMenu = screen.getByRole( 'menu' );
 
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( uploadMenu )
-			).toBePositionedPopover()
-		);
+		await waitFor( () => expect( uploadMenu ).toBePositionedPopover() );
 
 		await waitFor( () => expect( uploadMenu ).toBeVisible() );
 	} );
@@ -92,9 +78,7 @@ describe( 'General media replace flow', () => {
 			name: 'example.media (opens in a new tab)',
 		} );
 
-		await waitFor( () =>
-			expect( getWrappingPopoverElement( link ) ).toBePositionedPopover()
-		);
+		await waitFor( () => expect( link ).toBePositionedPopover() );
 
 		expect( link ).toHaveAttribute( 'href', 'https://example.media' );
 	} );
@@ -113,11 +97,9 @@ describe( 'General media replace flow', () => {
 
 		await waitFor( () =>
 			expect(
-				getWrappingPopoverElement(
-					screen.getByRole( 'link', {
-						name: 'example.media (opens in a new tab)',
-					} )
-				)
+				screen.getByRole( 'link', {
+					name: 'example.media (opens in a new tab)',
+				} )
 			).toBePositionedPopover()
 		);
 

package/src/components/media-upload/README.md

@@ -72,11 +72,12 @@ Value of Frame content default mode like 'browse', 'upload' etc.
 -   Required: No
 -   Default: false
 -   Platform: Web
+
 ### multiple
 
-Whether to allow multiple selections or not.
+Whether to allow multiple selection of files or not. This property will also accept a string with the value `add` to allow multiple selection of files without the need to use the `Shift` or `Ctrl`/`Cmd` keys.
 
--   Type: `Boolean`
+-   Type: `Boolean|String`
 -   Required: No
 -   Default: false
 -   Platform: Web

package/src/components/media-upload/constants.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const MEDIA_TYPE_IMAGE = 'image';
+export const MEDIA_TYPE_VIDEO = 'video';
+export const MEDIA_TYPE_AUDIO = 'audio';
+export const MEDIA_TYPE_ANY = 'any';
+
+export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
+export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
+export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
+export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );

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

@@ -3,14 +3,17 @@
  */
 import { Platform } from 'react-native';
 
-import prompt from 'react-native-prompt-android';
-
 /**
  * WordPress dependencies
  */
 import { Component, React } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
+import {
+	BottomSheet,
+	PanelBody,
+	Picker,
+	TextControl,
+} from '@wordpress/components';
 import {
 	getOtherMediaOptions,
 	requestMediaPicker,
@@ -28,16 +31,16 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
-export const MEDIA_TYPE_IMAGE = 'image';
-export const MEDIA_TYPE_VIDEO = 'video';
-export const MEDIA_TYPE_AUDIO = 'audio';
-export const MEDIA_TYPE_ANY = 'any';
-
-export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
-export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
-export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
-export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
+/**
+ * Internal dependencies
+ */
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+	MEDIA_TYPE_ANY,
+} from './constants';
+import styles from './style.scss';
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -52,6 +55,8 @@ export class MediaUpload extends Component {
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getAllSources = this.getAllSources.bind( this );
 		this.state = {
+			url: '',
+			showURLInput: false,
 			otherMediaOptions: [],
 		};
 	}
@@ -204,31 +209,10 @@ export class MediaUpload extends Component {
 	}
 
 	onPickerSelect( value ) {
-		const {
-			allowedTypes = [],
-			onSelect,
-			onSelectURL,
-			multiple = false,
-		} = this.props;
+		const { allowedTypes = [], onSelect, multiple = false } = this.props;
 
 		if ( value === URL_MEDIA_SOURCE ) {
-			prompt(
-				__( 'Type a URL' ), // title
-				undefined, // message
-				[
-					{
-						text: __( 'Cancel' ),
-						style: 'cancel',
-					},
-					{
-						text: __( 'Apply' ),
-						onPress: onSelectURL,
-					},
-				], // Buttons.
-				'plain-text', // type
-				undefined, // defaultValue
-				'url' // keyboardType
-			);
+			this.setState( { showURLInput: true } );
 			return;
 		}
 
@@ -306,13 +290,55 @@ export class MediaUpload extends Component {
 			/>
 		);
 
-		return this.props.render( {
-			open: this.onPickerPresent,
-			getMediaOptions,
-		} );
+		return (
+			<>
+				<URLInput
+					isVisible={ this.state.showURLInput }
+					onClose={ () => {
+						if ( this.state.url !== '' ) {
+							this.props.onSelectURL( this.state.url );
+						}
+						this.setState( { showURLInput: false, url: '' } );
+					} }
+					onChange={ ( url ) => {
+						this.setState( { url } );
+					} }
+					value={ this.state.url }
+				/>
+				{ this.props.render( {
+					open: this.onPickerPresent,
+					getMediaOptions,
+				} ) }
+			</>
+		);
 	}
 }
 
+function URLInput( props ) {
+	return (
+		<BottomSheet
+			hideHeader
+			isVisible={ props.isVisible }
+			onClose={ props.onClose }
+		>
+			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
+				<TextControl
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					autoCapitalize="none"
+					autoCorrect={ false }
+					autoComplete={ Platform.isIOS ? 'url' : 'off' }
+					keyboardType="url"
+					label={ __( 'Insert from URL' ) }
+					onChange={ props.onChange }
+					placeholder={ __( 'Type a URL' ) }
+					value={ props.value }
+				/>
+			</PanelBody>
+		</BottomSheet>
+	);
+}
+
 export default compose( [
 	withSelect( ( select ) => {
 		const { capabilities } = select( blockEditorStore ).getSettings();

package/src/components/media-upload/style.native.scss

@@ -0,0 +1,4 @@
+.media-upload__link-input {
+	padding-left: 0;
+	padding-right: 0;
+}

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

@@ -14,8 +14,8 @@ import { requestMediaPicker } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
+import { MediaUpload } from '../index';
 import {
-	MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
@@ -23,7 +23,7 @@ import {
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
 	OPTION_WORDPRESS_MEDIA_LIBRARY,
-} from '../index';
+} from '../constants';
 
 const MEDIA_URL = 'http://host.media.type';
 const MEDIA_ID = 123;

package/src/components/preview-options/README.md

@@ -82,6 +82,13 @@ Used to set the device type that will be used to display the preview inside the
 -   Type: `func`
 -   Required: yes
 
+#### children
+
+A function that returns nodes to be rendered within the dropdown.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

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

@@ -81,7 +81,7 @@ export default function PreviewOptions( {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
-					{ children( renderProps ) }
+					{ children?.( renderProps ) }
 				</>
 			) }
 		</DropdownMenu>

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

@@ -44,8 +44,9 @@ import { useInputEvents } from './use-input-events';
 import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
-import { getMultilineTag, getAllowedFormats } from './utils';
+import { getAllowedFormats } from './utils';
 import { Content } from './content';
+import RichTextMultiline from './multiline';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -81,12 +82,12 @@ function removeNativeProps( props ) {
 	return restProps;
 }
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName = 'div',
-		value: originalValue = '',
-		onChange: originalOnChange,
+		value: adjustedValue = '',
+		onChange: adjustedOnChange,
 		isSelected: originalIsSelected,
 		multiline,
 		inlineToolbar,
@@ -100,7 +101,7 @@ function RichTextWrapper(
 		onMerge,
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
-		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
@@ -112,18 +113,6 @@ function RichTextWrapper(
 	},
 	forwardedRef
 ) {
-	if ( multiline ) {
-		deprecated( 'wp.blockEditor.RichText multiline prop', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'nested blocks (InnerBlocks)',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
-		} );
-	}
-
-	const instanceId = useInstanceId( RichTextWrapper );
-
-	identifier = identifier || instanceId;
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
@@ -158,33 +147,12 @@ function RichTextWrapper(
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
 		disableFormats,
 	} );
 	const hasFormats =
 		! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
-	let adjustedValue = originalValue;
-	let adjustedOnChange = originalOnChange;
-
-	// Handle deprecated format.
-	if ( Array.isArray( originalValue ) ) {
-		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/',
-		} );
-
-		adjustedValue = childrenSource.toHTML( originalValue );
-		adjustedOnChange = ( newValue ) =>
-			originalOnChange(
-				childrenSource.fromDOM(
-					__unstableCreateElement( document, newValue ).childNodes
-				)
-			);
-	}
 
 	const onSelectionChange = useCallback(
 		( start, end ) => {
@@ -293,7 +261,6 @@ function RichTextWrapper(
 		onSelectionChange,
 		placeholder,
 		__unstableIsSelected: isSelected,
-		__unstableMultilineTag: multilineTag,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
 		__unstableDependencies: [ ...dependencies, tagName ],
@@ -380,9 +347,7 @@ function RichTextWrapper(
 						tagName,
 						onReplace,
 						onSplit,
-						onSplitMiddle,
 						__unstableEmbedURLOnPaste,
-						multilineTag,
 						preserveWhiteSpace,
 						pastePlainText,
 					} ),
@@ -396,11 +361,10 @@ function RichTextWrapper(
 						value,
 						onReplace,
 						onSplit,
-						onSplitMiddle,
-						multilineTag,
 						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,
+						onSplitAtDoubleLineEnd,
 					} ),
 					useFirefoxCompat(),
 					anchorRef,
@@ -424,7 +388,47 @@ function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
+const ForwardedRichTextWrapper = forwardRef( RichTextWrapper );
+
+function RichTextSwitcher( props, ref ) {
+	let value = props.value;
+	let onChange = props.onChange;
+
+	// Handle deprecated format.
+	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( props.value );
+		onChange = ( newValue ) =>
+			props.onChange(
+				childrenSource.fromDOM(
+					__unstableCreateElement( document, newValue ).childNodes
+				)
+			);
+	}
+
+	const Component = props.multiline
+		? RichTextMultiline
+		: ForwardedRichTextWrapper;
+	const instanceId = useInstanceId( RichTextSwitcher );
+
+	return (
+		<Component
+			{ ...props }
+			identifier={ props.identifier || instanceId }
+			value={ value }
+			onChange={ onChange }
+			ref={ ref }
+		/>
+	);
+}
+
+const ForwardedRichTextContainer = forwardRef( RichTextSwitcher );
 
 ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {