@wordpress/block-editor 12.24.0 → 12.26.0

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

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { pasteHandler } from '@wordpress/blocks';
+import { isEmpty, insert, create } from '@wordpress/rich-text';
+import { isURL } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { addActiveFormats } from '../utils';
+import { getPasteEventData } from '../../../utils/pasting';
+
+/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
+
+export default ( props ) => ( element ) => {
+	function _onPaste( event ) {
+		const {
+			disableFormats,
+			onChange,
+			value,
+			formatTypes,
+			tagName,
+			onReplace,
+			__unstableEmbedURLOnPaste,
+			preserveWhiteSpace,
+			pastePlainText,
+		} = props.current;
+
+		// 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();
+
+		// Allows us to ask for this information when we get a report.
+		window.console.log( 'Received HTML:\n\n', html );
+		window.console.log( 'Received plain text:\n\n', plainText );
+
+		if ( disableFormats ) {
+			onChange( insert( value, plainText ) );
+			return;
+		}
+
+		const isInternal =
+			event.clipboardData.getData( 'rich-text' ) === 'true';
+
+		function pasteInline( content ) {
+			const transformed = formatTypes.reduce(
+				( accumulator, { __unstablePasteRule } ) => {
+					// Only allow one transform.
+					if ( __unstablePasteRule && accumulator === value ) {
+						accumulator = __unstablePasteRule( value, {
+							html,
+							plainText,
+						} );
+					}
+
+					return accumulator;
+				},
+				value
+			);
+			if ( transformed !== value ) {
+				onChange( transformed );
+			} else {
+				const valueToInsert = create( { html: content } );
+				addActiveFormats( valueToInsert, value.activeFormats );
+				onChange( insert( value, valueToInsert ) );
+			}
+		}
+
+		// If the data comes from a rich text instance, we can directly use it
+		// without filtering the data. The filters are only meant for externally
+		// pasted content and remove inline styles.
+		if ( isInternal ) {
+			pasteInline( html );
+			return;
+		}
+
+		if ( pastePlainText ) {
+			onChange( insert( value, create( { text: plainText } ) ) );
+			return;
+		}
+
+		let mode = 'INLINE';
+
+		const trimmedPlainText = plainText.trim();
+
+		if (
+			__unstableEmbedURLOnPaste &&
+			isEmpty( value ) &&
+			isURL( trimmedPlainText ) &&
+			// For the link pasting feature, allow only http(s) protocols.
+			/^https?:/.test( trimmedPlainText )
+		) {
+			mode = 'BLOCKS';
+		}
+
+		const content = pasteHandler( {
+			HTML: html,
+			plainText,
+			mode,
+			tagName,
+			preserveWhiteSpace,
+		} );
+
+		if ( typeof content === 'string' ) {
+			pasteInline( content );
+		} else if ( content.length > 0 ) {
+			if ( onReplace && isEmpty( value ) ) {
+				onReplace( content, content.length - 1, -1 );
+			}
+		}
+	}
+
+	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 () => {
+		defaultView.removeEventListener( 'paste', _onPaste );
+	};
+};

package/src/components/rich-text/event-listeners/remove-browser-shortcuts.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { isKeyboardEvent } from '@wordpress/keycodes';
+
+/**
+ * Hook to prevent default behaviors for key combinations otherwise handled
+ * internally by RichText.
+ */
+export default () => ( node ) => {
+	function onKeydown( event ) {
+		if (
+			isKeyboardEvent.primary( event, 'z' ) ||
+			isKeyboardEvent.primary( event, 'y' ) ||
+			isKeyboardEvent.primaryShift( event, 'z' )
+		) {
+			event.preventDefault();
+		}
+	}
+	node.addEventListener( 'keydown', onKeydown );
+	return () => {
+		node.removeEventListener( 'keydown', onKeydown );
+	};
+};

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

@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { keyboardShortcuts } = props.current;
+	function onKeyDown( event ) {
+		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+			keyboardShortcut( event );
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

package/src/components/rich-text/event-listeners/undo-automatic-change.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( keyCode !== BACKSPACE && keyCode !== ESCAPE ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		const { didAutomaticChange, getSettings } =
+			registry.select( blockEditorStore );
+
+		const { __experimentalUndo } = getSettings();
+
+		if ( ! __experimentalUndo ) {
+			return;
+		}
+
+		if ( ! didAutomaticChange() ) {
+			return;
+		}
+
+		event.preventDefault();
+		__experimentalUndo();
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

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 }
 										),

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import {
 	forwardRef,
 	createContext,
 } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
