RichText: Introduce new attributeKey prop

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

@@ -81,6 +81,7 @@ export function RichTextWrapper(
 	{
 		children,
 		tagName = 'div',
+		attributeKey,
 		value: adjustedValue = '',
 		onChange: adjustedOnChange,
 		isSelected: originalIsSelected,
@@ -117,6 +118,7 @@ export function RichTextWrapper(
 			alternative: 'block.json support key: "splitting"',
 		} );
 	}
+	identifier = identifier || attributeKey;
 
 	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();

packages/block-library/src/button/edit.js

@@ -268,9 +268,9 @@ function ButtonEdit( props ) {
 			>
 				<RichText
 					ref={ mergedRef }
+					attributeKey="text"
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
-					value={ text }
 					onChange={ ( value ) =>
 						setAttributes( {
 							text: removeAnchorTag( value ),
@@ -298,7 +298,6 @@ function ButtonEdit( props ) {
 					} }
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }
-					identifier="text"
 				/>
 			</div>
 			<BlockControls group="block">

packages/block-library/src/button/edit.native.js

@@ -241,11 +241,6 @@ function ButtonEdit( props ) {
 		);
 	}
 
-	function onChangeText( value ) {
-		const { setAttributes } = props;
-		setAttributes( { text: value } );
-	}
-
 	function onChangeBorderRadius( newRadius ) {
 		const { setAttributes, attributes } = props;
 		const { style } = attributes;
@@ -495,15 +490,13 @@ function ButtonEdit( props ) {
 				) }
 				<RichText
 					ref={ onSetRef }
+					attributeKey="text"
 					placeholder={ placeholderText }
-					value={ text }
-					onChange={ onChangeText }
 					style={ textStyles }
 					textAlign={ align }
 					placeholderTextColor={
 						style?.color || styles.placeholderTextColor.color
 					}
-					identifier="text"
 					tagName="p"
 					minWidth={ minWidth } // The minimum Button size.
 					maxWidth={ isFixedWidth ? minWidth : maxWidth } // The width of the screen.

packages/block-library/src/code/edit.js

@@ -6,8 +6,6 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 export default function CodeEdit( {
-	attributes,
-	setAttributes,
 	onRemove,
 	insertBlocksAfter,
 	mergeBlocks,
@@ -17,9 +15,7 @@ export default function CodeEdit( {
 		<pre { ...blockProps }>
 			<RichText
 				tagName="code"
-				identifier="content"
-				value={ attributes.content }
-				onChange={ ( content ) => setAttributes( { content } ) }
+				attributeKey="content"
 				onRemove={ onRemove }
 				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }

packages/block-library/src/code/edit.native.js

@@ -21,14 +21,7 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import styles from './theme.scss';
 
 export function CodeEdit( props ) {
-	const {
-		attributes,
-		setAttributes,
-		onRemove,
-		style,
-		insertBlocksAfter,
-		mergeBlocks,
-	} = props;
+	const { onRemove, style, insertBlocksAfter, mergeBlocks } = props;
 	const codeStyle = {
 		...usePreferredColorSchemeStyle(
 			styles.blockCode,
@@ -47,11 +40,9 @@ export function CodeEdit( props ) {
 		<View style={ codeStyle }>
 			<RichText
 				tagName="pre"
-				value={ attributes.content }
-				identifier="content"
+				attributeKey="content"
 				style={ textStyle }
 				underlineColorAndroid="transparent"
-				onChange={ ( content ) => setAttributes( { content } ) }
 				onMerge={ mergeBlocks }
 				onRemove={ onRemove }
 				placeholder={ __( 'Write code…' ) }

packages/block-library/src/details/edit.js

@@ -22,7 +22,7 @@ const TEMPLATE = [
 ];
 
 function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent, summary } = attributes;
+	const { showContent } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -65,15 +65,11 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			>
 				<summary onClick={ ( event ) => event.preventDefault() }>
 					<RichText
-						identifier="summary"
+						attributeKey="summary"
 						aria-label={ __( 'Write summary' ) }
 						placeholder={ __( 'Write summary…' ) }
 						allowedFormats={ [] }
 						withoutInteractiveFormatting
-						value={ summary }
-						onChange={ ( newSummary ) =>
-							setAttributes( { summary: newSummary } )
-						}
 					/>
 				</summary>
 				{ innerBlocksProps.children }

packages/block-library/src/file/edit.js

@@ -64,7 +64,6 @@ function ClipboardToolbarButton( { text, disabled } ) {
 function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		id,
-		fileName,
 		href,
 		textLinkHref,
 		textLinkTarget,
@@ -289,9 +288,8 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				) }
 				<div className="wp-block-file__content-wrapper">
 					<RichText
-						identifier="fileName"
 						tagName="a"
-						value={ fileName }
+						attributeKey="fileName"
 						placeholder={ __( 'Write file name…' ) }
 						withoutInteractiveFormatting
 						onChange={ ( text ) =>
@@ -305,16 +303,15 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						<div className="wp-block-file__button-richtext-wrapper">
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
-								identifier="downloadButtonText"
 								tagName="div" // Must be block-level or else cursor disappears.
+								attributeKey="downloadButtonText"
 								aria-label={ __( 'Download button text' ) }
 								className={ clsx(
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'
 									)
 								) }
-								value={ downloadButtonText }
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }
 								onChange={ ( text ) =>

packages/block-library/src/heading/edit.js

@@ -110,9 +110,8 @@ function HeadingEdit( {
 				</BlockControls>
 			) }
 			<RichText
-				identifier="content"
 				tagName={ tagName }
-				value={ content }
+				attributeKey="content"
 				onChange={ onContentChange }
 				onMerge={ mergeBlocks }
 				onReplace={ onReplace }

packages/block-library/src/heading/edit.native.js

@@ -105,9 +105,8 @@ function HeadingEdit( {
 				/>
 			</BlockControls>
 			<RichText
-				identifier="content"
 				tagName={ tagName }
-				value={ content }
+				attributeKey="content"
 				onChange={ onContentChange }
 				onMerge={ mergeBlocks }
 				onSplit={ ( value, isOriginal ) => {

packages/block-library/src/home-link/edit.js

@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 
 const preventDefault = ( event ) => event.preventDefault();
 
-export default function HomeEdit( { attributes, setAttributes, context } ) {
+export default function HomeEdit( { attributes, context } ) {
 	const homeUrl = useSelect( ( select ) => {
 		// Site index.
 		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
@@ -42,12 +42,9 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 				onClick={ preventDefault }
 			>
 				<RichText
-					identifier="label"
+					attributeKey="label"
 					className="wp-block-home-link__label"
 					value={ attributes.label ?? __( 'Home' ) }
-					onChange={ ( labelValue ) => {
-						setAttributes( { label: labelValue } );
-					} }
 					aria-label={ __( 'Home link text' ) }
 					placeholder={ __( 'Add home link' ) }
 					withoutInteractiveFormatting

packages/block-library/src/list-item/edit.js

@@ -68,12 +68,7 @@ export function IndentUI( { clientId } ) {
 	);
 }
 
-export default function ListItemEdit( {
-	attributes,
-	setAttributes,
-	clientId,
-	mergeBlocks,
-} ) {
+export default function ListItemEdit( { attributes, clientId, mergeBlocks } ) {
 	const { placeholder, content } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -88,12 +83,8 @@ export default function ListItemEdit( {
 			<li { ...innerBlocksProps }>
 				<RichText
 					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
-					identifier="content"
 					tagName="div"
-					onChange={ ( nextContent ) =>
-						setAttributes( { content: nextContent } )
-					}
-					value={ content }
+					attributeKey="content"
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
 					onMerge={ onMerge }

packages/block-library/src/list-item/edit.native.js

@@ -30,7 +30,6 @@ const OPACITY = '9e';
 
 export default function ListItemEdit( {
 	attributes,
-	setAttributes,
 	clientId,
 	style,
 	mergeBlocks,
@@ -148,12 +147,8 @@ export default function ListItemEdit( {
 				>
 					<RichText
 						__unstableUseSplitSelection
-						identifier="content"
 						tagName="p"
-						onChange={ ( nextContent ) =>
-							setAttributes( { content: nextContent } )
-						}
-						value={ content }
+						attributeKey="content"
 						placeholder={ placeholder || __( 'List' ) }
 						placeholderTextColor={
 							defaultPlaceholderTextColorWithOpacity

packages/block-library/src/navigation-link/edit.js

@@ -505,14 +505,8 @@ export default function NavigationLinkEdit( {
 									<>
 										<RichText
 											ref={ ref }
-											identifier="label"
+											attributeKey="label"
 											className="wp-block-navigation-item__label"
-											value={ label }
-											onChange={ ( labelValue ) =>
-												setAttributes( {
-													label: labelValue,
-												} )
-											}
 											onMerge={ mergeBlocks }
 											onReplace={ onReplace }
 											__unstableOnSplitAtEnd={ () =>

packages/block-library/src/navigation-submenu/edit.js

@@ -450,12 +450,8 @@ export default function NavigationSubmenuEdit( {
 					{ /* eslint-enable */ }
 					<RichText
 						ref={ ref }
-						identifier="label"
+						attributeKey="label"
 						className="wp-block-navigation-item__label"
-						value={ label }
-						onChange={ ( labelValue ) =>
-							setAttributes( { label: labelValue } )
-						}
 						onMerge={ mergeBlocks }
 						onReplace={ onReplace }
 						aria-label={ __( 'Navigation link text' ) }

packages/block-library/src/paragraph/edit.js

@@ -152,13 +152,9 @@ function ParagraphBlock( {
 				/>
 			) }
 			<RichText
-				identifier="content"
 				tagName="p"
+				attributeKey="content"
 				{ ...blockProps }
-				value={ content }
-				onChange={ ( newContent ) =>
-					setAttributes( { content: newContent } )
-				}
 				onMerge={ mergeBlocks }
 				onReplace={ onReplace }
 				onRemove={ onRemove }

packages/block-library/src/paragraph/edit.native.js

@@ -29,7 +29,7 @@ function ParagraphBlock( {
 		return !! select( blockEditorStore ).getSettings().isRTL;
 	}, [] );
 
-	const { align, content, placeholder } = attributes;
+	const { align, placeholder } = attributes;
 
 	const styles = {
 		...( style?.baseColors && {
@@ -62,16 +62,10 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			<RichText
-				identifier="content"
 				tagName="p"
-				value={ content }
+				attributeKey="content"
 				deleteEnter
 				style={ styles }
-				onChange={ ( nextContent ) => {
-					setAttributes( {
-						content: nextContent,
-					} );
-				} }
 				onSplit={ ( value, isOriginal ) => {
 					let newAttributes;
 

packages/block-library/src/post-author/edit.js

@@ -206,14 +206,10 @@ function PostAuthorEdit( {
 				<div className="wp-block-post-author__content">
 					{ ( ! RichText.isEmpty( byline ) || isSelected ) && (
 						<RichText
-							identifier="byline"
+							attributeKey="byline"
 							className="wp-block-post-author__byline"
 							aria-label={ __( 'Post author byline text' ) }
 							placeholder={ __( 'Write byline…' ) }
-							value={ byline }
-							onChange={ ( value ) =>
-								setAttributes( { byline: value } )
-							}
 						/>
 					) }
 					<p className="wp-block-post-author__name">

packages/block-library/src/post-excerpt/edit.js

@@ -28,7 +28,7 @@ import { useCanEditEntity } from '../utils/hooks';
 const ELLIPSIS = '…';
 
 export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
+	attributes: { textAlign, showMoreOnNewLine, excerptLength },
 	setAttributes,
 	isSelected,
 	context: { postId, postType, queryId },
@@ -129,15 +129,11 @@ export default function PostExcerptEditor( {
 	}
 	const readMoreLink = (
 		<RichText
-			identifier="moreText"
-			className="wp-block-post-excerpt__more-link"
 			tagName="a"
+			attributeKey="moreText"
+			className="wp-block-post-excerpt__more-link"
 			aria-label={ __( '“Read more” link text' ) }
 			placeholder={ __( 'Add "read more" link text' ) }
-			value={ moreText }
-			onChange={ ( newMoreText ) =>
-				setAttributes( { moreText: newMoreText } )
-			}
 			withoutInteractiveFormatting
 		/>
 	);