Jetpack: Site Editor Compatibility: Contact Form Block styling issues

[andrewserong]

In the new site editor in Gutenberg (/wp-admin/admin.php?page=gutenberg-edit-site), there are some styling issues with the Contact Form block when rendered on the front end of the site.

Steps to reproduce the issue

Related to: 256-gh-Automattic/view-design

1. With the Gutenberg plugin active (>=10.4.0-rc1), activate a block-ready theme (like tt1-blocks)
2. In the site editor, insert a Contact Form block into the Footer template part.
3. Save the template part, and load the front end of the site
4. Observe that the Contact Form block does not provide much in the way of default styles for the form field elements, but expects them to be provided by the theme.

What I expected

I expected the form to be rendered similarly to how it appears in the TwentyTwenty One theme, with comfortable padding in the text fields

What happened instead

• Since tt1-blocks theme does not provide styling for the input field elements, they are left unstyled by the block.
• The Button block does not appear to be styled either, however if you add a Buttons block elsewhere in the template part, then the styles for the Button block are loaded. Perhaps we can trigger the Button block styles to be enqueued if the Contact Form block is added?

Possible solution(s)

With themes moving in the direction of not providing CSS styles directly for blocks, should we update the Contact Form block to provide better default styling?

Screenshots
If applicable, add screenshots to help explain your problem.

| FSE running tt1-blocks theme | Post editor in Twenty Twenty One theme |
| --- | --- |
| | |
| | |

[apeatling]

I'm not able to see this design issue in the site editor. Here it is in the footer:

@andrewserong Was there anything specific you did here that caused the design to not load correctly?

[apeatling]

I have noticed that the textarea is not full width, and adjusting the field widths does not work correctly. Will fix this up.

[andrewserong]

Was there anything specific you did here that caused the design to not load correctly?

@apeatling this issue is primarily to do with the styling when rendered on the front end of the site with an FSE theme like TT1-blocks active. The form fields look okay within the editor but when rendered in a template part on the front end of the site, the block doesn’t include adequate CSS on its own for rendering the form fields in a pleasing way (padding, etc). It seems that up until this point the block has expected base CSS to be provided by the theme, which might not be the case with FSE themes.

So, I was imagining that for this (and some of the other blocks) we might want to create some base / default styling for the front end styles in case they’re not provided by the theme. Eventually, perhaps using block supports would be better for more customisation, but safe defaults to start is probably enough.

For the issue with the width of the message textarea within the editor, this is caused by the GB component we’re using being dependent on CSS-in-JS styles generated by Emotion not being copied over to the editor canvas (issue raised in: https://github.com/WordPress/gutenberg/issues/30553). Since it sounds like there might not be a quick fix for that, I think it’d made sense to add CSS to the editor styles for this block to get it full width.

[apeatling]

Ah thanks. For some reason I thought the above was in the editor, I didn't check the front end yet. Will look into this more tomorrow. 👍

[apeatling]

I'm asking the themes folks to see if TT1 and other block themes should have base form styles. It's strange to me that they would be included in the editor, but not the front end.

Edit: My mistake -- asked in the channel and the editor styles are block provided. I wrote them! My memory needs a reboot. 😎