@wordpress/block-editor 12.14.0 → 12.16.0

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

@@ -13,14 +13,11 @@ import {
 	createContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId, useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
-	__unstableCreateElement,
 	removeFormat,
 } from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
 import { Popover } from '@wordpress/components';
 
 /**
@@ -46,7 +43,7 @@ import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content } from './content';
-import RichTextMultiline from './multiline';
+import { withDeprecations } from './with-deprecations';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -387,47 +384,9 @@ export function 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 );
+const ForwardedRichTextContainer = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
 ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {

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

@@ -39,17 +39,17 @@ import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
-	getMultilineTag,
 	getAllowedFormats,
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
 import RichText from './native';
+import { withDeprecations } from './with-deprecations';
 
 const classes = 'block-editor-rich-text__editable';
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName,
@@ -58,7 +58,6 @@ function RichTextWrapper(
 		value: originalValue,
 		onChange: originalOnChange,
 		isSelected: originalIsSelected,
-		multiline,
 		inlineToolbar,
 		wrapperClassName,
 		autocompleters,
@@ -80,7 +79,6 @@ function RichTextWrapper(
 		disableLineBreaks,
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
-		__unstableMultilineRootTag,
 		// Native props.
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
@@ -179,7 +177,6 @@ function RichTextWrapper(
 		selectionChange,
 		__unstableMarkAutomaticChange,
 	} = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
 		disableFormats,
@@ -223,7 +220,7 @@ function RichTextWrapper(
 			// an intentional user interaction distinguishing between Backspace and
 			// Delete to remove the empty field, but also to avoid merge & remove
 			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
 				onRemove( ! isReverse );
 			}
 		},
@@ -261,10 +258,7 @@ function RichTextWrapper(
 			if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
 				blocks.push(
 					onSplit(
-						toHTMLString( {
-							value: before,
-							multilineTag,
-						} ),
+						toHTMLString( { value: before } ),
 						! isAfterOriginal
 					)
 				);
@@ -288,13 +282,7 @@ function RichTextWrapper(
 					: ! onSplitMiddle || ! isEmpty( after )
 			) {
 				blocks.push(
-					onSplit(
-						toHTMLString( {
-							value: after,
-							multilineTag,
-						} ),
-						isAfterOriginal
-					)
+					onSplit( toHTMLString( { value: after } ), isAfterOriginal )
 				);
 			}
 
@@ -308,7 +296,7 @@ function RichTextWrapper(
 
 			onReplace( blocks, indexToSelect, initialPosition );
 		},
-		[ onReplace, onSplit, multilineTag, onSplitMiddle ]
+		[ onReplace, onSplit, onSplitMiddle ]
 	);
 
 	const onEnter = useCallback(
@@ -370,7 +358,6 @@ function RichTextWrapper(
 			onReplace,
 			onSplit,
 			__unstableMarkAutomaticChange,
-			multiline,
 			splitValue,
 			onSplitAtEnd,
 		]
@@ -392,9 +379,6 @@ function RichTextWrapper(
 			if ( isInternal ) {
 				const pastedValue = create( {
 					html,
-					multilineTag,
-					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
 					preserveWhiteSpace,
 				} );
 				addActiveFormats( pastedValue, activeFormats );
@@ -496,7 +480,6 @@ function RichTextWrapper(
 			onSplit,
 			splitValue,
 			__unstableEmbedURLOnPaste,
-			multilineTag,
 			preserveWhiteSpace,
 			pastePlainText,
 		]
@@ -568,7 +551,6 @@ function RichTextWrapper(
 			onPaste={ onPaste }
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
-			__unstableMultilineTag={ multilineTag }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }
@@ -582,7 +564,6 @@ function RichTextWrapper(
 			__unstableAllowPrefixTransformations={
 				__unstableAllowPrefixTransformations
 			}
-			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
 			blockIsSelected={
 				originalIsSelected !== undefined
@@ -675,7 +656,9 @@ function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
+const ForwardedRichTextContainer = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
 ForwardedRichTextContainer.Content = Content;
 

package/src/components/rich-text/native/get-format-colors.native.js

@@ -5,50 +5,43 @@ import { getColorObjectByAttributeValues } from '../../../components/colors';
 
 const FORMAT_TYPE = 'core/text-color';
 const REGEX_TO_MATCH = /^has-(.*)-color$/;
-const TAGS_TO_SEARCH = /\<mark/;
 
-export function getFormatColors( value, formats, colors ) {
-	if ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {
-		const newFormats = formats.slice();
+export function getFormatColors( formats, colors ) {
+	const newFormats = formats.slice();
 
-		newFormats.forEach( ( format ) => {
-			format.forEach( ( currentFormat ) => {
-				if ( currentFormat?.type === FORMAT_TYPE ) {
-					const className = currentFormat?.attributes?.class;
-					currentFormat.attributes.style =
-						currentFormat.attributes.style.replace( / /g, '' );
+	// We are looping through a sparse array where empty indices will be
+	// skipped.
+	newFormats.forEach( ( format ) => {
+		format.forEach( ( currentFormat ) => {
+			if ( currentFormat?.type === FORMAT_TYPE ) {
+				const className = currentFormat?.attributes?.class;
 
-					className?.split( ' ' ).forEach( ( currentClass ) => {
-						const match = currentClass.match( REGEX_TO_MATCH );
-						if ( match ) {
-							const [ , colorSlug ] =
-								currentClass.match( REGEX_TO_MATCH );
-							const colorObject = getColorObjectByAttributeValues(
-								colors,
-								colorSlug
-							);
-							const currentStyles =
-								currentFormat?.attributes?.style;
-							if (
-								colorObject &&
-								( ! currentStyles ||
-									currentStyles?.indexOf(
-										colorObject.color
-									) === -1 )
-							) {
-								currentFormat.attributes.style = [
-									`color: ${ colorObject.color }`,
-									currentStyles,
-								].join( ';' );
-							}
+				className?.split( ' ' ).forEach( ( currentClass ) => {
+					const match = currentClass.match( REGEX_TO_MATCH );
+					if ( match ) {
+						const [ , colorSlug ] =
+							currentClass.match( REGEX_TO_MATCH );
+						const colorObject = getColorObjectByAttributeValues(
+							colors,
+							colorSlug
+						);
+						const currentStyles = currentFormat?.attributes?.style;
+						if (
+							colorObject &&
+							( ! currentStyles ||
+								currentStyles?.indexOf( colorObject.color ) ===
+									-1 )
+						) {
+							currentFormat.attributes.style = [
+								`color: ${ colorObject.color }`,
+								currentStyles,
+							].join( ';' );
 						}
-					} );
-				}
-			} );
+					}
+				} );
+			}
 		} );
+	} );
 
-		return newFormats;
-	}
-
-	return formats;
+	return newFormats;
 }

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

@@ -105,27 +105,11 @@ const DEFAULT_FONT_SIZE = 16;
 const MIN_LINE_HEIGHT = 1;
 
 export class RichText extends Component {
-	constructor( {
-		value,
-		selectionStart,
-		selectionEnd,
-		__unstableMultilineTag: multiline,
-	} ) {
+	constructor( { value, selectionStart, selectionEnd } ) {
 		super( ...arguments );
 
-		this.isMultiline = false;
-		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
-			this.multilineTag = multiline === true ? 'p' : multiline;
-			this.isMultiline = true;
-		}
-
-		if ( this.multilineTag === 'li' ) {
-			this.multilineWrapperTags = [ 'ul', 'ol' ];
-		}
-
 		this.isIOS = Platform.OS === 'ios';
 		this.createRecord = this.createRecord.bind( this );
-		this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
 		this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.handleEnter = this.handleEnter.bind( this );
@@ -196,7 +180,7 @@ export class RichText extends Component {
 
 		const { formats, replacements, text } = currentValue;
 		const { activeFormats } = this.state;
-		const newFormats = getFormatColors( value, formats, colorPalette );
+		const newFormats = getFormatColors( formats, colorPalette );
 
 		return {
 			formats: newFormats,
@@ -223,8 +207,6 @@ export class RichText extends Component {
 			...create( {
 				html: this.value,
 				range: null,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} ),
 		};
@@ -235,12 +217,7 @@ export class RichText extends Component {
 
 	valueToFormat( value ) {
 		// Remove the outer root tags.
-		return this.removeRootTagsProducedByAztec(
-			toHTMLString( {
-				value,
-				multilineTag: this.multilineTag,
-			} )
-		);
+		return this.removeRootTagsProducedByAztec( toHTMLString( { value } ) );
 	}
 
 	getActiveFormatNames( record ) {
@@ -357,31 +334,17 @@ export class RichText extends Component {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
 			unescapeSpaces( event.nativeEvent.text )
 		);
-		let formattedContent = contentWithoutRootTag;
-		if ( ! this.isIOS ) {
-			formattedContent = this.restoreParagraphTags(
-				contentWithoutRootTag,
-				this.multilineTag
-			);
-		}
 
 		this.debounceCreateUndoLevel();
-		const refresh = this.value !== formattedContent;
-		this.value = formattedContent;
+		const refresh = this.value !== contentWithoutRootTag;
+		this.value = contentWithoutRootTag;
 
 		// We don't want to refresh if our goal is just to create a record.
 		if ( refresh ) {
-			this.props.onChange( formattedContent );
+			this.props.onChange( contentWithoutRootTag );
 		}
 	}
 
-	restoreParagraphTags( value, tag ) {
-		if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
-			return '<p>' + value + '</p>';
-		}
-		return value;
-	}
-
 	/*
 	 * Handles any case where the content of the AztecRN instance has changed in size
 	 */
