Mailchimp Block: Submit Button Set to Large Height

[susanjanec]

Impacted plugin

Jetpack

Quick summary

When adding the Mailchimp block, the button to submit the email appears at a tall height when the page is live.

When editing the block the button does appear to look okay.

Steps to reproduce

1. Add the Mailchimp block to any page.
2. Edit the button block settings to desired colors
3. Save Page and view live page
4. Button on the live page will appear at a tall height.

A clear and concise description of what you expected to happen.

Editing the button block within the Mailchimp block should appear as it does when editing the page when viewing the live page.

What actually happened

No response

Impact

One

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Only tested on Atomic so far as a Mailchimp account is required so could not reproduce on my own test sites. Happening on theme Twenty Twenty Two (Red). Initial customer report in 9243301-zd-a8c.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9243301-zen

[coder-karen]

Related Slack thread: p1736097675310099-slack-C03TY6J1A

It does appear related to Gutenberg changes mentioned in Slack (button height is set to 100%). I haven't been able to replicate though yet, on WoA or self-hosted, modifying various setting on the Mailchimp and inner button blocks, with different themes including Twenty Twenty Two (Red).

[susanjanec]

I just wanted to follow up on this here and to see if we have an update, or even a workaround if there is more time needed to look into this. Thank you!

[coder-karen]

A CSS workaround, if anyone affected is able to add CSS for their site, would be to add:

.wp-block-jetpack-mailchimp .wp-block-button__link {
height: unset;
}

Possibly adding !important after unset (height: unset !important;), if the priority of the CSS isn't high enough. That's based only on testing in the inspector, with the reported site.

No further info at this stage but we will investigate more.

[simison]

Looks similar to what was fixed here:

• Fix/form block submit button styles when errors #40762

[coder-karen]

On my test sites the height is actually set to 100% for .wp-block-button__link as well, but the button height issue does not exist.

@Automattic/jetpack-vulcan , is anyone else able to replicate this?

If not, we might need more information from the customer with the issue - can they replicate it on other pages (if they temporarily remove the CSS they now added), can they share more about their the steps they took to add the block, does it only happen with the Twenty Twenty Two (Red) theme for them, could other plugins be interfering.

[monsieur-z]

@coder-karen, I haven't been able to reproduce the issue either (theme: Twenty Twenty Two). I'm not seeing any height property applied to .wp-block-button__link though.

[jordesign]

Lowering the priority of this to normal - as it seems to only affect a single user at this point.

[monsieur-z]

I was able to see the issue on this page: https://berkhistory.org/sign-up-for-email/. Reverting the height: unset fix suggested by the HEs revealed the bug.

The issue is likely caused by this Gutenberg update, which applies a height: 100% CSS rule on the _link element of the button. It seems an appropriate solution to the issue that PR tried to fix, but requires us to update the jetpack/button block to prevent breakage. Setting height: fit-content on the button root element should work, but I'm still wondering if it might create side effects I'm not picturing yet.

The button styles are not loaded in the frontend, so I'll need to look into that first.