Form block: Prevent submit button from getting larger when an error appears

[jp-imagines]

Impacted plugin

Jetpack

Quick summary

If you submit a form without filling out all of the required fields, an error appears. At the same time, the submit button (a sibling element of the error) grows in size.

Steps to reproduce

1. Add a Form block to a page.
2. Ensure at least one field is set as "required."
3. View the live page.
4. Without filling out the required field, submit the form.

A clear and concise description of what you expected to happen.

The error should appear and the submit button should not change in size.

What actually happened

The submit button has a 100% height value, which causes it to become significantly larger when the error appears:

Screen.Capture.on.2024-12-27.at.14-26-08.mp4

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Only tested/replicated on Atomic so far. Replicated on several themes, including a classic theme (Twenty Twenty) and block themes. Initial customer report in 9216021-zd-a8c.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9216021-zen

[bizanimesh]

👋 Hey @jp-imagines - I tried reproducing the issue on a desktop device, but it's working fine there. Then, I tried to reproduce the issue on a mobile device, but there also I don't see the issue.

I tried with Blank Canvas and Twenty Twenty-One themes. It might be possible the issue is linked to the theme. May we know which theme you are using?

QW1.mp4

[jp-imagines]

@bizanimesh Thanks for testing this! I had initially replicated this on Twenty Twenty as well as Alonso and Creatio 2 (both Dotcom themes). I can replicate on Twenty Twenty-One as well, but deactivating Gutenberg fixes the issue on all themes.

I'm not sure if this would technically be a bug with Gutenberg, or a conflict between Gutenberg and Jetpack's Form block that needs resolving here. 🤔

[bizanimesh]

Thanks @jp-imagines - yes, I can now reproduce the issue after activating the Gutenberg plugin. Also, we have a fix here for review.