Automattic / Automattic/jetpack

Mailchimp Block Button cannot be centered on old themes. Styling broken on newest themes.

Open
#18,130 3 comments 0 reactions 0 assignees View on GitHub
[Block] Mailchimp [Pri] Normal Bug Customer Report [LEGACY]
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Steps to reproduce

1. Add a Mailchimp Block to a page, click on the button, and center it. Publish the page.
2. Activate an older theme (pre-Gutenberg). For example: Prosperity, Colinear, Revelar, Canape, Venture, Veggie, Appetite, Maisha, etc...
3. Refresh the page. The button will not be centered.
![image](https://user-images.githubusercontent.com/30731356/101844853-37f97200-3b02-11eb-81df-8029cef8f051.png)

4. Activate a newer theme (block-based). For example: Balasana, Maywood, Rivington, Barnsbury
5. Refresh the page. The button will be centered (as it is in the editor):

![image](https://user-images.githubusercontent.com/30731356/101845106-ae966f80-3b02-11eb-8102-895affe31d53.png)

6. Try an even newer theme. For example, Twenty Twenty, Seedlet, or Spearhead, and they'll come with their own formatting/stylistic issues for that same block:

![image](https://user-images.githubusercontent.com/30731356/101845220-03d28100-3b03-11eb-92a6-e39947220940.png)

#### What I expected
The Block to appear on the page styled like it is in the editor.

#### What happened instead
It varies. On our newest themes, the block's styling it all over the place. On older themes, it doesn't match the editor.

#### Browser / OS version
All

#### Screenshot / Video
Screenshots above.

#### Context / Source
Reported this as a theme bug [here](https://github.com/Automattic/themes/issues/2904), but was told it was a block bug, so reposting here.

Contributor guide

Open the contributing guide

Research direction

Reproduce the Mailchimp Block button alignment across the older and newer themes listed in the issue, comparing the published page with the editor. Investigate the block's frontend styling and theme interaction; done means the button matches the editor's alignment and styling across the reported theme groups.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.