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

[zebulan]

The title says it all.

[aezazshekh]

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?

[zebulan]

@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.

[zebulan]

@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.

[sabernhardt]

including a button inside a paragraph block

[sabernhardt]

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.

[zebulan]

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.

[poena]

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.

[poena]

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

[karmatosed]

If I am correct this is now working. What I did was add a button element in a custom HTML block. It now renders on the front. Attaching screenshots and recommending we close this as working but very happy to be corrected if not aligned.

[karmatosed]

Button showing on front

[karmatosed]

Button code

[karmatosed]

Based on my findings above, I will close this for now. We can always revisit if further steps are found or I am incorrect. Thank you everyone.