Quote block: button for cite add/remove (WordPress#59073)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

@@ -77,7 +77,6 @@ function removeNativeProps( props ) {
 		fontStyle,
 		minWidth,
 		maxWidth,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		...restProps

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

@@ -94,14 +94,13 @@ export function RichTextWrapper(
 		minWidth,
 		maxWidth,
 		onBlur,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
 		onEnter: onCustomEnter,
 		...props
 	},
-	forwardedRef
+	providedRef
 ) {
 	const instanceId = useInstanceId( RichTextWrapper );
 
@@ -529,13 +528,13 @@ export function RichTextWrapper(
 		[ onReplace, __unstableMarkAutomaticChange ]
 	);
 
-	const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
+	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );
 
 	return (
 		<RichText
 			clientId={ clientId }
 			identifier={ identifier }
-			ref={ mergedRef }
+			nativeEditorRef={ mergedRef }
 			value={ adjustedValue }
 			onChange={ adjustedOnChange }
 			selectionStart={ selectionStart }
@@ -586,7 +585,6 @@ export function RichTextWrapper(
 			minWidth={ minWidth }
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
-			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
@@ -657,27 +655,32 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This export does not actually implement a private API, but was exported
+// under this name for interoperability with the web version of the RichText
+// component.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
+PrivateRichText.Content = Content;
 
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
-ForwardedRichTextContainer.Content.defaultProps = {
+PrivateRichText.Content.defaultProps = {
 	format: 'string',
 	value: '',
 };
 
-ForwardedRichTextContainer.Raw = RichText;
+PrivateRichText.Raw = forwardRef( ( props, ref ) => (
+	<RichText { ...props } nativeEditorRef={ ref } />
+) );
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+export default PrivateRichText;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

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

@@ -1222,8 +1222,8 @@ export class RichText extends Component {
 					ref={ ( ref ) => {
 						this._editor = ref;
 
-						if ( this.props.setRef ) {
-							this.props.setRef( ref );
+						if ( this.props.nativeEditorRef ) {
+							this.props.nativeEditorRef( ref );
 						}
 					} }
 					style={ {

packages/block-editor/src/private-apis.native.js

@@ -5,6 +5,7 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
+import { PrivateRichText } from './components/rich-text/';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -14,4 +15,5 @@ lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
+	PrivateRichText,
 } );

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

@@ -494,7 +494,7 @@ function ButtonEdit( props ) {
 					<View pointerEvents="none" style={ outLineStyles } />
 				) }
 				<RichText
-					setRef={ onSetRef }
+					ref={ onSetRef }
 					placeholder={ placeholderText }
 					value={ text }
 					onChange={ onChangeText }

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

@@ -10,21 +10,21 @@ import { __ } from '@wordpress/i18n';
 import {
 	AlignmentControl,
 	BlockControls,
-	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
+import { verse } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { migrateToQuoteV2 } from './deprecated';
+import { Caption } from '../utils/caption';
 
 const isWebPlatform = Platform.OS === 'web';
 
@@ -73,23 +73,12 @@ export default function QuoteEdit( {
 	clientId,
 	className,
 	style,
+	isSelected,
 } ) {
-	const { textAlign, citation } = attributes;
+	const { textAlign } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
-	const hasSelection = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return (
-				hasSelectedInnerBlock( clientId, true ) ||
-				isBlockSelected( clientId )
-			);
-		},
-		[ clientId ]
-	);
-
 	const blockProps = useBlockProps( {
 		className: classNames( className, {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -114,33 +103,27 @@ export default function QuoteEdit( {
 			</BlockControls>
 			<BlockQuotation { ...innerBlocksProps }>
 				{ innerBlocksProps.children }
-				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
-					<RichText
-						identifier="citation"
-						tagName={ isWebPlatform ? 'cite' : undefined }
-						style={ { display: 'block' } }
-						value={ citation }
-						onChange={ ( nextCitation ) => {
-							setAttributes( {
-								citation: nextCitation,
-							} );
-						} }
-						__unstableMobileNoFocusOnMount
-						aria-label={ __( 'Quote citation' ) }
-						placeholder={
-							// translators: placeholder text used for the
-							// citation
-							__( 'Add citation' )
-						}
-						className="wp-block-quote__citation"
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-						{ ...( ! isWebPlatform ? { textAlign } : {} ) }
-					/>
-				) }
+				<Caption
+					attributeKey="citation"
+					tagName={ isWebPlatform ? 'cite' : undefined }
+					style={ isWebPlatform && { display: 'block' } }
+					isSelected={ isSelected }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					__unstableMobileNoFocusOnMount
+					icon={ verse }
+					label={ __( 'Quote citation' ) }
+					placeholder={
+						// translators: placeholder text used for the
+						// citation
+						__( 'Add citation' )
+					}
+					addLabel={ __( 'Add citation' ) }
+					removeLabel={ __( 'Remove citation' ) }
+					className="wp-block-quote__citation"
+					insertBlocksAfter={ insertBlocksAfter }
+					{ ...( ! isWebPlatform ? { textAlign } : {} ) }
+				/>
 			</BlockQuotation>
 		</>
 	);

packages/block-library/src/quote/test/edit.native.js

@@ -10,7 +10,6 @@ import {
 	getEditorHtml,
 	fireEvent,
 	within,
-	waitFor,
 	typeInRichText,
 } from 'test/helpers';
 
@@ -40,14 +39,9 @@ describe( 'Quote', () => {
 				},
 			}
 		);
-		// Await inner blocks to be rendered
-		const citationBlock = await waitFor( () =>
-			screen.getByPlaceholderText( 'Add citation' )
-		);
 
 		// Act
 		fireEvent.press( quoteBlock );
-		// screen.debug();
 		let quoteTextInput =
 			within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
 		typeInRichText( quoteTextInput, 'A great statement.' );
@@ -61,6 +55,10 @@ describe( 'Quote', () => {
 				'Start writing…'
 			)[ 1 ];
 		typeInRichText( quoteTextInput, 'Again.' );
+		fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+		fireEvent.press( screen.getByLabelText( 'Add citation' ) );
+		const citationBlock =
+			await screen.findByPlaceholderText( 'Add citation' );
 		const citationTextInput =
 			within( citationBlock ).getByPlaceholderText( 'Add citation' );
 		typeInRichText( citationTextInput, 'A person' );

packages/block-library/src/utils/caption.js

@@ -23,10 +23,8 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import { unlock } from '../lock-unlock';
 
-const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
-
 export function Caption( {
-	key = 'caption',
+	attributeKey = 'caption',
 	attributes,
 	setAttributes,
 	isSelected,
@@ -36,9 +34,15 @@ export function Caption( {
 	showToolbarButton = true,
 	className,
 	disableEditing,
+	tagName = 'figcaption',
+	addLabel = __( 'Add caption' ),
+	removeLabel = __( 'Remove caption' ),
+	icon = captionIcon,
+	...props
 } ) {
-	const caption = attributes[ key ];
+	const caption = attributes[ attributeKey ];
 	const prevCaption = usePrevious( caption );
+	const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
 	const isCaptionEmpty = RichText.isEmpty( caption );
 	const isPrevCaptionEmpty = RichText.isEmpty( prevCaption );
 	const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty );
@@ -74,24 +78,22 @@ export function Caption( {
 						onClick={ () => {
 							setShowCaption( ! showCaption );
 							if ( showCaption && caption ) {
-								setAttributes( { caption: undefined } );
+								setAttributes( {
+									[ attributeKey ]: undefined,
+								} );
 							}
 						} }
-						icon={ captionIcon }
+						icon={ icon }
 						isPressed={ showCaption }
-						label={
-							showCaption
-								? __( 'Remove caption' )
-								: __( 'Add caption' )
-						}
+						label={ showCaption ? removeLabel : addLabel }
 					/>
 				</BlockControls>
 			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
-						identifier={ key }
-						tagName="figcaption"
+						identifier={ attributeKey }
+						tagName={ tagName }
 						className={ classnames(
 							className,
 							__experimentalGetElementClassName( 'caption' )
@@ -101,7 +103,7 @@ export function Caption( {
 						placeholder={ placeholder }
 						value={ caption }
 						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
+							setAttributes( { [ attributeKey ]: value } )
 						}
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
@@ -110,6 +112,7 @@ export function Caption( {
 							)
 						}
 						disableEditing={ disableEditing }
+						{ ...props }
 					/>
 				) }
 		</>

packages/editor/src/components/post-title/index.native.js

@@ -164,7 +164,7 @@ class PostTitle extends Component {
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
 				<RichText.Raw
-					setRef={ this.setRef }
+					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
 					tagName={ 'p' }
 					tagsToEliminate={ [ 'strong' ] }