@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.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();
@@ -116,8 +113,14 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const { clientId } = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected } = useBlockEditContext();
 	const selector = ( select ) => {
+		// Avoid subscribing to the block editor store if the block is not
+		// selected.
+		if ( ! isBlockSelected ) {
+			return { isSelected: false };
+		}
+
 		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
@@ -140,10 +143,12 @@ export function RichTextWrapper(
 			isSelected,
 		};
 	};
-	// This selector must run on every render so the right selection state is
-	// retrieved from the store on merge.
-	// To do: fix this somehow.
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		originalIsSelected,
+		isBlockSelected,
+	] );
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -320,10 +325,13 @@ export function RichTextWrapper(
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
+					// Rich text ref must be first because its focus listener
+					// must be set up before any other ref calls .focus() on
+					// mount.
+					richTextRef,
 					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
-					richTextRef,
 					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
 						getValue,
@@ -382,52 +390,15 @@ export function RichTextWrapper(
 				// tabIndex because Safari will focus the element. However,
 				// Safari will correctly ignore nested contentEditable elements.
 				tabIndex={ props.tabIndex === 0 ? null : props.tabIndex }
+				data-wp-block-attribute-key={ identifier }
 			/>
 		</>
 	);
 }
 
-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,
@@ -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

@@ -15,7 +15,8 @@ import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor';
+import { BlockFormatControls } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import {
 	compose,
@@ -51,10 +52,6 @@ import { getFormatColors } from './get-format-colors';
 import styles from './style.scss';
 import ToolbarButtonWithOptions from './toolbar-button-with-options';
 
-const unescapeSpaces = ( text ) => {
-	return text.replace( / | /gi, ' ' );
-};
-
 // The flattened color palettes array is memoized to ensure that the same array instance is
 // returned for the colors palettes. This value might be used as a prop, so having the same
 // instance will prevent unnecessary re-renders of the RichText component.
@@ -105,27 +102,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 +177,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 +204,6 @@ export class RichText extends Component {
 			...create( {
 				html: this.value,
 				range: null,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} ),
 		};
@@ -235,12 +214,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 ) {
@@ -290,7 +264,7 @@ export class RichText extends Component {
 	onCreateUndoLevel() {
 		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
 		// If the content is the same, no level needs to be created.
-		if ( this.lastHistoryValue === this.value ) {
+		if ( this.lastHistoryValue.toString() === this.value.toString() ) {
 			return;
 		}
 
@@ -340,10 +314,10 @@ export class RichText extends Component {
 		}
 
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			event.nativeEvent.text
 		);
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
-		if ( contentWithoutRootTag === this.value ) {
+		if ( contentWithoutRootTag === this.value.toString() ) {
 			return;
 		}
 		this.lastEventCount = event.nativeEvent.eventCount;
@@ -355,33 +329,19 @@ export class RichText extends Component {
 
 	onTextUpdate( event ) {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			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.toString() !== 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
 	 */
@@ -604,7 +564,7 @@ export class RichText extends Component {
 		// Check if value is up to date with latest state of native AztecView.
 		if (
 			event.nativeEvent.text &&
-			event.nativeEvent.text !== this.props.value
+			event.nativeEvent.text !== this.props.value.toString()
 		) {
 			this.onTextUpdate( event );
 		}
@@ -629,7 +589,7 @@ export class RichText extends Component {
 		// this approach is not perfectly reliable.
 		const isManual =
 			this.lastAztecEventType !== 'input' &&
-			this.props.value === this.value;
+			this.props.value.toString() === this.value.toString();
 		if ( hasChanged && isManual ) {
 			const value = this.createRecord();
 			const activeFormats = getActiveFormats( value );
@@ -696,10 +656,10 @@ export class RichText extends Component {
 
 		// Check and dicsard stray event, where the text and selection is equal to the ones already cached.
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
-			unescapeSpaces( event.nativeEvent.text )
+			event.nativeEvent.text
 		);
 		if (
-			contentWithoutRootTag === this.value &&
+			contentWithoutRootTag === this.value.toString() &&
 			realStart === this.selectionStart &&
 			realEnd === this.selectionEnd
 		) {
@@ -739,8 +699,6 @@ export class RichText extends Component {
 		if ( Array.isArray( value ) ) {
 			return create( {
 				html: childrenBlock.toHTML( value ),
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -748,8 +706,6 @@ export class RichText extends Component {
 		if ( this.props.format === 'string' ) {
 			return create( {
 				html: value,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
 				preserveWhiteSpace,
 			} );
 		}
@@ -800,7 +756,7 @@ export class RichText extends Component {
 			typeof nextProps.value !== 'undefined' &&
 			typeof this.props.value !== 'undefined' &&
 			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
-			nextProps.value !== this.props.value
+			nextProps.value.toString() !== this.props.value.toString()
 		) {
 			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
 			//  let's force caret update if state has selection set.
@@ -864,17 +820,11 @@ export class RichText extends Component {
 		}
 	}
 
-	componentWillUnmount() {
-		if ( this._editor.isFocused() ) {
-			this._editor.blur();
-		}
-	}
-
 	componentDidUpdate( prevProps ) {
 		const { style, tagName } = this.props;
 		const { currentFontSize } = this.state;
 
-		if ( this.props.value !== this.value ) {
+		if ( this.props.value.toString() !== this.value.toString() ) {
 			this.value = this.props.value;
 		}
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
@@ -892,7 +842,7 @@ export class RichText extends Component {
 			// 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.value?.toString().length ?? this.selectionEnd;
 			this._editor.focus();
 			this.props.onSelectionChange(
 				lastCharacterPosition,
@@ -934,7 +884,8 @@ export class RichText extends Component {
 		// On android if content is empty we need to send no content or else the placeholder will not show.
 		if (
 			! this.isIOS &&
-			( value === '' || value === EMPTY_PARAGRAPH_TAGS )
+			( value.toString() === '' ||
+				value.toString() === EMPTY_PARAGRAPH_TAGS )
 		) {
 			return '';
 		}
@@ -1323,7 +1274,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/native/test/__snapshots__/index.native.js.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RichText/> Font Size renders component with style and font size 1`] = `
+exports[`<RichText/> when applying the font size renders component with style and font size 1`] = `
 "<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
 <p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
+exports[`<RichText/> when applying the font size should update the font size when style prop with font size property is provided 1`] = `
 <View
   style={
     [
@@ -42,7 +42,7 @@ exports[`<RichText/> Font Size should update the font size when style prop with
 </View>
 `;
 
-exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
+exports[`<RichText/> when applying the font size should update the font size with decimals when style prop with font size property is provided 1`] = `
 <View
   style={
     [