Mailchimp Block: Fix styling issue with FSE

[stacimc]

Fixes #19481

Changes proposed in this Pull Request:

• Fix CSS issues with the mailchimp form using the site editor. This PR adds some new base styles for the form in the frontend, mainly adjusting the input width and margins/padding.
• Also fixes some CSS issues in TT1, including missing margin between form elements

Notes

• This PR relies on Jetpack Button Block: Ensure block enqueues core Button block styles as a dependency #19595 to fix the button styling. The PRs can be merged in either order, but if you want to see the button styled correctly you must apply this PR on top of that one.
• This PR does not fix the padding inside the email input; this is because it can't be done in a way that allows themes to override the padding for all input fields. TT1-blocks will need to update this style itself.
• This is not intended to necessarily match Twenty Twenty One theme styles, just to add some base styles to make the form look presentable on the frontend for now.

Screenshots

Mailchimp block in the footer of a FSE site using TT1 blocks

Before	After

Mailchimp block in the post content of a site using TT1

Before	After

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Sync this PR; if you would like to see the final styling of the button, you should also apply the #19595 PR.

• Enable TT1 blocks theme.
• Insert a mailchimp block in the footer template in the site editor.
• Confirm that the mailchimp form fields display as expected in the editor.
• Confirm that the mailchimp form fields display as expected in the front end.
• Switch to a regular WP theme and insert a mailchimp form block in a post.
• Confirm that in this post the mailchimp form fields work expected in editor and front end.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello stacimc! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D60371-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: May 4, 2021.
• Scheduled code freeze: April 26, 2021.

[andrewserong]

Unfortunately I haven't been able to get this one to work properly in wpcom. I think it's mostly unrelated to your PR, but on the front end of the site, the Mailchimp block appears to be getting rendered with the components-placeholder wrapper added, which results in a bit of weirdness... along with a white background and black border, the 100% width of the input field causes it to overflow the container, and the button padding isn't getting added.

Also, the rendered button has the wp-block-button__link class, but no .components-button class, so the padding and border styling doesn't appear to be targeting it.

I'm not sure if I've done something strange to my testing environment, or if this is particular to wpcom?

[andrewserong]

This looks good to me visually, but I can see that it's overriding the theme provided styles when using the Barnsbury theme in wpcom. Without the change applied, the theme's CSS targets the input field and sets it to 16px padding:

With the change applied, this CSS overrides it and sets the padding to 14px:

With this particular theme the difference isn't all that noticeable, but I imagine other themes might diverge a bit more in their padding? That said, I can't quite think how we'd reduce the specificity here to allow the theme styles to override it 🤔

[stacimc]

I agree, I'd prefer to not override the themes here. Maybe this particular case is a reasonable one to defer -- remove the styling here and instead ask the block themes to provide a better base style?

[andrewserong]

That's a good point, I notice that the Search block in core also doesn't apply padding by default in TT1-blocks, so maybe it's better to leave it (aside from the width: 100% that you've added).

Search block:

Unfortunately I still haven't had much luck investigating the placeholder issue in my environment. I'll try again tomorrow, as I'd like to get to the bottom of what's causing it. Apologies for holding up the review! 🤔

[stacimc]

No worries, thank you!

[andrewserong]

It turns out the weird placeholder issue I encountered occurs only when you view the front end of the site while logged in, with a site that doesn't have a paid plan, and you also have a block on the page that displays an upgrade nudge. I've put together a fix in: #19639

[stacimc]

@andrewserong Hm, I'm not seeing the styling issues you mentioned; maybe a bug with the placeholder class not getting removed correctly after you configured the Mailchimp account?

Also, the rendered button has the wp-block-button__link class, but no .components-button class, so the padding and border styling doesn't appear to be targeting it.

I did notice after rebasing that I'm now seeing wp-block-button__link as opposed to .components-button; I'm not sure what happened there, but in either case I've removed the button styling as your #19595 fixes the button nicely! 😄

[andrewserong]

Thanks for working on this @stacimc! I got to the bottom of the placeholder issue, which will be fixed by #19639.

With that applied, I noticed that the width: 100% still overflows the container slightly in TT1-blocks, so I've pushed a tiny change to add in box-sizing: border-box which gets it playing nicely in that theme.

Before	After

This LGTM now! I also tested that the margins look good on the front-end of existing themes. The updated margin looks better to me, less of a gap between the input field and the button 👍

[stacimc]

Rebased to pass status checks

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D60371-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[stacimc]

r225216