Input Field block: theme.json spacing/margin settings not working on front end

[bgardner]

Description

With the experimental form block, the following code in theme.json for Input Field only seems to be applied to the block editor, not the front end. In my theme, the x-large spacing = 100px, which was applied to clearly demonstrate how it looks in both places.

"core/form-input": {
	"spacing": {
		"margin": {
			"bottom": "var(--wp--preset--spacing--x-large)"
		}
	}
}

According to the block.json, it appears the styling should occur via "style": [ "wp-block-form-input" ], but there are no wrapping divs for each input on the front end with the .wp-block-form-input class.

Step-by-step reproduction instructions

1. Create form with input fields
2. Add the code above to theme.json
3. View block editor view vs. front end

Screenshots, screen recording, code snippet

Block editor view:

Front end view:

Environment info

WordPress 6.4.1, Gutenberg 17.1.0 active.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I will submit a PR to fix this issue in the near future.

[aristath]

Related to #55755 which fixes some styling issues in forms blocks

[t-hamano]

I submitted #56507 to resolve this issue. However, during the fixture test to ensure that deprecation was performed correctly, we discovered that form-related blocks were not working correctly. This issue is summarized in #56590.