Post title block default CSS: add a break-word rule by default

[audrasjb]

Description

Post title should have a minimal break-word rule by default to avoid content overflow when grid layout is used for query loops.

How has this been tested?

Using Gutenberg + Twenty-Twenty Two grid layout query loop.
For the content, I used Theme Review Team Unit test data.

Screenshots

Before the change:

After the change:

Types of changes

Adds a new CSS declaration in the post-title block SCSS stylesheet.
That's not a breaking change.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[carolinan]

The combination of display: inline-block and word-break: break-word does not prevent the overflow when the query loop uses the list view, only the grid view.

Does anyone know why display: inline-block is used when the title is a link?

[aristath]

The combination of display: inline-block and word-break: break-word does not prevent the overflow when the query loop uses the list view, only the grid view.

Does anyone know why display: inline-block is used when the title is a link?

It was done for #30666

Perhaps break-word should be moved to the parent element?
So the final CSS would be

.wp-block-post-title {
 	word-break: break-word;
}
.wp-block-post-title a {
 	display: inline-block;
}

[carolinan]

@audrasjb Do you know if you will have time to update this?

[audrasjb]

@carolinan yep sure, I'm on it!

[audrasjb]

@carolinan @aristath just refreshed the PR to move break-word declaration to the parent element.

[carolinan]

Thank you. I have tested the PR with Emptytheme and Twenty Twenty-Two and it is working well.