Incorrect font displayed in Verse and Preformatted blocks when opening a post

[fluiddot]

Description

Verse and Preformatted blocks render their content using the pre HTML tag, which should display the text with a fixed-width font (i.e. different from the rest of text blocks). This is the case when adding and editing these blocks, however, after saving and re-opening a post on Android, they show the regular font instead. The correct font is only applied after modifying the content of those blocks by adding a new line.

NOTE: As outlined in this comment, a variation of this issue can be also reproduced on iOS.

Step-by-step reproduction instructions

1. Open a post/page.
2. Add a Verse block with some text.
3. Add a Preformatted block with some text.
4. Observe that both blocks display the text with a different font family than other text blocks, like the Paragraph block.
5. Save the post/page.
6. Re-open the post/page.
7. Observe that both Verse and Preformatted blocks display the text with the regular font.
8. Edit both blocks and add new line on each.
9. Observe that they display the text with the correct font.

Expected behaviour

The Verse and Preformatted blocks should always display the text with a different font than the rest of the text blocks (i.e. a fixed-width font).

Actual behaviour

The Verse and Preformatted blocks display the text with the regular font when opening a post/page that already contains those blocks.

Screenshots or screen recording (optional)

After adding the blocks	After saving and re-opening the post/page

Font changes after modifying the blocks:

android-text-blocks.mp4

WordPress information

• WordPress version: N/A
• Gutenberg version: N/A
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty-One

Device information

• Device: Samsung Galaxy S20 FE 5G
• Operating system: Android 11
• WordPress app version: WordPress-Android 19.8.1

[dcalhoun]

A variation of this issue appears to occur on iOS now too. Inserting or viewing Preformatted and Verse blocks with Classic themes results in an incorrect font family. However, block themes appear to render as expected.

WP 21.2 Classic	WP 21.8 Classic	WP 21.8 Block

[fluiddot]

A variation of this issue appears to occur on iOS now too. Inserting or view Preformatted and Verse blocks with Classic themes results in an incorrect font family. However, block themes appear to render as expected.

Oh, good catch @dcalhoun. I'll update the issue's description and add a note to convey that this is happening on both platforms. Thanks!

[dcalhoun]

From my recent testing, this appears to occur in the Shortcode block now too. The correct font is rendered after pressing Return or Space.