Quote: Rename the align attribute to textAlign

docs/reference-guides/core-blocks.md

@@ -671,8 +671,8 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
--	**Attributes:** align, citation, value
+-	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
+-	**Attributes:** citation, textAlign, value
 
 ## Read More
 

packages/block-library/src/quote/block.json

@@ -23,11 +23,12 @@
 			"default": "",
 			"__experimentalRole": "content"
 		},
-		"align": {
+		"textAlign": {
 			"type": "string"
 		}
 	},
 	"supports": {
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"__experimentalOnEnter": true,
 		"typography": {

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

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 export const migrateToQuoteV2 = ( attributes ) => {
 	const { value, ...restAttributes } = attributes;
@@ -34,6 +35,76 @@ export const migrateToQuoteV2 = ( attributes ) => {
 	];
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+// Migrate existing text alignment settings to the renamed attribute.
+const migrateTextAlign = ( attributes ) => {
+	const { align, ...rest } = attributes;
+	// Check if there are valid alignments stored in the old attribute
+	// and assign them to the new attribute name.
+	return TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+};
+
+// Renamed the 'align' attribute to 'textAlign'.
+const v4 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: compose( migrateToQuoteV2, migrateTextAlign ),
+};
+
 const v3 = {
 	attributes: {
 		value: {
@@ -239,4 +310,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1, v0 ];
+export default [ v4, v3, v2, v1, v0 ];

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

@@ -74,7 +74,7 @@ export default function QuoteEdit( {
 	className,
 	style,
 } ) {
-	const { align, citation } = attributes;
+	const { textAlign, citation } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
@@ -86,7 +86,7 @@ export default function QuoteEdit( {
 
 	const blockProps = useBlockProps( {
 		className: classNames( className, {
-			[ `has-text-align-${ align }` ]: align,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		...( ! isWebPlatform && { style } ),
 	} );
@@ -99,9 +99,9 @@ export default function QuoteEdit( {
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
-					value={ align }
+					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
+						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
@@ -131,7 +131,9 @@ export default function QuoteEdit( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
-						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
+						{ ...( ! isWebPlatform
+							? { textAlign: attributes.textAlign }
+							: {} ) }
 					/>
 				) }
 			</BlockQuotation>

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

@@ -9,10 +9,10 @@ import classNames from 'classnames';
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, citation } = attributes;
+	const { textAlign, citation } = attributes;
 
 	const className = classNames( {
-		[ `has-text-align-${ align }` ]: align,
+		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
 	return (

test/integration/fixtures/blocks/core__quote__deprecated-2.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:quote {"align":"right"} -->
-<blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
 <p>Testing deprecated quote block...</p>
 <!-- /wp:paragraph --><cite>...with a caption</cite></blockquote>
 <!-- /wp:quote -->