Quote v2: revert markup changes (#39824)

WordPress · Mar 28, 2022 · 3ff4754 · 3ff4754
1 parent 3dddb15
commit 3ff4754
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 105 deletions.
diff --git a/packages/block-library/src/quote/v2/edit.js b/packages/block-library/src/quote/v2/edit.js
@@ -3,24 +3,21 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	BlockControls,
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	BlockQuotation,
-	ToolbarGroup,
-	ToolbarButton,
-} from '@wordpress/components';
+import { BlockQuotation } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
 
+const isWebPlatform = Platform.OS === 'web';
 const TEMPLATE = [ [ 'core/paragraph', {} ] ];
 
 export default function QuoteEdit( {
-	attributes: { attribution },
+	attributes: { citation },
 	setAttributes,
 	isSelected,
 	insertBlocksAfter,
@@ -29,64 +26,42 @@ export default function QuoteEdit( {
 	const isAncestorOfSelectedBlock = useSelect( ( select ) =>
 		select( blockEditorStore ).hasSelectedInnerBlock( clientId )
 	);
-	const hasAttribution = attribution !== null;
-	const isEditingQuote = isSelected || isAncestorOfSelectedBlock;
-	const showAttribution =
-		( isEditingQuote && hasAttribution ) ||
-		! RichText.isEmpty( attribution );
-
+	const hasSelection = isSelected || isAncestorOfSelectedBlock;
 	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(
-		showAttribution ? blockProps : {},
-		{
-			template: TEMPLATE,
-			templateInsertUpdatesSelection: true,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
+	} );
 
 	return (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						isActive={ hasAttribution }
-						label={ __( 'Toggle attribution visibility' ) }
-						onClick={ () =>
-							setAttributes( {
-								attribution: hasAttribution ? null : '',
-							} )
-						}
-					>
-						{ __( 'Add attribution' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			</BlockControls>
-			{ showAttribution ? (
-				<figure { ...blockProps }>
-					<BlockQuotation { ...innerBlocksProps } />
+			<BlockQuotation { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
 					<RichText
-						identifier="attribution"
-						tagName={ 'figcaption' }
+						identifier="citation"
+						tagName={ isWebPlatform ? 'cite' : undefined }
 						style={ { display: 'block' } }
-						value={ attribution ?? '' }
-						onChange={ ( nextAttribution ) => {
-							setAttributes( { attribution: nextAttribution } );
+						value={ citation }
+						onChange={ ( nextCitation ) => {
+							setAttributes( {
+								citation: nextCitation,
+							} );
 						} }
 						__unstableMobileNoFocusOnMount
-						aria-label={ __( 'Quote attribution' ) }
+						aria-label={ __( 'Quote citation' ) }
 						placeholder={
-							// translators: placeholder text used for the attribution
-							__( 'Add attribution' )
+							// translators: placeholder text used for the
+							// citation
+							__( 'Add citation' )
 						}
-						className="wp-block-quote__attribution"
+						className="wp-block-quote__citation"
 						__unstableOnSplitAtEnd={ () =>
 							insertBlocksAfter( createBlock( 'core/paragraph' ) )
 						}
 					/>
-				</figure>
-			) : (
-				<BlockQuotation { ...innerBlocksProps } />
-			) }
+				) }
+			</BlockQuotation>
 		</>
 	);
 }
diff --git a/packages/block-library/src/quote/v2/index.js b/packages/block-library/src/quote/v2/index.js
@@ -16,7 +16,7 @@ const settings = {
 	icon,
 	example: {
 		attributes: {
-			attribution: 'Julio Cortázar',
+			citation: 'Julio Cortázar',
 		},
 		innerBlocks: [
 			{
@@ -51,20 +51,8 @@ function registerQuoteV2Attributes( blockSettings, blockName ) {
 		return blockSettings;
 	}
 
-	// Register the new attribute.
-	Object.assign( blockSettings.attributes, {
-		attribution: {
-			type: 'string',
-			source: 'html',
-			selector: 'figcaption',
-			default: '',
-			__experimentalRole: 'content',
-		},
-	} );
-
 	// Deregister the old ones.
 	delete blockSettings.attributes.value;
-	delete blockSettings.attributes.citation;
 
 	return blockSettings;
 }

diff --git a/packages/block-library/src/quote/v2/save.js b/packages/block-library/src/quote/v2/save.js
@@ -4,22 +4,14 @@
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { attribution } = attributes;
+	const { citation } = attributes;
 	const blockProps = useBlockProps.save();
-
-	const hasAttribution = ! RichText.isEmpty( attribution );
-	return hasAttribution ? (
-		<figure { ...blockProps }>
-			<blockquote>
-				<InnerBlocks.Content />
-			</blockquote>
-			<figcaption>
-				<RichText.Content value={ attribution } />
-			</figcaption>
-		</figure>
-	) : (
+	return (
 		<blockquote { ...blockProps }>
 			<InnerBlocks.Content />
+			{ ! RichText.isEmpty( citation ) && (
+				<RichText.Content tagName="cite" value={ citation } />
+			) }
 		</blockquote>
 	);
 }
diff --git a/packages/block-library/src/quote/v2/transforms.js b/packages/block-library/src/quote/v2/transforms.js
@@ -17,7 +17,7 @@ const transforms = {
 				return createBlock(
 					'core/quote',
 					{
-						attribution: citation,
+						citation,
 						anchor,
 						fontSize,
 						style,
@@ -54,31 +54,23 @@ const transforms = {
 		},
 		{
 			type: 'raw',
-			schema: ( { phrasingContentSchema } ) => ( {
-				figure: {
-					require: [ 'blockquote' ],
-					children: {
-						blockquote: {
-							children: '*',
-						},
-						figcaption: {
-							children: phrasingContentSchema,
-						},
-					},
+			schema: () => ( {
+				blockquote: {
+					children: '*',
 				},
 			} ),
-			isMatch: ( node ) =>
-				node.nodeName === 'FIGURE' &&
-				!! node.querySelector( 'blockquote' ),
+			selector: 'blockquote',
 			transform: ( node ) => {
 				return createBlock(
 					'core/quote',
-					{
-						attribution: node.querySelector( 'figcaption' )
-							?.innerHTML,
-					},
+					// Don't try to parse any `cite` out of this content.
+					// * There may be more than one cite.
+					// * There may be more attribution text than just the cite.
+					// * If the cite is nested in the quoted text, it's wrong to
+					//   remove it.
+					{},
 					rawHandler( {
-						HTML: node.querySelector( 'blockquote' ).innerHTML,
+						HTML: node.innerHTML,
 						mode: 'BLOCKS',
 					} )
 				);
@@ -115,12 +107,12 @@ const transforms = {
 				);
 			},
 			transform: (
-				{ attribution, anchor, fontSize, style },
+				{ citation, anchor, fontSize, style },
 				innerBlocks
 			) => {
 				return createBlock( 'core/pullquote', {
 					value: serialize( innerBlocks ),
-					citation: attribution,
+					citation,
 					anchor,
 					fontSize,
 					style,
@@ -130,15 +122,15 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],
-			transform: ( { attribution, anchor }, innerBlocks ) =>
+			transform: ( { citation, anchor }, innerBlocks ) =>
 				createBlock(
 					'core/group',
 					{ anchor },
-					attribution
+					citation
 						? [
 								...innerBlocks,
 								createBlock( 'core/paragraph', {
-									content: attribution,
+									content: citation,
 								} ),
 						  ]
 						: innerBlocks
@@ -147,12 +139,12 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ '*' ],
-			transform: ( { attribution }, innerBlocks ) =>
-				attribution
+			transform: ( { citation }, innerBlocks ) =>
+				citation
 					? [
 							...innerBlocks,
 							createBlock( 'core/paragraph', {
-								content: attribution,
+								content: citation,
 							} ),
 					  ]
 					: innerBlocks,