Forms: improve styles naming and preview

[simison]

Block style names are somewhat obscure. Since the preview popup nor the editor don't differ at all between style switches, it's impossible to understand how they look until you switch between them.

Editor

Screen.Recording.2025-01-16.at.14.02.35.mov

Frontend

Screen.Recording.2025-01-16.at.14.04.56.mov

[ntsekouras]

I'm not sure how easy would be to solve this. The reason this is happening is because the selected style actually modifies the rendered output in php. This means there is a mismatch in the html between editor and front-end.

In general block styles should just add css rules. Having said that, maybe the animated and outline should be a block property instead of styles? 🤔

Even if we do that (or something similar to match html) here comes the question of the editing experience and how you update the placeholder and the label. I didn't explore anything in depth but it seemed nuanced. Maybe placeholder is only updated through Inspector controls? 🤔

[simison]

Yeah, seems like this needs some proper thinking. I'm also not sure yet how to solve this.

[talldan]

I'm not sure how easy would be to solve this. The reason this is happening is because the selected style actually modifies the rendered output in php. This means there is a mismatch in the html between editor and front-end.

When I was recently looking into another issue, I discovered that this did work in the past (the screenshots in #29178 show it). The editor seems to do the same markup changes if this is what you're referring to:

jetpack/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-label.js

Lines 96 to 106 in 2cc80a5

	if ( style === FORM_STYLE.OUTLINED ) {
	return (
	<div className="notched-label">
	<div className="notched-label__leading" />
	<div className="notched-label__notch">
	<FieldLabel className={ classes } { ...props } />
	</div>
	<div className="notched-label__trailing" />
	</div>
	);
	}

I've put together a fix in #41457, but as noted in the PR it probably needs a lot of testing given these styles haven't been active for a while!