Make WordPress Core

Opened 2 years ago

Last modified 11 months ago

#54204 new defect (bug)

Twenty Twenty-One: <button>s are not styled in block editor

Reported by: zebulan's profile zebulan Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.8.1
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: css Cc:

Description

The title says it all.

Attachments (4)

front-end.png (9.7 KB) - added by zebulan 2 years ago.
back-end.png (13.0 KB) - added by zebulan 2 years ago.
2021-button-vs-button-block.png (14.0 KB) - added by sabernhardt 2 years ago.
2021-button-vs-button-block-2.png (22.6 KB) - added by sabernhardt 2 years ago.
including a button inside a paragraph block

Download all attachments as: .zip

Change History (12)

@zebulan
2 years ago

@zebulan
2 years ago

#1 @zebulan
2 years ago

  • Keywords has-screenshots added

#2 @aezazshekh
2 years ago

Hello @zebulan. Thanks for this ticket.
I saw but my button is showing the same in the backend as it is in the front end. Can you tell me in detail about this ticket?

#3 @zebulan
2 years ago

@aezazshekh I'm talking about HTML <button>s, not Gutenberg "Button" blocks, which are <a>s, not <button>s. Try putting a <button> inside a Paragraph block and comparing how it looks in the editor versus the front-end.

Last edited 2 years ago by zebulan (previous) (diff)

#4 @zebulan
2 years ago

@sabernhardt Custom HTML blocks don't have proper editor styling anyway; that's a separate issue. See https://github.com/WordPress/gutenberg/issues/9129.

But you can also put a <button> inside a Paragraph block, and that should (but doesn't) look just like it does on the front-end.

Last edited 2 years ago by zebulan (previous) (diff)

@sabernhardt
2 years ago

including a button inside a paragraph block

#5 @sabernhardt
2 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Welcome to Trac! (I've noticed you on Gutenberg before, but this is your first ticket here.)

Yes, the button element is a little different inside a Paragraph block instead of the Custom HTML. The editor probably should have the same basic button styling for both situations in the theme, if possible.

#6 @zebulan
2 years ago

Just to clarify (in case anyone reading this is still confused), my issue is not that the <button> looks different in the Paragraph block versus the Custom HTML block in the editor (which is covered by the previously-linked Gutenberg GitHub issue). The issue I'm reporting is that <button>s in the editor look different from the front-end, regardless of what block the <button> appears in.

#7 @poena
20 months ago

I tested in 5.3, 5.6 and 6.0.

-From 5.6, HTML buttons in the front and in the editor look like plain browser default HTML buttons, and does not have the spacing and colors that the button block does.
-In 6.0, there is a text alignment issue in the editor where the text inside the button is at the bottom of the button instead of centered.

I did not go as far as to track down the change, I suspect it would have been because the style bled into the WordPress editor UI buttons.

#8 @poena
11 months ago

I can reproduce this in WordPress 6.2-RC4-55587.

Note: See TracTickets for help on using tickets.