Varya: Fix button styles

[kjellr]

Plugin versions of Gutenberg change button markup inside of the editor. Previously it looked like this:

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button</a></div>
<!-- /wp:button -->

Now, the button markup looks like this:

<!-- wp:button -->
<a class="wp-block-button wp-block-button__link">My button</a>
<!-- /wp:button -->

Notice that there's no wrapping div anymore, and that the wp-block-button__link class has been relocated up to the same level as wp-block-button. As a result, the theme's current button styles do not work get inherited correctly in the editor:

In order to fix this while still preserving compatibility with older versions of Gutenberg, we need to only target wp-block-button__link. This PR makes that change, and gets the editor styles for these buttons working again:

---

To test, please ensure that you try this against the current plugin version of Gutenberg (7.8.1), and also with the plugin deactivated.

[kjellr]

Latest updates here work pretty well in most scenarios, but they have a pretty major issue in the front end:

To reproduce, create a button _without_ the Gutenberg plugin active. Then view those buttons on the front end. Then activate the plugin and refresh. Can someone dig in and see what's causing this?

[jffng]

@kjellr I followed your steps to reproduce that front-end error.

After activating the plugin, it looks like the old button block markup is still in tact, which contains the wp-block-button wrapping div that was removed in this PR.

Gutenberg's default button block styles are then misapplied to the old markup, causing the front-end error.

Side note: after activating the plugin and adding a new button to the page, Gutenberg automatically updated all the buttons on that page to reflect the new markup, resolving the issue. This doesn't seem like a good solution though.

[jffng]

The only solution to the error that I can think of is to apply the missing default button block styles to the wp-block-button__link class.

But this makes me think the issue needs to be handled by Gutenberg. To maintain backwards compatibility, Gutenberg should target both the wp-block-button and wp-block-button__link elements individually with the same default button styles.

[kjellr]

Testing against the latest commits in Gutenberg, I think this one is good to go now. Can someone else double check?

[jffng]

Looks good, I only found one issue with old buttons using the outline style on the front end:

I pushed a commit to remove that second border and verified that it worked with old and new buttons.

It feels weird to set border: none here. But finding the simplest (i.e. fewest lines of CSS) way to support both the old and new markup would take a deeper dive / refactor of the button styles.

[kjellr]

@jffng according to WordPress/gutenberg#21747, I think that might be a wider issue. Do you think we should push this for now, or just wait for that to resolved upstream?

[jffng]

I think it's fine to push now. If / when that's fixed, the border: none rule would become unnecessary, but I don't think it'd break our styles.

[kjellr]

Sounds good. 👍