Subscribe block: button-only design

[pkuliga]

It would be useful for placing the Subscribe block into the navigation.

After the button is clicked we should open a modal to get the user email.

TODO

• [ ] Add button-only style to the Subscribe block and open the modal to get an email when the button is clicked https://github.com/Automattic/jetpack/pull/33921
• [ ] If we have the user email (he is logged in or sth) we should use the normal flow
• [ ] Implement the modal for getting the email from the user (@crisbusquets we need a design for this one) D138344-code
• [ ] standardize the existing modals D138483-code

[simison]

FYI @Automattic/gold that we're looking into this and will need to do some changes in the modal.

[crisbusquets]

Flow

@pkuliga here's the flow. I've added how it would look like in Gutenberg and in a post. Figma file: yJiLZt1ozJqMltHHQxR4Gc-fi-4392_12514

Modals update

To fit the subscribe block I've updated all the modals' width and padding to have a consistent and standardized version. Now it uses an 8pt grid for all spacings.

See current/proposal:

Specs: yJiLZt1ozJqMltHHQxR4Gc-fi-4392_12250

[crisbusquets]

After discussing it with @pkuliga, we've updated the padding-top for the header.

Here's the updated Figma file with all the specs:

• Subscribe modal: yJiLZt1ozJqMltHHQxR4Gc-fi-4416_3255
• Tiers modal: yJiLZt1ozJqMltHHQxR4Gc-fi-4416_3412
• Payment form modal: yJiLZt1ozJqMltHHQxR4Gc-fi-4416_3944
• Categories modal: yJiLZt1ozJqMltHHQxR4Gc-fi-4416_4589

[simison]

Modal padding changes are now live with D138483-code

Next;

• Button only design, in progress https://github.com/Automattic/jetpack/pull/33921
• Supporting asking email in the modal

[pkuliga]

Closing this one since it was resolved here: https://github.com/Automattic/jetpack/pull/37341