-
Notifications
You must be signed in to change notification settings - Fork 3
Conversation
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? |
@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 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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Testing against the latest commits in Gutenberg, I think this one is good to go now. Can someone else double check? |
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 |
@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? |
I think it's fine to push now. If / when that's fixed, the |
Sounds good. 👍 |
Plugin versions of Gutenberg change button markup inside of the editor. Previously it looked like this:
Now, the button markup looks like this:
Notice that there's no wrapping div anymore, and that the
wp-block-button__link
class has been relocated up to the same level aswp-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.