@@ -650,6 +613,40 @@ export class RichText extends Component {
 		return shouldDrop;
 	}
 
+	/**
+	 * Determines whether the text input should receive focus after an update.
+	 * For cases where a RichText with a value is merged with an empty one.
+	 *
+	 * @param {Object} prevProps - The previous props of the component.
+	 * @return {boolean} True if the text input should receive focus, false otherwise.
+	 */
+	shouldFocusTextInputAfterMerge( prevProps ) {
+		const {
+			__unstableIsSelected: isSelected,
+			blockIsSelected,
+			selectionStart,
+			selectionEnd,
+			__unstableMobileNoFocusOnMount,
+		} = this.props;
+
+		const {
+			__unstableIsSelected: prevIsSelected,
+			blockIsSelected: prevBlockIsSelected,
+		} = prevProps;
+
+		const noSelectionValues =
+			selectionStart === undefined && selectionEnd === undefined;
+		const textInputWasNotFocused = ! prevIsSelected && ! isSelected;
+
+		return (
+			! __unstableMobileNoFocusOnMount &&
+			noSelectionValues &&
+			textInputWasNotFocused &&
+			! prevBlockIsSelected &&
+			blockIsSelected
+		);
+	}
+
 	onSelectionChangeFromAztec( start, end, text, event ) {
 		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
 			return;
@@ -705,8 +702,6 @@ export class RichText extends Component {
 		if ( Array.isArray( value ) ) {
 			return create( {
 				html: childrenBlock.toHTML( value ),
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -714,8 +709,6 @@ export class RichText extends Component {
 		if ( this.props.format === 'string' ) {
 			return create( {
 				html: value,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -843,9 +836,8 @@ export class RichText extends Component {
 		if ( this.props.value !== this.value ) {
 			this.value = this.props.value;
 		}
-		const { __unstableIsSelected: isSelected } = this.props;
-
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
+		const { __unstableIsSelected: isSelected } = this.props;
 
 		if ( isSelected && ! prevIsSelected ) {
 			this._editor.focus();
@@ -855,6 +847,16 @@ export class RichText extends Component {
 				this.props.selectionStart || 0,
 				this.props.selectionEnd || 0
 			);
+		} else if ( this.shouldFocusTextInputAfterMerge( prevProps ) ) {
+			// Since this is happening when merging blocks, the selection should be at the last character position.
+			// As a fallback the internal selectionEnd value is used.
+			const lastCharacterPosition =
+				this.value?.length ?? this.selectionEnd;
+			this._editor.focus();
+			this.props.onSelectionChange(
+				lastCharacterPosition,
+				lastCharacterPosition
+			);
 		} else if ( ! isSelected && prevIsSelected ) {
 			this._editor.blur();
 		}
@@ -1280,7 +1282,7 @@ export class RichText extends Component {
 					fontWeight={ this.props.fontWeight }
 					fontStyle={ this.props.fontStyle }
 					disableEditingMenu={ disableEditingMenu }
-					isMultiline={ this.isMultiline }
+					isMultiline={ false }
 					textAlign={ this.props.textAlign }
 					{ ...( this.isIOS ? { maxWidth } : {} ) }
 					minWidth={ minWidth }

package/src/components/rich-text/use-input-rules.js

@@ -3,7 +3,7 @@
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import { insert, isCollapsed, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -28,7 +28,12 @@ function findSelection( blocks ) {
 		if ( attributeKey ) {
 			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
 				attributeKey
-			].replace( START_OF_SELECTED_AREA, '' );
+			]
+				// To do: refactor this to use rich text's selection instead, so
+				// we no longer have to use on this hack inserting a special
+				// character.
+				.toString()
+				.replace( START_OF_SELECTED_AREA, '' );
 			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
 		}
 
@@ -42,6 +47,34 @@ function findSelection( blocks ) {
 	return [];
 }
 
+/**
+ * An input rule that replaces two spaces with an en space, and an en space
+ * followed by a space with an em space.
+ *
+ * @param {Object} value Value to replace spaces in.
+ *
+ * @return {Object} Value with spaces replaced.
+ */
+function replacePrecedingSpaces( value ) {
+	if ( ! isCollapsed( value ) ) {
+		return value;
+	}
+
+	const { text, start } = value;
+	const lastTwoCharacters = text.slice( start - 2, start );
+
+	// Replace two spaces with an em space.
+	if ( lastTwoCharacters === '  ' ) {
+		return insert( value, '\u2002', start - 2, start );
+	}
+	// Replace an en space followed by a space with an em space.
+	else if ( lastTwoCharacters === '\u2002 ' ) {
+		return insert( value, '\u2003', start - 2, start );
+	}
+
+	return value;
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -122,7 +155,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				preventEventDiscovery( replacePrecedingSpaces( value ) )
 			);
 
 			if ( transformed !== value ) {

package/src/components/rich-text/with-deprecations.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { children as childrenSource } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
+import { __unstableCreateElement } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import RichTextMultiline from './multiline';
+
+export function withDeprecations( Component ) {
+	return forwardRef( ( 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 NewComponent = props.multiline ? RichTextMultiline : Component;
+		const instanceId = useInstanceId( NewComponent );
+
+		return (
+			<NewComponent
+				{ ...props }
+				identifier={ props.identifier || instanceId }
+				value={ value }
+				onChange={ onChange }
+				ref={ ref }
+			/>
+		);
+	} );
+}

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

@@ -139,7 +139,7 @@ export default function SpacingInputControl( {
 		useMemo(
 			() => parseQuantityAndUnitFromRawValue( currentValue ),
 			[ currentValue ]
-		)[ 1 ] || units[ 0 ].value;
+		)[ 1 ] || units[ 0 ]?.value;
 
 	const setInitialValue = () => {
 		if ( value === undefined ) {