Skip to content

Commit

Permalink
fix: Paragraphs inherit parent text alignment (#52293)
Browse files Browse the repository at this point in the history
The Paragraph `align` attribute was renamed to `textAlign`. Hence, these
changes adapt the block list to pass the relevant attribute to its child
blocks.
  • Loading branch information
dcalhoun authored Jul 7, 2023
1 parent fa4566b commit f2f96c5
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
36 changes: 36 additions & 0 deletions packages/block-library/src/paragraph/test/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
initializeEditor,
render,
setupCoreBlocks,
triggerBlockListLayout,
waitFor,
within,
} from 'test/helpers';
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit f2f96c5

Please sign in to comment.