Menu: Truncation breaks with break-all rather than break-word

[jasmussen]

Example:

Shown here, the following description breaks inside block attributes due to truncation using break-all instead of break-word:

Inspired by the Eiffel Tower, this red and white tower is one of Tokyo's most recognizable landmarks. It offers observation decks with sweeping views of the city.

Suggestion: use break-word instead.

[jasmussen]

CC: @WordPress/gutenberg-components in case this resonates!

[im3dabasia]

Hi @jasmussen,

Thank you for raising this issue! Could you please provide the steps to reproduce it? That would be really helpful.

[jasmussen]

Try this code in your functions.php:

function init_test_meta_fields() {
	register_post_type(
		'landmark',
		array(
			'label'        => 'Landmark',
			'public'       => true,
			'supports'     => array( 'title', 'editor', 'comments', 'revisions', 'trackbacks', 'author', 'excerpt', 'page-attributes', 'thumbnail', 'custom-fields', 'post-formats' ),
			'has_archive'  => true,
			'show_in_rest' => true,
		),
	);
	register_meta(
		'post',
		'landmark_description',
		array(
			'object_subtype' => 'landmark',
			'label'          => 'Description',
			'show_in_rest'   => true,
			'single'         => true,
			'type'           => 'string',
			'default'        => 'Inspired by the Eiffel Tower, this red and white tower is one of Tokyo\'s most recognizable landmarks. It offers observation decks with sweeping views of the city.',
		)
	);
}

add_action( 'init', 'init_test_meta_fields' );

Then create a new post of the "Landmark" type, then edit that post and click attributes, and open the content flyout.

[im3dabasia]

Thank you, @jasmussen, for providing the code snippet. I was able to replicate the issue, and the patch in PR #67011 effectively resolves it. The break-word property now shifts the entire word to a new line, as shown in the "After" screenshot.

I tested the solution, and it works as expected. ✅

Before	After

[jasmussen]

Nice, thanks for the contribution!

[mirka]

Tweaking the issue title since this is a characteristic of the Menu.ItemHelpText component specifically, not Truncate (which is word-break: normal).