RichText: replace deprecated multiline prop with simple multiple instances

docs/reference-guides/block-api/block-attributes.md

@@ -305,39 +305,6 @@ Attribute available in the block:
 { "content": "The inner text of the <strong>figcaption</strong> element" }
 ```
 
-Use the `multiline` property to extract the inner HTML of matching tag names for the use in `RichText` with the `multiline` prop.
-
-_Example_: Extract the `content` attribute from a blockquote element found in the block's markup.
-
-Saved content:
-```html
-<div>
-	Block Content
-
-	<blockquote>
-		<p>First line</p>
-		<p>Second line</p>
-	</blockquote>
-</div>
-```
-
-Attribute definition:
-```js
-{
-	content: {
-		type: 'string',
-		source: 'html',
-		multiline: 'p',
-		selector: 'blockquote',
-	}
-}
-```
-
-Attribute available in the block:
-```js
-{ "content": "<p>First line</p><p>Second line</p>" }
-```
-
 ### `query` source
 
 Use `query` to extract an array of values from markup. Entries of the array are determined by the `selector` argument, where each matched element within the block will have an entry structured corresponding to the second argument, an object of attribute sources.

packages/block-editor/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+- The Deprecated multiline prop on RichText will now fall back to using multiple
+  rich text instances instead of a single multiline instance. The prop remains
+  deprecated.
+
 ## 12.9.0 (2023-08-31)
 
 ### Enhancements

packages/block-editor/src/components/rich-text/index.js

@@ -44,8 +44,9 @@ import { useInputEvents } from './use-input-events';
 import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
-import { getMultilineTag, getAllowedFormats } from './utils';
+import { getAllowedFormats } from './utils';
 import { Content } from './content';
+import RichTextMultiline from './multiline';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -81,12 +82,12 @@ function removeNativeProps( props ) {
 	return restProps;
 }
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName = 'div',
-		value: originalValue = '',
-		onChange: originalOnChange,
+		value: adjustedValue = '',
+		onChange: adjustedOnChange,
 		isSelected: originalIsSelected,
 		multiline,
 		inlineToolbar,
@@ -111,18 +112,6 @@ function RichTextWrapper(
 	},
 	forwardedRef
 ) {
-	if ( multiline ) {
-		deprecated( 'wp.blockEditor.RichText multiline prop', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'nested blocks (InnerBlocks)',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
-		} );
-	}
-
-	const instanceId = useInstanceId( RichTextWrapper );
-
-	identifier = identifier || instanceId;
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
@@ -157,33 +146,12 @@ function RichTextWrapper(
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
 		disableFormats,
 	} );
 	const hasFormats =
 		! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
-	let adjustedValue = originalValue;
-	let adjustedOnChange = originalOnChange;
-
-	// Handle deprecated format.
-	if ( Array.isArray( originalValue ) ) {
-		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/',
-		} );
-
-		adjustedValue = childrenSource.toHTML( originalValue );
-		adjustedOnChange = ( newValue ) =>
-			originalOnChange(
-				childrenSource.fromDOM(
-					__unstableCreateElement( document, newValue ).childNodes
-				)
-			);
-	}
 
 	const onSelectionChange = useCallback(
 		( start, end ) => {
@@ -292,7 +260,6 @@ function RichTextWrapper(
 		onSelectionChange,
 		placeholder,
 		__unstableIsSelected: isSelected,
-		__unstableMultilineTag: multilineTag,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
 		__unstableDependencies: [ ...dependencies, tagName ],
@@ -380,7 +347,6 @@ function RichTextWrapper(
 						onReplace,
 						onSplit,
 						__unstableEmbedURLOnPaste,
-						multilineTag,
 						preserveWhiteSpace,
 						pastePlainText,
 					} ),
@@ -394,7 +360,6 @@ function RichTextWrapper(
 						value,
 						onReplace,
 						onSplit,
-						multilineTag,
 						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,
@@ -421,7 +386,47 @@ function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( 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 );
 
 ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {

packages/block-editor/src/components/rich-text/index.native.js

@@ -20,13 +20,9 @@ import {
 	__experimentalRichText as RichText,
 	__unstableCreateElement,
 	isEmpty,
-	__unstableIsEmptyLine as isEmptyLine,
 	insert,
-	__unstableInsertLineSeparator as insertLineSeparator,
 	create,
-	replace,
 	split,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
 	toHTMLString,
 	slice,
 } from '@wordpress/rich-text';
@@ -338,32 +334,20 @@ function RichTextWrapper(
 				onCustomEnter();
 			}
 
-			if ( multiline ) {
-				if ( shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( value ) ) {
-					splitValue( value );
-				} else {
-					onChange( insertLineSeparator( value ) );
-				}
-			} else {
-				const { text, start: splitStart, end: splitEnd } = value;
-				const canSplitAtEnd =
-					onSplitAtEnd &&
-					splitStart === splitEnd &&
-					splitEnd === text.length;
-
-				if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( value );
+			const { text, start: splitStart, end: splitEnd } = value;
+			const canSplitAtEnd =
+				onSplitAtEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length;
+
+			if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
+				if ( ! disableLineBreaks ) {
+					onChange( insert( value, '\n' ) );
 				}
+			} else if ( ! canSplit && canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if ( canSplit ) {
+				splitValue( value );
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -471,20 +455,8 @@ function RichTextWrapper(
 			} );
 
 			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
+				const valueToInsert = create( { html: content } );
 				addActiveFormats( valueToInsert, 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
-					);
-				}
-
 				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