Anchor button and native buttons have different border definitions

[zaguiini]

Describe the bug

Buttons that are a tags do not have borders, however, buttons that are actual buttons (such as button and input type="submit/reset") do have the default browser border.

Expected behavior

Visual consistency between all sorts of buttons:

• <a />;
• <button />;
• <input type="submit" />;
• <input type="reset" />.

Screenshots

Steps To Reproduce

1. Activate TT2 on WPCOM with wp theme activate pub/twentytwentytwo --url=<site-url>;
2. Open the site editor;
3. Add Poll block and some answers;
4. Add a standalone button;
5. Save changes.

Verify that buttons are different.

You can also inject this snippet in your local copy:

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello, World!</a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><button class="wp-block-button__link">Hello, World!</button></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><input type="submit" class="wp-block-button__link" value="Hello, World!" /></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><input type="reset" class="wp-block-button__link" value="Hello, World!" /></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

Additional context

We're missing a couple of style overrides on the Button block:

diff --git a/theme.json b/theme.json
index 6469b74..946e190 100644
--- a/theme.json
+++ b/theme.json
@@ -216,14 +216,16 @@
        "blocks": {
            "core/button": {
                "border": {
-                   "radius": "0"
+                   "radius": "0",
+                   "width": "0"
                },
                "color": {
                    "background": "var(--wp--preset--color--primary)",
                    "text": "var(--wp--preset--color--background)"
                },
                "typography": {
-                   "fontSize": "var(--wp--preset--typography--font-size--normal)"
+                   "fontSize": "var(--wp--preset--typography--font-size--normal)",
+                   "lineHeight": "var(--wp--preset--typography--line-height--normal)"
                }
            },
            "core/post-title": {

Applying that patch to theme.json make all variations look exactly the same:

[kjellr]

Hey @zaguiini thanks for the report. The theme doesn't provide any styles for input elements — the styles you're seeing applied to the input buttons are coming by Gutenberg.

I think there are two possible routes for your issue here:

1. Add a note to the existing issue here, which would allow theme authors to style input elements.
2. Open a new issue or PR in the Gutenberg repository, asking for the border to be explicitly defined in the button block's CSS, to prevent the default border from bleeding in for input elements.

Since we don't plan on adding theme-specific input styles to Twenty Twenty-Two, I'm going to close this issue here. Thank you for the report!

(Additionally: In the future, when posting an issue to a WordPress.org community repository like this one, please be sure to only include test instructions that all contributors can use. Your test script here is tied to WordPress.com, which isn't going to be relevant to most WordPress contributors. Thanks!)

[kjellr]

Additional context We're missing a couple of style overrides on the Button block ...

By the way, I tried this out, but unfortunately that width rule gets inherited by the "Outline" border style, which means it has no outline by default. 😅 And since the button block doesn't have a "width" control for the border at the moment, there's no way to override it. So it's a close fix, but not viable at the moment!