@wordpress/block-editor 7.0.2 → 8.0.1

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

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { TextInput, Platform } from 'react-native';
+import { TextInput, Platform, Dimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -61,7 +62,30 @@ export default class PlainText extends Component {
 		this._input.blur();
 	}
 
+	getFontSize() {
+		const { style } = this.props;
+
+		if ( ! style?.fontSize ) {
+			return;
+		}
+
+		const { width, height } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width };
+
+		return {
+			fontSize: parseFloat(
+				getPxFromCssUnit( style.fontSize, cssUnitOptions )
+			),
+		};
+	}
+
 	render() {
+		const { style } = this.props;
+		const textStyles = [
+			style || styles[ 'block-editor-plain-text' ],
+			this.getFontSize(),
+		];
+
 		return (
 			<TextInput
 				{ ...this.props }
@@ -75,9 +99,7 @@ export default class PlainText extends Component {
 					( this.props.style && this.props.style.fontFamily ) ||
 					styles[ 'block-editor-plain-text' ].fontFamily
 				}
-				style={
-					this.props.style || styles[ 'block-editor-plain-text' ]
-				}
+				style={ textStyles }
 				scrollEnabled={ false }
 			/>
 		);

package/src/components/rich-text/embed-handler-picker.native.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useRef,
+	useImperativeHandle,
+	memo,
+	useCallback,
+} from '@wordpress/element';
+import { Picker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_PICKER_OPTIONS = [
+	{
+		id: 'createEmbed',
+		label: __( 'Create embed' ),
+		value: 'createEmbed',
+		onSelect: noop,
+	},
+	{
+		id: 'createLink',
+		label: __( 'Create link' ),
+		value: 'createLink',
+		onSelect: noop,
+	},
+];
+
+const EmbedHandlerPicker = forwardRef( ( {}, ref ) => {
+	const pickerRef = useRef();
+	const pickerOptions = useRef( DEFAULT_PICKER_OPTIONS ).current;
+
+	const onPickerSelect = useCallback(
+		( value ) => {
+			const selectedItem = pickerOptions.find(
+				( item ) => item.value === value
+			);
+			selectedItem.onSelect();
+		},
+		[ pickerOptions ]
+	);
+
+	useImperativeHandle( ref, () => ( {
+		presentPicker: ( { createEmbed, createLink } ) => {
+			pickerOptions[ 0 ].onSelect = createEmbed;
+			pickerOptions[ 1 ].onSelect = createLink;
+			pickerRef.current?.presentPicker();
+		},
+	} ) );
+
+	return (
+		<Picker
+			ref={ pickerRef }
+			options={ pickerOptions }
+			onChange={ onPickerSelect }
+			testID="embed-handler-picker"
+			hideCancelButton
+			leftAlign
+		/>
+	);
+} );
+
+export default memo( EmbedHandlerPicker );

package/src/components/rich-text/format-edit.js

@@ -1,7 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import {
+	getActiveFormat,
+	getActiveObject,
+	isCollapsed,
+} from '@wordpress/rich-text';
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -18,11 +26,37 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
+		let isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
+		// Edge case: un-collapsed link formats.
+		// If there is a missing link format at either end of the selection
+		// then we shouldn't show the Edit UI because the selection has exceeded
+		// the bounds of the link format.
+		// Also if the format objects don't match then we're dealing with two separate
+		// links so we should not allow the link to be modified over the top.
+		if ( name === 'core/link' && ! isCollapsed( value ) ) {
+			const formats = value.formats;
+
+			const linkFormatAtStart = find( formats[ value.start ], {
+				type: 'core/link',
+			} );
+
+			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
+				type: 'core/link',
+			} );
+
+			if (
+				! linkFormatAtStart ||
+				! linkFormatAtEnd ||
+				linkFormatAtStart !== linkFormatAtEnd
+			) {
+				isActive = false;
+			}
+		}
+
 		return (
 			<Edit
 				key={ name }

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

@@ -3,6 +3,7 @@
  */
 
 import { orderBy } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -20,22 +21,40 @@ const POPOVER_PROPS = {
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link', 'text-color' ].map( ( format ) => (
+			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }
 				/>
 			) ) }
 			<Slot name="RichText.ToolbarControls">
