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 f1885196f67f7..cc3ae47a9df6d 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 945b88ae997f5..7c00b4d534985 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: '

A quick brown fox jumps over the lazy dog.

', + 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();