iOS Quote and Pull Quote blocks render typography discrepancies

[dcalhoun]

Description

When adding Quote and Pull Quote blocks on iOS, there are several typographic issues rendered:

• Quote & Pull Quote: unexpected p tags within citation line breaks, incorrect text size
• Pull Quote: Misaligned text

The incorrect text size appears to have surfaced in the WP 21.4 release. The unexpected p tags and misalignment appear to have surfaced in the pending WP 21.5 release.

The incorrect text size may only surface for block themes where custom styles/typography is supported.

Step-by-step reproduction instructions

1. Add Quote/Pull quote block.
2. Add multiple lines of text in the quote body.
3. Add multiline lines of text in the citation.

Expected behaviour

Correct text size and alignment is displayed. p tags are not inserted for the citation field.

Actual behaviour

Incorrect text size and alignment is displayed. p tags are inserted for the citation field.

Screenshots or screen recording (optional)

21.3

WPiOS.21.3.MP4

21.4

WPiOS.21.4.MP4

21.5

WPiOS.21.5.MP4

WordPress information

• WordPress version: 6.1.1
• Gutenberg version: 14.9.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No, Geologist.

Device information

• Device: iPhone SE
• Operating system: iOS 16.1
• WordPress app version: 21.5

[fluiddot]

Quote & Pull Quote: unexpected p tags within citation line breaks

I investigated this issue further and seems that might be related to Aztec. When the Quote block is created, the content of the citation element is an empty string. However, when focusing on the Citation text input, the text is updated with the value <p></p> 🤔 .

As a side note, I also noticed that this issue can't be reproduced when connecting the Chrome debugger 🙃 .

[fluiddot]

I tried to debug the issue and noticed the following difference in Gutenberg Mobile trunk before and after this PR was merged:

Before:

After:

NOTE: The logs generated after focusing the text input were produced after typing the character a.

As you can see, there's an extra onSelectionChangeFromAztec event triggered when focusing the Citation text input that is setting the content value to <p></p>.