-				{ ( fills ) =>
-					fills.length !== 0 && (
+				{ ( fills ) => {
+					if ( ! fills.length ) {
+						return null;
+					}
+
+					const allProps = fills.map( ( [ { props } ] ) => props );
+					const hasActive = allProps.some(
+						( { isActive } ) => isActive
+					);
+
+					return (
 						<ToolbarItem>
 							{ ( toggleProps ) => (
 								<DropdownMenu
 									icon={ chevronDown }
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'More' ) }
-									toggleProps={ toggleProps }
+									toggleProps={ {
+										...toggleProps,
+										className: classnames(
+											toggleProps.className,
+											{ 'is-pressed': hasActive }
+										),
+										describedBy: __(
+											'Displays more block tools'
+										),
+									} }
 									controls={ orderBy(
 										fills.map( ( [ { props } ] ) => props ),
 										'title'
@@ -44,8 +63,8 @@ const FormatToolbar = () => {
 								/>
 							) }
 						</ToolbarItem>
-					)
-				}
+					);
+				} }
 			</Slot>
 		</>
 	);

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

@@ -26,6 +26,7 @@ import {
 } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -307,14 +308,17 @@ function RichTextWrapper(
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
 					<inputEventContext.Provider value={ inputEvents }>
-						{ children && children( { value, onChange, onFocus } ) }
-						<FormatEdit
-							value={ value }
-							onChange={ onChange }
-							onFocus={ onFocus }
-							formatTypes={ formatTypes }
-							forwardedRef={ anchorRef }
-						/>
+						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
+							{ children &&
+								children( { value, onChange, onFocus } ) }
+							<FormatEdit
+								value={ value }
+								onChange={ onChange }
+								onFocus={ onFocus }
+								formatTypes={ formatTypes }
+								forwardedRef={ anchorRef }
+							/>
+						</Popover.__unstableSlotNameProvider>
 					</inputEventContext.Provider>
 				</keyboardShortcutContext.Provider>
 			) }

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

@@ -55,7 +55,9 @@ import {
 	getMultilineTag,
 	getAllowedFormats,
 	isShortcode,
+	createLinkInParagraph,
 } from './utils';
+import EmbedHandlerPicker from './embed-handler-picker';
 
 const wrapperClasses = 'block-editor-rich-text';
 const classes = 'block-editor-rich-text__editable';
@@ -118,6 +120,7 @@ function RichTextWrapper(
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
 	const nativeProps = useNativeProps();
+	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
 			isCaretWithinFormattedText,
@@ -439,10 +442,19 @@ function RichTextWrapper(
 				mode = 'BLOCKS';
 			}
 
+			const isPastedURL = isURL( plainText.trim() );
+			const presentEmbedHandlerPicker = () =>
+				embedHandlerPickerRef.current?.presentPicker( {
+					createEmbed: () =>
+						onReplace( content, content.length - 1, -1 ),
+					createLink: () =>
+						createLinkInParagraph( plainText.trim(), onReplace ),
+				} );
+
 			if (
 				__unstableEmbedURLOnPaste &&
 				isEmpty( value ) &&
-				isURL( plainText.trim() )
+				isPastedURL
 			) {
 				mode = 'BLOCKS';
 			}
@@ -472,9 +484,30 @@ function RichTextWrapper(
 
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
+				// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL
+				// into either an Embed block or a link within the target paragraph. If the paragraph is non-empty, the URL is pasted as text.
+				const canPasteEmbed =
+					isPastedURL &&
+					content.length === 1 &&
+					content[ 0 ].name === 'core/embed';
 				if ( onReplace && isEmpty( value ) ) {
+					if ( canPasteEmbed ) {
+						onChange(
+							insert( value, create( { text: plainText } ) )
+						);
+						if ( __unstableEmbedURLOnPaste ) {
+							presentEmbedHandlerPicker();
+						}
+						return;
+					}
 					onReplace( content, content.length - 1, -1 );
 				} else {
+					if ( canPasteEmbed ) {
+						onChange(
+							insert( value, create( { text: plainText } ) )
+						);
+						return;
+					}
 					splitValue( value, content );
 				}
 			}
@@ -650,6 +683,7 @@ function RichTextWrapper(
 							/>
 						) }
 					</Autocomplete>
+					<EmbedHandlerPicker ref={ embedHandlerPickerRef } />
 				</>
 			) }
 		</RichText>

package/src/components/rich-text/use-paste-handler.js

