Twenty Nineteen: Latest posts block: Post title overlaps other titles on certain screen widths

[arunsathiya]

Affects: Only Twenty Nineteen. Does not affect other core themes like Twenty Seventeen or Twenty Sixteen.

On certain screen widths, with the "Latest posts" Gutenberg block, the long post title overlaps with the nearby titles. This seems to happen only for titles having characters like "/" on it, at the end. I haven't been able to see if this is the case with other special characters.

The attached images can help understand this better.

Video ​https://cloudup.com/c2G8sjrlp1b showing that this is not affected with other themes like Twenty Seventeen.

[arunsathiya]

Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen

[arunsathiya]

Title overlapping with other titles on "Latest posts" Gutenberg block with Twenty Nineteen

[mukesh27]

Hi @arunsathiya, Welcome to WordPres Trac! Thanks for the report.

i also replicate same issue in my setup when string is longer without space, So need to add word-break: break-word; in grid layout CSS.

[mukesh27]

Patch.

[nrqsnchz]

Removing the ui-feedback label since this is only a visual bug.

[karmatosed]

In testing this does resolve it for me so moving this to recommend commit and also next version, thank you.

[karmatosed]

Without patch

[karmatosed]

With patch

[karmatosed]

Whilst this patch does fix it I am going to add second opinion as in two-minds about using 'break-word' due to deprecation. We could use 'overflow-wrap: anywhere' but that doesn't work for Safari older versions.

I do know that break-word is used in other themes so for now I am curious what approaches others would take here. Let's get some opinions into this ticket for feedback.

[karmatosed]

This was discussed in today's bug scrub session and it needs to be looked at if the block or the theme is to provide the solution. props @poena for the suggestion.

[poena]

I can reproduce this problem the latest post block in several themes, both bundled and other,
when the post title is extra long and does not have a space.

It breaks on the front but not in the editors, because there is a generic style for the editor
that hides the problem with the block.

I created a new issue in the Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/61347

Aside: One exception is Twenty Twenty-One, because it adds extra CSS for this block:

.wp-block-latest-posts.is-grid {
    word-wrap: break-word;
    word-break: break-word;
}

At the same time, Twenty Twenty-One does not break the word in the next and previous post navigation,
which Twenty Nineteen does. We somehow choose different solutions for each theme, and both themes break but in different places.