fix: Paragraphs inherit parent text alignment

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

@@ -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();