@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/media-replace-flow/README.md

@@ -76,3 +76,10 @@ Removes a media replace notice.
 
 -   Type: `func`
 -   Required: No
+
+### children
+
+-   Type: `Element`
+-   Required: No
+
+If passed, children are rendered inside the dropdown.

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

@@ -42,6 +42,7 @@ const MediaReplaceFlow = ( {
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
+	children,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -77,8 +78,9 @@ const MediaReplaceFlow = ( {
 	};
 
 	const selectMedia = ( media ) => {
-		onSelect( media );
 		setMediaURLValue( media.url );
+		// Calling `onSelect` after the state update since it might unmount the component.
+		onSelect( media );
 		speak( __( 'The media file has been replaced' ) );
 		removeNotice( errorNoticeID );
 	};
@@ -160,6 +162,7 @@ const MediaReplaceFlow = ( {
 								} }
 							/>
 						</MediaUploadCheck>
+						{ children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

package/src/components/media-replace-flow/style.scss

@@ -5,22 +5,16 @@
 	display: none;
 }
 
-// Forcing some space above the list of options in
-// the dropdown to visually balance them.
-.block-editor-media-replace-flow__options .components-popover__content > div {
-	padding-top: $grid-unit-20;
-}
-
 .block-editor-media-replace-flow__indicator {
 	margin-left: 4px;
 }
 
 .block-editor-media-flow__url-input {
 	border-top: $border-width solid $gray-900;
-	margin-top: $grid-unit-15;
-	margin-right: -$grid-unit-15;
-	margin-left: -$grid-unit-15;
-	padding: $grid-unit-15 $grid-unit-30 0;
+	margin-top: $grid-unit-10;
+	margin-right: -$grid-unit-10;
+	margin-left: -$grid-unit-10;
+	padding: $grid-unit-20;
 
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
@@ -29,10 +23,10 @@
 	}
 
 	.block-editor-link-control {
-		width: 200px; // hardcoded width avoids resizing of control when switching between preview/edit
+		width: 220px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
-			padding: 0; // cancel unnecessary default 1px padding in this case
+			padding: 0; // Cancel unnecessary default 1px padding in this case.
 		}
 
 		.components-base-control .components-base-control__field {
@@ -41,6 +35,11 @@
 
 		.block-editor-link-control__search-item-title {
 			max-width: 180px;
+			white-space: nowrap;
+		}
+
+		.block-editor-link-control__search-item-info {
+			white-space: nowrap;
 		}
 
 		.block-editor-link-control__search-item.is-current {

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

@@ -4,7 +4,7 @@ MediaUpload is a React component used to render a button that opens the WordPres
 
 ## Setup
 
-This is a placeholder component necessary to make it possible to provide an integration with the core blocks that handle media files. By default it renders nothing but it provides a way to have it overridden with the `components.MediaUpload` filter.
+This is a placeholder component necessary to make it possible to provide an integration with the core blocks that handle media files. By default it renders nothing but it provides a way to have it overridden with the `editor.MediaUpload` filter.
 
 ```jsx
 import { addFilter } from '@wordpress/hooks';

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

@@ -100,10 +100,7 @@ function useToolbarFocus(
 	}, [] );
 
 	// Focus on toolbar when pressing alt+F10 when the toolbar is visible
-	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar, {
-		bindGlobal: true,
-		eventName: 'keydown',
-	} );
+	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
 
 	useEffect( () => {
 		if ( initialFocusOnMount ) {

package/src/components/observe-typing/index.js

@@ -53,8 +53,9 @@ function isKeyDownEligibleForStartTyping( event ) {
  * element.
  */
 export function useMouseMoveTypingReset() {
-	const isTyping = useSelect( ( select ) =>
-		select( blockEditorStore ).isTyping()
+	const isTyping = useSelect(
+		( select ) => select( blockEditorStore ).isTyping(),
+		[]
 	);
 	const { stopTyping } = useDispatch( blockEditorStore );
 

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

@@ -7,7 +7,13 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RawHTML, useRef, useCallback, forwardRef } from '@wordpress/element';
+import {
+	RawHTML,
+	useRef,
+	useCallback,
+	forwardRef,
+	createContext,
+} from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { children as childrenSource } from '@wordpress/blocks';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
@@ -20,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
@@ -36,9 +43,14 @@ import { useInputRules } from './use-input-rules';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
+import { useShortcuts } from './use-shortcuts';
+import { useInputEvents } from './use-input-events';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
 
+export const keyboardShortcutContext = createContext();
+export const inputEventContext = createContext();
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -213,7 +225,7 @@ function RichTextWrapper(
 		);
 	}
 
-	const { value, onChange, onFocus, ref: richTextRef } = useRichText( {
+	const { value, onChange, ref: richTextRef } = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
 			adjustedOnChange( html );
@@ -244,6 +256,9 @@ function RichTextWrapper(
 	useCaretInFormat( { value } );
 	useMarkPersistent( { html: adjustedValue, value } );
 
+	const keyboardShortcuts = useRef( new Set() );
+	const inputEvents = useRef( new Set() );
+
 	function onKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -283,20 +298,29 @@ function RichTextWrapper(
 		}
 	}
 
+	function onFocus() {
+		anchorRef.current.focus();
+	}
+
 	const TagName = tagName;
 	const content = (
 		<>
-			{ isSelected &&
-				children &&
-				children( { value, onChange, onFocus } ) }
 			{ isSelected && (
-				<FormatEdit
-					value={ value }
-					onChange={ onChange }
-					onFocus={ onFocus }
-					formatTypes={ formatTypes }
-					forwardedRef={ anchorRef }
-				/>
+				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<inputEventContext.Provider value={ inputEvents }>
+						<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>
 			) }
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
@@ -323,6 +347,8 @@ function RichTextWrapper(
 						onReplace,
 					} ),
 					useRemoveBrowserShortcuts(),
+					useShortcuts( keyboardShortcuts ),
+					useInputEvents( inputEvents ),
 					useUndoAutomaticChange(),
 					usePasteHandler( {
 						isSelected,

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,
@@ -125,7 +128,7 @@ function RichTextWrapper(
 			getSelectionEnd,
 			getSettings,
 			didAutomaticChange,
-			__unstableGetBlockWithoutInnerBlocks,
+			getBlock,
 			isMultiSelecting,
 			hasMultiSelection,
 		} = select( blockEditorStore );
@@ -149,8 +152,7 @@ function RichTextWrapper(
 			// If the block of this RichText is unmodified then it's a candidate for replacing when adding a new block.
 			// In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case.
 			// This apparently assumes functionality the BlockHlder actually
-			const block =
-				clientId && __unstableGetBlockWithoutInnerBlocks( clientId );
+			const block = clientId && getBlock( clientId );
 			const shouldBlurOnUnmount =
 				block && isSelected && isUnmodifiedDefaultBlock( block );
 			extraProps = {
@@ -440,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';
 			}
@@ -473,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 );
 				}
 			}
@@ -651,6 +683,7 @@ function RichTextWrapper(
 							/>
 						) }
 					</Autocomplete>
+					<EmbedHandlerPicker ref={ embedHandlerPickerRef } />
 				</>
 			) }
 		</RichText>

package/src/components/rich-text/input-event.js

@@ -1,30 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useEffect, useContext, useRef } from '@wordpress/element';
 
-export class __unstableRichTextInputEvent extends Component {
-	constructor() {
-		super( ...arguments );
+/**
+ * Internal dependencies
+ */
+import { inputEventContext } from './';
 
-		this.onInput = this.onInput.bind( this );
-	}
+export function __unstableRichTextInputEvent( { inputType, onInput } ) {
+	const callbacks = useContext( inputEventContext );
+	const onInputRef = useRef();
+	onInputRef.current = onInput;
 
-	onInput( event ) {
-		if ( event.inputType === this.props.inputType ) {
-			this.props.onInput();
+	useEffect( () => {
+		function callback( event ) {
+			if ( event.inputType === inputType ) {
+				onInputRef.current();
+				event.preventDefault();
+			}
 		}
-	}
-
-	componentDidMount() {
-		document.addEventListener( 'input', this.onInput, true );
-	}
 
-	componentWillUnmount() {
-		document.removeEventListener( 'input', this.onInput, true );
-	}
+		callbacks.current.add( callback );
+		return () => {
+			callbacks.current.delete( callback );
+		};
+	}, [ inputType ] );
 
-	render() {
-		return null;
-	}
+	return null;
 }

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

@@ -1,17 +1,32 @@
 /**
  * WordPress dependencies
  */
-import { useKeyboardShortcut } from '@wordpress/compose';
-import { rawShortcut } from '@wordpress/keycodes';
+import { isKeyboardEvent } from '@wordpress/keycodes';
+import { useEffect, useContext, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { keyboardShortcutContext } from './';
 
 export function RichTextShortcut( { character, type, onUse } ) {
-	const callback = () => {
-		onUse();
-		return false;
-	};
-	useKeyboardShortcut( rawShortcut[ type ]( character ), callback, {
-		bindGlobal: true,
-	} );
+	const keyboardShortcuts = useContext( keyboardShortcutContext );
+	const onUseRef = useRef();
+	onUseRef.current = onUse;
+
+	useEffect( () => {
+		function callback( event ) {
+			if ( isKeyboardEvent[ type ]( event, character ) ) {
+				onUseRef.current();
+				event.preventDefault();
+			}
+		}
+
+		keyboardShortcuts.current.add( callback );
+		return () => {
+			keyboardShortcuts.current.delete( callback );
+		};
+	}, [ character, type ] );
 
 	return null;
 }

package/src/components/rich-text/style.scss

@@ -1,8 +1,4 @@
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
-	}
-
+.rich-text {
 	[data-rich-text-placeholder] {
 		pointer-events: none;
 	}
@@ -24,6 +20,12 @@
 	}
 }
 
+.block-editor-rich-text__editable {
+	> p:first-child {
+		margin-top: 0;
+	}
+}
+
 // Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
 // To ensure legibility, we increase the default placeholder opacity to ensure contrast.
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {