feat: Toggle mobile Quote block citation

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

@@ -74,7 +74,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 );
 
@@ -528,13 +527,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 }
@@ -585,7 +584,6 @@ export function RichTextWrapper(
 			minWidth={ minWidth }
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
-			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
@@ -671,7 +669,9 @@ ForwardedRichTextContainer.Content.defaultProps = {
 	value: '',
 };
 
-ForwardedRichTextContainer.Raw = RichText;
+ForwardedRichTextContainer.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

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-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/pullquote/edit.native.js

@@ -11,12 +11,16 @@ import {
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Figure } from './figure';
 import { BlockQuote } from './blockquote';
+import { Caption } from '../utils/caption';
+
+const isWebPlatform = Platform.OS === 'web';
 
 const getBackgroundColor = ( { attributes, colors, style } ) => {
 	const { backgroundColor } = attributes;
@@ -60,15 +64,13 @@ const getBorderColor = ( props ) => {
 
 function PullQuoteEdit( props ) {
 	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
-	const { textAlign, citation, value } = attributes;
+	const { textAlign, value } = attributes;
 
 	const blockProps = useBlockProps( {
 		backgroundColor: getBackgroundColor( props ),
 		borderColor: getBorderColor( props ),
 	} );
 
-	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -96,29 +98,30 @@ function PullQuoteEdit( props ) {
 						}
 						textAlign={ textAlign ?? 'center' }
 					/>
-					{ shouldShowCitation && (
-						<RichText
-							identifier="citation"
-							value={ citation }
-							aria-label={ __( 'Pullquote citation text' ) }
-							placeholder={
-								// translators: placeholder text used for the citation
-								__( 'Add citation' )
-							}
-							onChange={ ( nextCitation ) =>
-								setAttributes( {
-									citation: nextCitation,
-								} )
-							}
-							__unstableMobileNoFocusOnMount
-							textAlign={ textAlign ?? 'center' }
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-							}
-						/>
-					) }
+					<Caption
+						attributeKey="citation"
+						tagName={ isWebPlatform ? 'cite' : undefined }
+						style={ isWebPlatform && { display: 'block' } }
+						isSelected={ isSelected }
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						label={ __( 'Pullquote citation text' ) }
+						placeholder={
+							// translators: placeholder text used for the citation
+							__( 'Add citation' )
+						}
+						addLabel={ __( 'Add citation' ) }
+						removeLabel={ __( 'Remove citation' ) }
+						className="wp-block-pullquote__citation"
+						__unstableMobileNoFocusOnMount
+						textAlign={ textAlign ?? 'center' }
+						insertBlocksAfter={ insertBlocksAfter }
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
 				</BlockQuote>
 			</Figure>
 		</>

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

@@ -10,7 +10,6 @@ import {
 	getEditorHtml,
 	fireEvent,
 	within,
-	waitFor,
 	typeInRichText,
 } from 'test/helpers';
 
@@ -26,10 +25,6 @@ describe( 'Pullquote', () => {
 		// Arrange
 		const screen = await initializeEditor();
 		await addBlock( screen, 'Pullquote' );
-		// Await inner blocks to be rendered
-		const citationBlock = await waitFor( () =>
-			screen.getByPlaceholderText( 'Add citation' )
-		);
 
 		// Act
 		const pullquoteBlock = getBlock( screen, 'Pullquote' );
@@ -43,7 +38,9 @@ describe( 'Pullquote', () => {
 			keyCode: ENTER,
 		} );
 		typeInRichText( pullquoteTextInput, 'Again' );
-
+		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/quote/edit.js

@@ -105,7 +105,7 @@ export default function QuoteEdit( {
 				<Caption
 					attributeKey="citation"
 					tagName={ isWebPlatform ? 'cite' : undefined }
-					style={ { display: 'block' } }
+					style={ isWebPlatform && { display: 'block' } }
 					isSelected={ isSelected }
 					attributes={ attributes }
 					setAttributes={ setAttributes }

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/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' ] }