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.