Jetpack: Block: Subscription Form Improvements

[apeatling]

Current state:

List from @mtias:

• [x] Improve the button design, make the button and input field look like they belong together
• [x] The toggle button for subscriber count should not be in the canvas, move to sidebar
• [x] Provide further customization options beyond the button color (outline style, radius control, font-size, layout, width, etc)
• [x] When toggling the “show subscriber count” it looks like three unrelated elements on the page
• [x] No period at the end of the subscriber count sentence

We need to be able to support a block pattern such as:

@iamtakashi @pablohoneyhoney Do we have any other block patterns using this block for reference?

[pablohoneyhoney]

Some initial sketches

[mtias]

A border radius control that applies to the input and the button would make sense as a start.

[iamtakashi]

I like the input field and the button to be next to each other, and that makes sense most of the time, especially the width isn't a concern. But when the available width is restricted (like a sidebar), the current pattern (the field and the button to be on its line) would leave a wider input field. It should accommodate both cases.

[apeatling]

Thanks for all the above, I'll start working on this today.

[obenland]

Opening an English-language post containing the block in wp-admin with the user locale set to a different language, breaks the block. pbNZNv-1Q-p2
In my case user locale was German.
/cc @iamtakashi

[apeatling]

Based on the pattern designs above, I think these are the settings that should accommodate all of them:

The exception being the subscriber count placement, which I will handle separately.

@mtias Interested in your feedback here regardless of where these settings end up (sidebar or toolbar). Looking at the way color panels are handled it looks like it could be difficult to separate color settings out into multiple panels. I do feel as though organizing settings by what you are changing is easier to parse than trying to include multiple color settings in one panel.

[mtias]

Nice work, this looks good. Just a few notes:

• The border color should probably be a single control and apply to both elements for concordance.
• The text color on the input field seems also possibly unnecessary: does it apply to the placeholder text or what the visitor would type? In any case, it seems like something that should be set and not controlled by the user.
• I'd simplify some of the labels: "Background Settings" -> "Background Color" and then "Email Field Background Color" to just "Email Field" and "Submit Button".
• I like the space controls. We might be getting some better tools in the short term in Gutenberg core, but this works for now.

[apeatling]

The border color should probably be a single control and apply to both elements for concordance.

This is fine for most of the patterns above, but these two I wondered about:

I could see a scenario like the first one where you might want a bordered button, with a background color only textfield.

The text color on the input field seems also possibly unnecessary: does it apply to the placeholder text or what the visitor would type? In any case, it seems like something that should be set and not controlled by the user.

That seems fine to me. I was considering it controlling both placeholder (at a lower opacity) and the actual text color. Fine to leave it alone right now.

I'd simplify some of the labels: "Background Settings" -> "Background Color" and then "Email Field Background Color" to just "Email Field" and "Submit Button".

👍

I like the space controls. We might be getting some better tools in the short term in Gutenberg core, but this works for now.

That sounds great, we can always whip these out later.

[apeatling]

Updated settings based on the above:

[pablohoneyhoney]

Can we refrain _Custom_? Seems too technical.

Here it's unnecesary, as it's obvious with the first label _Text size_

For color, what users do is _Edit_ or _Add color_ instead of _Custom_. More natural.

[mtias]

I could see a scenario like the first one where you might want a bordered button, with a background color only textfield.

Right, perhaps we should support it but not expose it in the UI. My worry is that, while it allows some of the patterns we might want to do, it will also lead to some weird combinations by users.

[apeatling]

@pablohoneyhoney This is a core component, so this wording is present on all blocks that use font sizing. It would be good to open a core Gutenberg ticket for the suggestion so it can change everywhere.

The PR https://github.com/Automattic/jetpack/pull/15107 now includes all of the settings discussed above.

[kjellr]

Just wanted to share a pattern that came up in a theme design @melchoyce is working on:

Structurally, this is a bit similar to this pattern that @pablohoneyhoney shared above. Just with some different styles:

In any case, it would be really cool to be able to create this today using this block. Glad to see there's work happening on this. 👍

[apeatling]

The pattern that Pablo shared is possible. The one from Mel is a bit trickier. It could be done with control over the border thickness of each side of the button, but the space above and below the narrow border complicates it a bit.

[apeatling]

It could be done with a "Button inside of text field" option, and then control over individual button border sides.

[kjellr]

... but the space above and below the narrow border complicates it a bit.

Yeah, in the near-term I think it's totally understandable that a little refinement like that might be omitted. 👍

[mtias]

Yes, I think this one falls a bit in the realm of "the theme needs to supply some custom CSS".

[jeherve]

Related: #15474