@@ -21,6 +21,25 @@ import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 
+/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
+
+/**
+ * Replaces line separators with line breaks if not multiline.
+ * Replaces line breaks with line separators if multiline.
+ *
+ * @param {RichTextValue} value       Value to adjust.
+ * @param {boolean}       isMultiline Whether to adjust to multiline or not.
+ *
+ * @return {RichTextValue} Adjusted value.
+ */
+function adjustLines( value, isMultiline ) {
+	if ( isMultiline ) {
+		return replace( value, /\n+/g, LINE_SEPARATOR );
+	}
+
+	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
+}
+
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -110,13 +129,19 @@ export function usePasteHandler( props ) {
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( {
+				const pastedMultilineTag =
+					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
+					undefined;
+				let pastedValue = create( {
 					html,
-					multilineTag,
+					multilineTag: pastedMultilineTag,
 					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
+						pastedMultilineTag === 'li'
+							? [ 'ul', 'ol' ]
+							: undefined,
 					preserveWhiteSpace,
 				} );
+				pastedValue = adjustLines( pastedValue, !! multilineTag );
 				addActiveFormats( pastedValue, value.activeFormats );
 				onChange( insert( value, pastedValue ) );
 				return;
@@ -190,18 +215,11 @@ export function usePasteHandler( props ) {
 			if ( typeof content === 'string' ) {
 				let valueToInsert = create( { html: content } );
 
-				addActiveFormats( valueToInsert, value.activeFormats );
-
 				// If the content should be multiline, we should process text
 				// separated by a line break as separate lines.
-				if ( multilineTag ) {
-					valueToInsert = replace(
-						valueToInsert,
-						/\n+/g,
-						LINE_SEPARATOR
-					);
-				}
+				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
 
+				addActiveFormats( valueToInsert, value.activeFormats );
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {

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

@@ -3,6 +3,8 @@
  */
 import { regexp } from '@wordpress/shortcode';
 import deprecated from '@wordpress/deprecated';
+import { renderToString } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
 
 export function addActiveFormats( value, activeFormats ) {
 	if ( activeFormats?.length ) {
@@ -60,3 +62,17 @@ export function getAllowedFormats( {
 getAllowedFormats.EMPTY_ARRAY = [];
 
 export const isShortcode = ( text ) => regexp( '.*' ).test( text );
+
+/**
+ * Creates a link from pasted URL.
+ * Creates a paragraph block containing a link to the URL, and calls `onReplace`.
+ *
+ * @param {string}   url       The URL that could not be embedded.
+ * @param {Function} onReplace Function to call with the created fallback block.
+ */
+export function createLinkInParagraph( url, onReplace ) {
+	const link = <a href={ url }>{ url }</a>;
+	onReplace(
+		createBlock( 'core/paragraph', { content: renderToString( link ) } )
+	);
+}

package/src/components/skip-to-selected-block/README.md

@@ -0,0 +1,39 @@
+# SkipToSelectedBlock
+
+`SkipToSelectedBlock` provides a way for keyboard and assistive technologies users to jump back to the currently selected block.
+
+The component renders as a visually hidden, secondary button with the text, 'Skip to the selected block'. When clicked it will set [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) on the currently selected block. This means that the currently selected block will now receive all keyboard and similar events by default until focus is moved elsewhere.
+
+If there are multiple blocks selected, the focus will be set on the block that was selected first.
+
+## Usage
+
+Render a `<SkipToSelectedBlock />` component passing in the currently selected block's `clientId`.
+
+```jsx
+function render( { clientId } ) {
+	return (
+		<div>
+			<SkipToSelectedBlock selectedBlockClientId={ clientId } />
+		</div>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `selectedBlockClientId`
+
+-   **Type:** `String`
+-   **Required** `true`
+-   **Default:** `undefined`
+
+The `selectedBlockClientId` is passed to `useBlockRef` inside the component to correctly reference the currently selected block.
+
+If a `clientId` is not provided, the component will return `null`.
+
+## Examples
+
+This component is currently used in the [block inspector](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-inspector) in the sidebar, at the bottom right corner of the screen.

package/src/components/typewriter/index.js

@@ -16,8 +16,9 @@ const arrowKeyCodes = new Set( [ UP, DOWN, LEFT, RIGHT ] );
 const initialTriggerPercentage = 0.75;
 
 export function useTypewriter() {
-	const hasSelectedBlock = useSelect( ( select ) =>
-		select( blockEditorStore ).hasSelectedBlock()
+	const hasSelectedBlock = useSelect(
+		( select ) => select( blockEditorStore ).hasSelectedBlock(),
+		[]
 	);
 
 	return useRefEffect(

package/src/components/url-input/index.js

@@ -60,7 +60,10 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const { value } = this.props;
+		const {
+			value,
+			__experimentalShowInitialSuggestions = false,
+		} = this.props;
 
 		// only have to worry about scrolling selected suggestion into view
 		// when already expanded
@@ -84,12 +87,19 @@ class URLInput extends Component {
 			}, 100 );
 		}
 
-		// Only attempt an update on suggestions if the input value has actually changed.
+		// Update suggestions when the value changes
 		if (
 			prevProps.value !== value &&
-			this.shouldShowInitialSuggestions()
+			! this.props.disableSuggestions &&
+			! this.isUpdatingSuggestions
 		) {
-			this.updateSuggestions();
+			if ( value?.length ) {
+				// If the new value is not empty we need to update with suggestions for it
+				this.updateSuggestions( value );
+			} else if ( __experimentalShowInitialSuggestions ) {
+				// If the new value is empty and we can show initial suggestions, then show initial suggestions
+				this.updateSuggestions();
+			}
 		}
 	}
 
@@ -134,7 +144,13 @@ class URLInput extends Component {
 			return;
 		}
 
-		const isInitialSuggestions = ! ( value && value.length );
+		// Initial suggestions may only show if there is no value
+		// (note: this includes whitespace).
+		const isInitialSuggestions = ! value?.length;
+
+		// Trim only now we've determined whether or not it originally had a "length"
+		// (even if that value was all whitespace).
+		value = value.trim();
 
 		// Allow a suggestions request if:
 		// - there are at least 2 characters in the search input (except manual searches where
@@ -219,7 +235,7 @@ class URLInput extends Component {
 
 		this.props.onChange( inputValue );
 		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue.trim() );
+			this.updateSuggestions( inputValue );
 		}
 	}
 
@@ -236,7 +252,7 @@ class URLInput extends Component {
 			! ( suggestions && suggestions.length )
 		) {
 			// Ensure the suggestions are updated with the current input value
-			this.updateSuggestions( value.trim() );
+			this.updateSuggestions( value );
 		}
 	}
 
@@ -288,7 +304,7 @@ class URLInput extends Component {
 				// Submitting while loading should trigger onSubmit
 				case ENTER: {
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit();
+						this.props.onSubmit( null, event );
 					}
 
 					break;
@@ -338,10 +354,10 @@ class URLInput extends Component {
 					this.selectLink( suggestion );
 
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit( suggestion );
+						this.props.onSubmit( suggestion, event );
 					}
 				} else if ( this.props.onSubmit ) {
-					this.props.onSubmit();
+					this.props.onSubmit( null, event );
 				}
 
 				break;

package/src/components/use-moving-animation/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useSpring } from 'react-spring/web.cjs';
+import { useSpring } from '@react-spring/web';
 
 /**
  * WordPress dependencies
@@ -136,19 +136,20 @@ function useMovingAnimation( {
 	}
 
 	// Called for every frame computed by useSpring.
-	function onFrame( { x, y } ) {
+	function onChange( { value } ) {
+		let { x, y } = value;
 		x = Math.round( x );
 		y = Math.round( y );
 
-		if ( x !== onFrame.x || y !== onFrame.y ) {
+		if ( x !== onChange.x || y !== onChange.y ) {
 			onFrameChange( { x, y } );
-			onFrame.x = x;
-			onFrame.y = y;
+			onChange.x = x;
+			onChange.y = y;
 		}
 	}
 
-	onFrame.x = 0;
-	onFrame.y = 0;
+	onChange.x = 0;
+	onChange.y = 0;
 
 	useSpring( {
 		from: {
@@ -162,7 +163,7 @@ function useMovingAnimation( {
 		reset: triggeredAnimation !== finishedAnimation,
 		config: { mass: 5, tension: 2000, friction: 200 },
 		immediate: prefersReducedMotion,
-		onFrame,
+		onChange,
 	} );
 
 	return ref;

package/src/components/use-on-block-drop/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	cloneBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
@@ -80,8 +81,11 @@ export function onBlockDrop(
 		// If the user is inserting a block
 		if ( dropType === 'inserter' ) {
 			clearSelectedBlock();
+			const blocksToInsert = blocks.map( ( block ) =>
+				cloneBlock( block )
+			);
 			insertBlocks(
-				blocks,
+				blocksToInsert,
 				targetBlockIndex,
 				targetRootClientId,
 				true,