Automattic
[Bug]: Dalston: Form block style inconsistency
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
- Make sure the Dalston theme is activated.
- Create a page with the Form block. You may adjust its settings, e.g. text or background color.
- Save the page.
- 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.
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 https://github.com/Automattic/jetpack/issues/28316
Should these be fixed within the theme or the Form block?
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.
