Block Styles: Truncate long button labels

[shimotmk]

Resolves #40463
Related #40807 #41455

What?

Changed character limit to be calculated from character width.

Why?

How?

#40463 (comment) is used to calculate the width of the character count using the string-width package.
#40463 (comment)

Before

After

Testing Instructions

1. Refer to the following code to add a block style.

function twenty_twenty_two_register_block_styles() {
	// Hello,Hello,…
	register_block_style(
		'core/image',
		array(
			'name'  => 'twentytwentytwo-image-1',
			'label' => esc_html__( 'Hello,Hello,Hello', 'twentytwentyone' ),
		)
	);

	// Hola,Hola,Ho…
	register_block_style(
		'core/image',
		array(
			'name'  => 'twentytwentytwo-image-2',
			'label' => esc_html__( 'Hola,Hola,Hola', 'twentytwentyone' ),
		)
	);

	// こんにちは,こんにちは
	register_block_style(
		'core/image',
		array(
			'name'  => 'twentytwentytwo-image-3',
			'label' => esc_html__( 'こんにちは,こんにちは', 'twentytwentyone' ),
		)
	);

	// 你好,你好,你好,你好
	register_block_style(
		'core/image',
		array(
			'name'  => 'twentytwentytwo-image-4',
			'label' => esc_html__( '你好,你好,你好,你好', 'twentytwentyone' ),
		)
	);

	// Hello,こんにちは
	register_block_style(
		'core/image',
		array(
			'name'  => 'twentytwentytwo-image-5',
			'label' => esc_html__( 'Hello,こんにちは', 'twentytwentyone' ),
		)
	);
}
add_action( 'init', 'twenty_twenty_two_register_block_styles' );

2. Go to the block editor and place the image block.

3. Open the side panel and look at the style preview.

Screenshots or screencast

[mirka]

Thanks for contributing!

I see that the ellipsis isn't being shown. This is because the Button component has white-space: nowrap. We need to add a few more styles for this to look good (please keep the code comments, since they are non-obvious 🙂):

.block-editor-block-styles__item-text {
	// The Button component is white-space: nowrap, and that won't work with line-clamp.
	white-space: normal;

	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
	text-align: start;
	text-align-last: center;
}

The text-align is an interesting one. Notice how the ellipsis can get partially hidden without the special handling:

Before	After

(cc @ciampo for awareness. We might want to bake this into the components library if we encounter this again.)

[shimotmk]

@mirka
Thanks for your comment.
I still need to adjust the css.

I was able to confirm that the ellipsis is displayed in long CJK characters after applying the suggested CSS.

However, the ellipsis is no longer displayed for long English words.
So I added word-break: break-all;.

[mirka]

Nit: I'd prefer this to be written out (.block-editor-block-styles__item-text) so it can be searched easily across the codebase.

Also, no need to nest it this deep since the class will never appear anywhere else, and it just adds unnecessary specificity.

[shimotmk]

@mirka
Thanks for the review.

I've adjusted the .block-editor-block-styles__item-text class to make it easier to isolate and search.

How about something like this?

[mirka]

Great catch, I looked into this a little further and it's pretty interesting. This might be something we need to bake into Truncate. Maybe word-break: break-all when numberOfLines is 1, and overflow-wrap: break-word when it's multiple lines. I'll keep track of this as a separate issue.

[mirka]

Looks good, thanks for the solid i18n improvement! 🚀

[gziolo]

Cherry-picked for WordPress 6.0.2 release with 693a7ac.