[Bug]: Dalston: Form block style inconsistency

[ivan-ottinger]

Quick summary

The Form block styling is different in the editor vs saved page:

Editor	Saved Page

Please notice the field height and the Submit button styling for example (but also the field labels).

Steps to reproduce

1. Make sure the Dalston theme is activated.
2. Create a page with the Form block. You may adjust its settings, e.g. text or background color.
3. Save the page.
4. Compare the Form block in the editor with the Form block in the saved page.

Similar styling issues can be observed in different themes as well, but it looks like the issue needs to be fixed on the theme level.

What you expected to happen

The Form styling in the editor should be the same as in the front-end (saved page).

What actually happened

The Form styling in the editor is different from styling in the front-end (saved page).

Browser

No response

Context

No response

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

CSS fixes applied to the front-end.

[Robertght]

I can confirm this is also happening now - mainly the font weight and style is not the same and the biggest issue is the submit button size, which, by default, at no value set within the editor shows up full width in the frontend

Editor	Frontend

25% width in the editor vs frontend:

Editor	Frontend

cc @ntsekouras as I found another example, similar to Automattic/jetpack#28316

Should these be fixed within the theme or the Form block?

[ntsekouras]

There are some issues that need to be resolved like the root cause for this one. I've chatted with some devs about it and there are some changes needed for start at least in the plugin, where an extra empty div is added in the submit form button - that's causing the mismatch in width. I think the resolution of that issue (which is assigned to someone) would resolve a few things and retest.