Merge pull request #38 from mailchimp/feat/theme-compat

Do not SSR in legacy themes

Author: dkotter

includes/blocks/mailchimp/edit.js

@@ -2,14 +2,33 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { Placeholder, Button, Disabled } from '@wordpress/components';
 import ServerSideRender from '@wordpress/server-side-render';
+import { useSelect } from '@wordpress/data';
 import Icon from './icon';
 
+const disallowedThemesSSR = [
+	'twentytwentyone',
+	'twentytwenty',
+	'twentynineteen',
+	'twentyeighteen',
+	'twentyseventeen',
+	'twentysixteen',
+	'twentyfifteen',
+	'twentyfourteen',
+];
+
 export const BlockEdit = ({ isSelected }) => {
 	const blockProps = useBlockProps();
+	const isDisallowedThemeSSR = useSelect((select) => {
+		const currentTheme = select('core').getCurrentTheme();
+		if (!currentTheme || (!'template') in currentTheme) {
+			return false;
+		}
+		return disallowedThemesSSR.includes(currentTheme.template);
+	});
 
 	return (
 		<div {...blockProps}>
-			{isSelected ? (
+			{isSelected || isDisallowedThemeSSR ? (
 				<Placeholder
 					icon={Icon}
 					label={__('Mailchimp Block', 'mailchimp_i18n')}

mailchimp_widget.php

@@ -86,13 +86,15 @@ function mailchimp_sf_signup_form( $args = array() ) {
 		-moz-box-sizing: border-box;
 		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
+		padding: 10px 8px;
 		width: 100%;
 	}
 	.mc_input.mc_phone {
 		width: auto;
 	}
 	select.mc_select {
 		margin-top: 0.5em;
+		padding: 10px 8px;
 		width: 100%;
 	}
 	.mc_address_label {
@@ -101,6 +103,7 @@ function mailchimp_sf_signup_form( $args = array() ) {
 		display: block;
 	}
 	.mc_address_label ~ select {
+		padding: 10px 8px;
 		width: 100%;
 	}
 	.mc_list li {
@@ -117,6 +120,7 @@ function mailchimp_sf_signup_form( $args = array() ) {
 	}
 	#mc_signup_submit {
 		margin-top: 1.5em;
+		padding: 10px 8px;
 		width: 80%;
 	}
 	#mc_unsub_link a {

views/css/frontend.php

@@ -71,6 +71,8 @@
 	}
 	ul.mc_list {
 		list-style-type: none;
+		margin-left: 0;
+		padding-left: 0;
 	}
 	ul.mc_list li {
 		font-size: 12px;
@@ -81,4 +83,4 @@
 	#ui-datepicker-div.show .ui-datepicker-year {
 		display: inline;
 		padding-left: 3px
-	}
+	}