Button Block: Adding spaces when typing button text does not work

[mapk]

Describe the bug
When typing the text on a button, adding spaces between the words doesn't initially work. Going back to add the spaces later does work though.

To reproduce
Steps to reproduce the behavior:

1. Add a Button block.
2. Begin typing text in the button element and add spaces between words.
3. Observe the problem.

Expected behavior
I expect that when adding spaces between the text, it remains.

Screenshots

Desktop (please complete the following information):

• OS: OSX
• Browser Firefox latest version
• Gutenberg 5.4

[youknowriad]

It seems to work properly in Chrome but break in Firefox. Is this rich text related cc @ellatrix . This would be good to fix for 5.2

[ellatrix]

It seems that #10565 caused the problem. If you remove white-space: nowrap;, the issue is gone. Not sure why this rule is there for the button block (cc @jasmussen). The solution is probably to mark the rule as !important for rich text so no block can override it.

[ellatrix]

So, this issue has been around for 6 months?

[ellatrix]

I'm also not sure if using text-overflow: ellipsis; is a good idea to use on a rich text area.

[ellatrix]

How can you edit the text content if the content is trimmed?

[jasmussen]

Sorry about that!

If you remove white-space: nowrap;, the issue is gone.

Incidentally I was just testing this PR by @talldan: #10128 (comment) — and this appears to change that rule and incidentally fix this. Correct?

I'm also not sure if using text-overflow: ellipsis; is a good idea to use on a rich text area.
How can you edit the text content if the content is trimmed?

Here's the full bit.

	// Don't let the placeholder text wrap in the variation preview.
	.editor-block-preview__content & {
		max-width: 100%;

 		.wp-block-button__link {
			max-width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

That was the purpose of the PR: to fix the problem with the button block in the variation preview, and nowhere else. That's why it's scoped to be inside .editor-block-preview__content. I don't know why it escapes that rule?

[ellatrix]

@jasmussen What's "variation preview"? Why does it only need to trimmed there?

[ellatrix]

// Don't let the placeholder text wrap in the variation preview.

This comment doesn't explain why.

And no worries, I should have added !important to the rule. :)

[jasmussen]

What's "variation preview"? Why does it only need to trimmed there?

It's this:

It's a little bit hacky, and uses scale to size down to fit. By eliding the text, the preview is more useful for the button.