Mailchimp Block: Remove wrapper from rendered markup

[andrewserong]

Related to: #19566 and #19481

The Mailchimp block currently adds a div wrapper <div class="components-placeholder"> in the server rendered view that appears to not be needed. This wrapper only exists in the editor UI during the loading state or when a Mailchimp connection has yet to be set up. When it exists in the server rendered view, it doesn't cause issues most of the time. However, if any other code enqueues wp-components, then CSS that targets the components-placeholder class will be loaded, which then causes an issue rendering the block. An example is that the upgrade nudges rendered on the front end for logged in users enqueues wp-components here.

The issue can be found if the following conditions are met:

1. Create a site or use a wpcom testing site that does not have a paid plan
2. Add a Mailchimp block
3. Add another block that requires a paid plan (e.g. the Calendly or Premium Content blocks)
4. Save the template part or page
5. View the front end of the site while logged in
6. You should see that there is an upgrade nudge rendered on the front end of the site, and that a white background and black border has been added to the Mailchimp block

I tested this within the site editor on a site running the TT1-blocks theme.

Changes proposed in this Pull Request:

• Remove the wrapper <div class="components-placeholder"> from the server-rendered view of the Mailchimp block

Note: The files changed view for this PR seems to be struggling a bit with the change here — the change is actually just removing the containing div and removing a level of indentation, but due to the kinds of markup removed, the algorithm to display the changes isn't having a good time displaying the change cleanly!

Screenshots

Note: these screenshots show the Mailchimp block rendered on the front end of a site while logged in and running the TT1-blocks theme. The styling issue to note here is the unintended white background and black border. The other issues (unstyled buttons) are being addressed separately. The upgrade nudge rendered beneath is for another block on the same page.

Before	After

Jetpack product discussion

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

No

Testing instructions:

• Follow the above steps to test that you can replicate the issue on a wpcom site without a paid plan, running an FSE theme like TT1-blocks
• Apply this change, and verify that it fixes the issue while viewing the front end of the site while logged in
• Smoke test in a non-FSE site with existing Mailchimp block and a couple of themes to check that this doesn't introduce any regressions

[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.

[stacimc]

LGTM -- good find, what a tricky one to reproduce!

Tested on a free site to reproduce the bug, and confirmed the fix.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello andrewserong! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D60608-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]

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

Thank you!

[andrewserong]

r224811-wpcom

Also, thanks for renaming the PR, Jeremy, that reads much neater than my first attempt! 😀

[jeherve]

thanks for renaming the PR, Jeremy, that reads much neater than my first attempt! 😀

I wouldn't have changed anything, it's just that the message needed to be shorter for the squash commit :)