WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#54204 new defect (bug)

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

Reported by: 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 months ago.
back-end.png (13.0 KB) - added by zebulan 2 months ago.
2021-button-vs-button-block.png (14.0 KB) - added by sabernhardt 2 months ago.
2021-button-vs-button-block-2.png (22.6 KB) - added by sabernhardt 2 months ago.
including a button inside a paragraph block

Download all attachments as: .zip

Change History (10)

@zebulan
2 months ago

@zebulan
2 months ago

#1 @zebulan
2 months ago

  • Keywords has-screenshots added

#2 @aezazshekh
2 months 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 months 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 months ago by zebulan (previous) (diff)

#4 @zebulan
2 months 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 months ago by zebulan (previous) (diff)

@sabernhardt
2 months ago

including a button inside a paragraph block

#5 @sabernhardt
2 months 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 months 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.

Note: See TracTickets for help on using tickets.