Twenty Twenty-Two: Form block button uses browser border styles

[mikeicode]

Quick summary

The button within the Form block shouldn't have a border. On the front-end it shows a border, which appears to be the default browser border styles.

Steps to reproduce

1. Add a default Form block to a page
2. Compare button in editor and published page

What you expected to happen

Shouldn't have a visible border:

What actually happened

Firefox:

Chrome:

Context

Discovered this while building a site pdEkSe-Cm-p2

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Twenty Twenty-Two

Browser, operating system and other notes

Firefox: 101.0.1 Chrome: 101.0.4951.54

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No response

Workaround details

Could edit with CSS.

.wp-block-jetpack-contact-form .wp-block-button__link {
  border: unset;
}

[renata-franco]

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - Yes

---

📌 FINDINGS/SCREENSHOTS/VIDEO

I was able to replicate this.

Simple site on Firefox:

Simple site on Chrome:

I also tested this in Safari, Opera, and Edge and got the same result as above. And happens the same with AT sites and self-hosted as well with Twenty Twenty-Two theme.

The CSS workaround provided also works!

---

📌 ACTIONS

• Marked as Triaged for Quality Squad review