Quote: Rename the align attribute to textAlign

docs/reference-guides/core-blocks.md

@@ -771,7 +771,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 -	**Name:** core/quote
 -	**Category:** text
 -	**Supports:** anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** align, citation, value
+-	**Attributes:** citation, textAlign, value
 
 ## Read More
 

packages/block-editor/src/components/block-list/block-list-item.native.js

@@ -98,7 +98,7 @@ function BlockListItemContent( {
 			const name = getBlockName( clientId );
 			const parentName = getBlockName( rootClientId );
 			const { align } = getBlockAttributes( clientId ) || {};
-			const { align: parentBlockAlign } =
+			const { textAlign: parentBlockAlign } =
 				getBlockAttributes( rootClientId ) || {};
 
 			return {

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

@@ -12,6 +12,7 @@ import {
 	initializeEditor,
 	render,
 	setupCoreBlocks,
+	triggerBlockListLayout,
 	waitFor,
 	within,
 	withFakeTimers,
@@ -213,6 +214,41 @@ describe( 'Paragraph block', () => {
 	` );
 	} );
 
+	it( 'should inherit parent alignment', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Quote' );
+		await triggerBlockListLayout( getBlock( screen, 'Quote' ) );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text right' ) );
+
+		// Assert
+		// This not an ideal assertion, as it relies implementation details of the
+		// component: prop names. However, the only aspect we can assert is the prop
+		// passed to Aztec, the native module controlling visual alignment. A less
+		// brittle alternative might be snapshotting, but RNTL does not yet support
+		// focused snapshots, which means the snapshot would be huge.
+		// https://github.com/facebook/react/pull/25329
+		expect(
+			screen.UNSAFE_queryAllByProps( {
+				value: '<p>A quick brown fox jumps over the lazy dog.</p>',
+				placeholder: 'Start writing…',
+				textAlign: 'right',
+			} ).length
+		).toBe( 2 ); // One for Aztec mock, one for the TextInput.
+	} );
+
 	it( 'should preserve alignment when split', async () => {
 		// Arrange
 		const screen = await initializeEditor();

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

@@ -22,7 +22,7 @@
 			"selector": "cite",
 			"__experimentalRole": "content"
 		},
-		"align": {
+		"textAlign": {
 			"type": "string"
 		}
 	},

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export const migrateToQuoteV2 = ( attributes ) => {
 	const { value, ...restAttributes } = attributes;
@@ -34,6 +34,102 @@ export const migrateToQuoteV2 = ( attributes ) => {
 	];
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+// Migrate existing text alignment settings to the renamed attribute.
+const migrateTextAlign = ( attributes, innerBlocks ) => {
+	const { align, ...rest } = attributes;
+	// Check if there are valid alignments stored in the old attribute
+	// and assign them to the new attribute name.
+	const migratedAttributes = TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+
+	return [ migratedAttributes, innerBlocks ];
+};
+
+// Migrate the v2 blocks with style === `2`;
+const migrateLargeStyle = ( attributes, innerBlocks ) => {
+	return [
+		{
+			...attributes,
+			className: attributes.className
+				? attributes.className + ' is-style-large'
+				: 'is-style-large',
+		},
+		innerBlocks,
+	];
+};
+
+// Version before the 'align' attribute was replaced with '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',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		__experimentalOnEnter: true,
+		__experimentalOnMerge: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+		color: {
+			gradients: true,
+			heading: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+	},
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	save( { attributes } ) {
+		const { align, citation } = attributes;
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<InnerBlocks.Content />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateTextAlign,
+};
+
 const v3 = {
 	attributes: {
 		value: {
@@ -87,7 +183,9 @@ const v3 = {
 			</blockquote>
 		);
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 };
 
 const v2 = {
@@ -109,7 +207,9 @@ const v2 = {
 			type: 'string',
 		},
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
@@ -151,15 +251,12 @@ const v1 = {
 	migrate( attributes ) {
 		if ( attributes.style === 2 ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-				className: attributes.className
-					? attributes.className + ' is-style-large'
-					: 'is-style-large',
-			} );
+			return migrateTextAlign(
+				...migrateLargeStyle( ...migrateToQuoteV2( restAttributes ) )
+			);
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -206,12 +303,10 @@ const v0 = {
 	migrate( attributes ) {
 		if ( ! isNaN( parseInt( attributes.style ) ) ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-			} );
+			return migrateTextAlign( ...migrateToQuoteV2( restAttributes ) );
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -239,4 +334,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 } ),
 	} );
@@ -100,9 +100,9 @@ export default function QuoteEdit( {
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
-					value={ align }
+					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
+						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
@@ -132,7 +132,7 @@ export default function QuoteEdit( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
-						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
+						{ ...( ! isWebPlatform ? { 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 (

packages/block-library/src/quote/test/__snapshots__/transforms.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Quote block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
@@ -14,7 +14,7 @@ exports[`Quote block transforms to Columns block 1`] = `
 
 exports[`Quote block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<div class="wp-block-group"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>

test/integration/fixtures/blocks/core__quote__deprecated-2.json

@@ -4,7 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"citation": "...with a caption",
-			"align": "right"
+			"textAlign": "right"
 		},
 		"innerBlocks": [
 			{

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

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

test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.html

@@ -0,0 +1,5 @@
+<!-- wp:quote {"align":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
+<p>Quote with the align attribute. Example: {"align":"right"}</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->

test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.json

@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/quote",
+		"isValid": true,
+		"attributes": {
+			"value": "",
+			"citation": "",
+			"textAlign": "right"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "Quote with the align attribute. Example: {\"align\":\"right\"}",
+					"dropCap": false
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.parsed.json

@@ -0,0 +1,25 @@
+[
+	{
+		"blockName": "core/quote",
+		"attrs": {
+			"align": "right"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n<p>Quote with the align attribute. Example: {\"align\":\"right\"}</p>\n",
+				"innerContent": [
+					"\n<p>Quote with the align attribute. Example: {\"align\":\"right\"}</p>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<blockquote class=\"wp-block-quote has-text-align-right\"></blockquote>\n",
+		"innerContent": [
+			"\n<blockquote class=\"wp-block-quote has-text-align-right\">",
+			null,
+			"</blockquote>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:quote {"textAlign":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
+<p>Quote with the align attribute. Example: {"align":"right"}</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->