@@ -20,6 +20,7 @@ import {
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -29,19 +30,9 @@ import { useBlockEditContext } from '../block-edit';
 import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
-import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
-import { usePasteHandler } from './use-paste-handler';
-import { useBeforeInputRules } from './use-before-input-rules';
-import { useInputRules } from './use-input-rules';
-import { useDelete } from './use-delete';
-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 { useInsertReplacementText } from './use-insert-replacement-text';
-import { useFirefoxCompat } from './use-firefox-compat';
+import { useEventListeners } from './event-listeners';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
@@ -118,8 +109,14 @@ export function RichTextWrapper(
 ) {
 	props = removeNativeProps( props );
 
-	const instanceId = useInstanceId( RichTextWrapper );
+	if ( onSplit ) {
+		deprecated( 'wp.blockEditor.RichText onSplit prop', {
+			since: '6.4',
+			alternative: 'block.json support key: "splitting"',
+		} );
+	}
 
+	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
@@ -357,6 +354,7 @@ export function RichTextWrapper(
 		anchorRef.current?.focus();
 	}
 
+	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>
@@ -400,53 +398,35 @@ export function RichTextWrapper(
 					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
-					useBeforeInputRules( { value, onChange } ),
-					useInputRules( {
+					useEventListeners( {
+						registry,
 						getValue,
 						onChange,
 						__unstableAllowPrefixTransformations,
 						formatTypes,
 						onReplace,
 						selectionChange,
-					} ),
-					useInsertReplacementText(),
-					useRemoveBrowserShortcuts(),
-					useShortcuts( keyboardShortcuts ),
-					useInputEvents( inputEvents ),
-					useUndoAutomaticChange(),
-					usePasteHandler( {
 						isSelected,
 						disableFormats,
-						onChange,
 						value,
-						formatTypes,
 						tagName,
-						onReplace,
 						onSplit,
 						__unstableEmbedURLOnPaste,
 						pastePlainText,
-					} ),
-					useDelete( {
-						value,
 						onMerge,
 						onRemove,
-					} ),
-					useEnter( {
 						removeEditorOnlyFormats,
-						value,
-						onReplace,
-						onSplit,
-						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,
 						onSplitAtDoubleLineEnd,
+						keyboardShortcuts,
+						inputEvents,
 					} ),
-					useFirefoxCompat(),
 					anchorRef,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning
-				className={ classnames(
+				className={ clsx(
 					'block-editor-rich-text__editable',
 					props.className,
 					'rich-text'

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -118,6 +118,7 @@ export function RichTextWrapper(
 			getBlock,
 			isMultiSelecting,
 			hasMultiSelection,
+			getSelectedBlockClientId,
 		} = select( blockEditorStore );
 
 		const selectionStart = getSelectionStart();
@@ -154,6 +155,7 @@ export function RichTextWrapper(
 			didAutomaticChange: didAutomaticChange(),
 			disabled: isMultiSelecting() || hasMultiSelection(),
 			undo,
+			getSelectedBlockClientId,
 			...extraProps,
 		};
 	};
@@ -164,6 +166,7 @@ export function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		isSelected,
+		getSelectedBlockClientId,
 		didAutomaticChange,
 		disabled,
 		undo,
@@ -175,6 +178,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
@@ -209,6 +213,12 @@ export function RichTextWrapper(
 		[ clientId, identifier ]
 	);
 
+	const clearCurrentSelectionOnUnmount = useCallback( () => {
+		if ( getSelectedBlockClientId() === clientId ) {
+			clearSelectedBlock();
+		}
+	}, [ clearSelectedBlock, clientId, getSelectedBlockClientId ] );
+
 	const onDelete = useCallback(
 		( { value, isReverse } ) => {
 			if ( onMerge ) {
@@ -590,6 +600,7 @@ export function RichTextWrapper(
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
+			clearCurrentSelectionOnUnmount={ clearCurrentSelectionOnUnmount }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.
@@ -633,7 +644,7 @@ export function RichTextWrapper(
 										  }
 										: editableProps.style
 								}
-								className={ classnames(
+								className={ clsx(
 									classes,
 									props.className,
 									editableProps.className

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

@@ -3,7 +3,9 @@
  */
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -33,6 +35,8 @@ function RichTextMultiline(
 	} );
 
 	const { clientId } = useBlockEditContext();
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
 
 	const multilineTagName = getMultilineTag( multiline );
@@ -68,8 +72,32 @@ function RichTextMultiline(
 							_onChange( newValues );
 						} }
 						isSelected={ undefined }
-						onSplit={ ( v ) => v }
-						onReplace={ ( array ) => {
+						onKeyDown={ ( event ) => {
+							if ( event.keyCode !== ENTER ) {
+								return;
+							}
+
+							event.preventDefault();
+
+							const { offset: start } = getSelectionStart();
+							const { offset: end } = getSelectionEnd();
+
+							// Cannot split if there is no selection.
+							if (
+								typeof start !== 'number' ||
+								typeof end !== 'number'
+							) {
+								return;
+							}
+
+							const richTextValue = create( { html: _value } );
+							richTextValue.start = start;
+							richTextValue.end = end;
+
+							const array = split( richTextValue ).map( ( v ) =>
+								toHTMLString( { value: v } )
+							);
+
 							const newValues = values.slice();
 							newValues.splice( index, 1, ...array );
 							_onChange( newValues );
@@ -84,7 +112,9 @@ function RichTextMultiline(
 							const newValues = values.slice();
 							let offset = 0;
 							if ( forward ) {
-								if ( ! newValues[ index + 1 ] ) return;
+								if ( ! newValues[ index + 1 ] ) {
+									return;
+								}
 								newValues.splice(
 									index,
 									2,
@@ -92,7 +122,9 @@ function RichTextMultiline(
 								);
 								offset = newValues[ index ].length - 1;
 							} else {
-								if ( ! newValues[ index - 1 ] ) return;
+								if ( ! newValues[ index - 1 ] ) {
+									return;
+								}
 								newValues.splice(
 									index - 1,
 									2,

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

@@ -873,6 +873,17 @@ export class RichText extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		const { clearCurrentSelectionOnUnmount } = this.props;
+
+		// There are cases when the component is unmounted e.g. scrolling in a
+		// long post due to virtualization, so the block selection needs to be cleared
+		// so it doesn't auto-focus when it's added back.
+		if ( this._editor?.isFocused() ) {
+			clearCurrentSelectionOnUnmount?.();
+		}
+	}
+
 	getHtmlToRender( record, tagName ) {
 		// Save back to HTML from React tree.
 		let value = this.valueToFormat( record );

package/src/components/rich-text/use-format-types.js

@@ -29,7 +29,9 @@ const interactiveContentTags = new Set( [
 ] );
 
 function prefixSelectKeys( selected, prefix ) {
-	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	if ( typeof selected !== 'object' ) {
+		return { [ prefix ]: selected };
+	}
 	return Object.fromEntries(
 		Object.entries( selected ).map( ( [ key, value ] ) => [
 			`${ prefix }.${ key }`,
@@ -39,7 +41,9 @@ function prefixSelectKeys( selected, prefix ) {
 }
 
 function getPrefixedSelectKeys( selected, prefix ) {
-	if ( selected[ prefix ] ) return selected[ prefix ];
+	if ( selected[ prefix ] ) {
+		return selected[ prefix ];
+	}
 	return Object.keys( selected )
 		.filter( ( key ) => key.startsWith( prefix + '.' ) )
 		.reduce( ( accumulator, key ) => {

package/src/components/segmented-text-control/index.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+
+/**
+ * @typedef {Object} Option
+ * @property {string} label The label of the option.
+ * @property {string} value The value of the option.
+ * @property {string} icon  The icon of the option.
+ */
+
+/**
+ * Control to facilitate selecting a text style from a set of options.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.label     A label for the option.
+ * @param {string}   props.value     Currently selected value.
+ * @param {Function} props.onChange  Callback to handle onChange.
+ * @param {Option[]} props.options   Array of options to display.
+ * @param {string}   props.className Additional class name to apply.
+ *
+ * @return {Element} Element to render.
+ */
+export default function SegmentedTextControl( {
+	label,
+	value,
+	options,
+	onChange,
+	className,
+} ) {
+	return (
+		<fieldset
+			className={ clsx(
+				'block-editor-segmented-text-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-segmented-text-control__buttons">
+				{ options.map( ( option ) => {
+					return (
+						<Button
+							size="compact"
+							key={ option.value }
+							icon={ option.icon }
+							label={ option.label }
+							isPressed={ option.value === value }
+							onClick={ () => onChange( option.value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

package/src/components/{writing-mode-control → segmented-text-control}/style.scss

@@ -1,18 +1,15 @@
-.block-editor-writing-mode-control {
+.block-editor-segmented-text-control {
 	border: 0;
 	margin: 0;
 	padding: 0;
 
-	.block-editor-writing-mode-control__buttons {
+	.block-editor-segmented-text-control__buttons {
 		// 4px of padding makes the row 40px high, same as an input.
 		padding: $grid-unit-05 0;
 		display: flex;
 	}
 
 	.components-button.has-icon {
-		height: $grid-unit-40;
 		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
 	}
 }

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -92,6 +92,8 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
+
 	const previousValue = usePrevious( value );
 	if (
 		!! value &&
@@ -222,13 +224,26 @@ export default function SpacingInputControl( {
 						}
 						value={ currentValue }
 						units={ units }
-						min={ minimumCustomValue }
+						min={ minValue }
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
+						onDragStart={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDrag={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDragEnd={ () => {
+							setMinValue( minimumCustomValue );
+						} }
 					/>
 					<RangeControl
 						onMouseOver={ onMouseOver }