From cf0d6e3165f2a6ed3faaa47181f2a6d8a8f4528e Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Tue, 4 Jul 2023 17:10:26 -0400
Subject: [PATCH] fix: Paragraphs inherit parent text alignment

The Paragraph `align` attribute was renamed to `textAlign`. Hence, these
changes adapt the block list to pass the relevant attribute to its child
blocks.
---
 .../block-list/block-list-item.native.js      |  2 +-
 .../src/paragraph/test/edit.native.js         | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js
index f1885196f67f75..cc3ae47a9df6d8 100644
--- a/packages/block-editor/src/components/block-list/block-list-item.native.js
+++ b/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 {
diff --git a/packages/block-library/src/paragraph/test/edit.native.js b/packages/block-library/src/paragraph/test/edit.native.js
index 945b88ae997f58..7c00b4d5349852 100644
--- a/packages/block-library/src/paragraph/test/edit.native.js
+++ b/packages/block-library/src/paragraph/test/edit.native.js
@@ -11,6 +11,7 @@ import {
 	initializeEditor,
 	render,
 	setupCoreBlocks,
+	triggerBlockListLayout,
 	waitFor,
 	within,
 } from 'test/helpers';
@@ -195,6 +196,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();