Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#49863 closed defect (bug) (invalid)

Twenty Nineteen: Button block editor styles need a refresh

Reported by: kjellr's profile kjellr Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: Cc:

Description

Post WordPress 5.4, the Gutenberg plugin now syncs up the button markup in the editor with what's rendered on the front end:

https://github.com/WordPress/gutenberg/pull/21266#issuecomment-611344160

Old button markup:

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

New button markup:

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

Twenty Nineteen's editor styles for the button block currently target the .wp-block-button__link selector as a child of the wp-block-button separator, but that's no longer the case. As a result, these button editor styles aren't getting picked up when using the Gutenberg plugin.

This should be corrected. In order to provide compatibility with earlier Gutenberg versions, changes here should probably end up preserving the old selectors too.

Change History (4)

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


5 years ago

#2 @sleekdevigner
5 years ago

@kjellr I am hoping I will be able to make my first contribution to this awesome community.

I just downloaded the WordPress core version 5.5-beta using tortoise svn so I can test for this bug and submit a patch. However, something is quite strange. After doing the needful (npm install and others), with the Twenty Nineteen (2019) theme active, I created a button using the Gutenberg block but noticed at the frontend that the button created still has the old markup you mentioned.

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

Also, the styles in the editor were picked immediately I used the custom color picker while the colors didn't change when I used the predefined colors. So, this got me confused. I am guessing I'm using a wrong to-be-released WordPress version compared to the one you mentioned in this ticket or probably this bug has been fixed already which explains why I am not catching it.

Please I will be glad if you can help a little. I am still researching for answers though. Thank you.

Last edited 5 years ago by sleekdevigner (previous) (diff)

#3 follow-up: @kjellr
5 years ago

  • Milestone 5.5 deleted
  • Resolution set to invalid
  • Status changed from new to closed

Hi @sleekdevigner, and welcome! You're right, the markup is the same as it used to be. The new button markup was reverted back to the original one in Gutenberg:

https://github.com/WordPress/gutenberg/pull/21923

So this ticket should be closed for now. Thank you for highlighting this!

#4 in reply to: ↑ 3 @sleekdevigner
5 years ago

Replying to kjellr:

Hi @sleekdevigner, and welcome! You're right, the markup is the same as it used to be. The new button markup was reverted back to the original one in Gutenberg:

https://github.com/WordPress/gutenberg/pull/21923

So this ticket should be closed for now. Thank you for highlighting this!

Oh cool! Thanks too.

Note: See TracTickets for help on using tickets.