Button Block: fix space insertion

[ellatrix]

Description

Fixes #14914.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[jasmussen]

I don't want to block this fix if it makes the Button block unusable in Firefox. But this PR as it is, will cause #10565 to regress back again, so if there is at all time, I would like us to first understand how the whitespace rules breaks things in Firefox even though it should be scoped to just the preview (.block-editor-block-preview__content ).

[ellatrix]

These seem to be the built styles:

.wp-block-button__link {
  background-color: #32373c;
  border: none;
  border-radius: 28px;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  margin: 0;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word; }

[ellatrix]

@jasmussen Made a mistake. It wasn't your commit that broke it, it seems to be a way older issue! :)

[aduth]

In my testing, I still see the original issue meant to be addressed by #10565, but ... I also see it in master, so it doesn't seem like something which regressed here.

[aduth]

Safe to say this is !important because it breaks spectacularly when any other style takes precedence?

[ellatrix]

Yes, I would say that this is the only CSS rule required for RichText to work properly. It might even be better to insert it inline? Not sure.

[aduth]

For posterity's sake: I investigated why this was here in the first place. It was introduced in #5662. I verified the change here does not regress #5628.

[ellatrix]

Thank you!

[jasmussen]

As noted in #14925 (comment), this will regress #10565. Which is not the end of the world, but also worth noting.

[ellatrix]

@jasmussen How is that possible? I'm not touching the styles in .block-editor-block-preview__content?

[ellatrix]

Ah, in the small previews, they're all RichText instances. That's strange. Why is the save function not used to preview the transforms?

[jasmussen]

The !important would override the preview aspects.

I can't answer why the save function isn't used. It sounds like that might be a good solution? Another would be to provide placeholder content in the previews, though I seem to recall us discussing and dismissing that idea in the past?

[ellatrix]

@jasmussen I fixed it but ideally, it should be revised. :)

[jasmussen]

Thank you! 💕