Verse block: theme compatibility issue - text cut off

[xpurichan]

Summary

Adding "long" lines text inside of the Verse block can cause the text to run off of the block and it won't be shown. This seems to be based on the theme and how much width it allows for the main content column.

In this example we can see text being cut off in a Verse block within a page of the photo-blog theme:

Other themes like Spatial which have wider content areas function fine with this same length of text:

However, if I were to double the length of the longest line of text here then it would again be cut off.

What I expected

Text shouldn't be cut off in a way that make it impossible to view. Text should run on to a new line as needed.

What happened instead

Text is cut off and impossible to read on some themes with narrow content areas.

Context / Source

#user-report in 2288979-zen

[happychait]

Another report in 18436954-hc

I suggested to change the Verse block to Paragraph block, and select Inline Code formatting to make the Paragraph block look like a verse.

[edwinho89]

2738011-zen

Looks to be the same case in Twenty Twenty theme as well.

[edwinho89]

23013898-hc

[thabotswana]

Another report here where the Verse block is failing to wrap the text on mobile browsers: 3601052-zen

I was able to replicate using both Independent Publisher 2 and Twenty Twenty.

[simison]

@jeffikus hi! this seems like a theme issue, could you help triage this?

[jeffikus]

@simison if this is a theme issue, can you please report it in https://github.com/Automattic/themes/issues/new

[poojashetty18]

Another report here where the Verse block is breaking the first letter in browsers 4118581-zen

[kavyagokul]

Core bug filed for this issue https://github.com/WordPress/gutenberg/issues/44924

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 2288979-zen
• [ ] 2738011-zen
• [ ] 3601052-zen
• [ ] 4118581-zen