feat: Toggle Pullquote block citation

Align with the web implementation by hiding the citation input behind a toggle button.
WordPress · Feb 15, 2024 · 075a308 · 075a308
1 parent 2c83220
commit 075a308
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/packages/block-library/src/pullquote/edit.native.js b/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>
 		</>

diff --git a/packages/block-library/src/pullquote/test/edit.native.js b/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' );