UI Review: CSS class cleanup. Classname naming convention changes. Re…

…moval of some unnecessary classes on the frontend, and changes to the view script to reflect these removals. Some style definitions moved from view stylesheet to editor's since they aren't used on frontend.

client/gutenberg/extensions/mailchimp/edit.jsx

@@ -116,7 +116,7 @@ class MailchimpSubscribeEdit extends Component {
 			successLabel,
 			errorLabel,
 		} = attributes;
-		const classPrefix = 'wp-block-jetpack-mailchimp-';
+		const classPrefix = 'wp-block-jetpack-mailchimp_';
 		const waiting = (
 			<Placeholder icon={ icon } notices={ notices }>
 				<Spinner />

client/gutenberg/extensions/mailchimp/editor.scss

@@ -1,7 +1,18 @@
 @import './view.scss';
 
 .wp-block-jetpack-mailchimp {
-	.wp-block-jetpack-mailchimp-notification {
+
+	.wp-block-jetpack-mailchimp_notification {
 		display: block;
 	}
+
+	.wp-block-jetpack-mailchimp_button {
+		background-color: #0073aa;
+		border-radius: 5px;
+		color: $white;
+		font-family: $sans;
+		font-weight: bold;
+		margin-bottom: 1.5em;
+	}
+
 }

client/gutenberg/extensions/mailchimp/view.js

@@ -34,13 +34,13 @@ function fetchSubscription( blogId, email ) {
 
 function activateSubscription( block, blogId ) {
 	const form = block.querySelector( 'form' );
-	const errorClass = blockClassName + '-form-error';
-	const processingEl = block.querySelector( '.' + blockClassName + '-processing' );
-	const errorEl = block.querySelector( '.' + blockClassName + '-error' );
-	const successEl = block.querySelector( '.' + blockClassName + '-success' );
+	const errorClass = blockClassName + '_form-error';
+	const processingEl = block.querySelector( '.' + blockClassName + '_processing' );
+	const errorEl = block.querySelector( '.' + blockClassName + '_error' );
+	const successEl = block.querySelector( '.' + blockClassName + '_success' );
 	form.addEventListener( 'submit', e => {
 		e.preventDefault();
-		const emailField = form.querySelector( '.' + blockClassName + '-email' );
+		const emailField = form.querySelector( 'input' );
 		emailField.classList.remove( errorClass );
 		const email = emailField.value;
 		if ( ! emailValidator.validate( email ) ) {

client/gutenberg/extensions/mailchimp/view.scss

@@ -1,48 +1,42 @@
 .wp-block-jetpack-mailchimp {
+
 	&.is-processing {
 		form {
 			display: none;
 		}
 	}
-	.wp-block-jetpack-mailchimp-notification {
-		display: none;
-		margin-bottom: 23px;
-		padding: 20px;
-		text-align: center;
-		&.is-visible {
-			display: block;
-		}
-	}
-	.wp-block-jetpack-mailchimp-error {
-		background-color: #da5544;
-		color: #fff;
-	}
-	.wp-block-jetpack-mailchimp-processing {
-		background-color: #e0e5e9;
-	}
-	.wp-block-jetpack-mailchimp-success {
-		background-color: #73b961;
-		color: #fff;
-	}
-	.wp-block-jetpack-mailchimp-email {
-		display: block;
-		padding: 3px 9px;
-		width: 50%;
-	}
+
 	.wp-block-jetpack-mailchimp_consent-text {
 		color: $gray;
 		font-size: 0.8em;
 		font-style: italic;
 	}
-	.wp-block-jetpack-mailchimp-form-error {
+
+	.wp-block-jetpack-mailchimp_form-error {
 		border: 1px solid #ff0000;
 	}
-	.wp-block-jetpack-mailchimp_button {
-		background-color: #0073aa;
-		border-radius: 5px;
-		color: $white;
-		font-family: $sans;
-		font-weight: bold;
-		margin-bottom: 1.5em;
+
+	.wp-block-jetpack-mailchimp_notification {
+		display: none;
+		margin-bottom: 23px;
+		padding: 20px;
+		text-align: center;
+		&.is-visible {
+			display: block;
+		}
+
+		&.wp-block-jetpack-mailchimp_error {
+			background-color: #da5544;
+			color: #fff;
+		}
+
+		&.wp-block-jetpack-mailchimp_processing {
+			background-color: #e0e5e9;
+		}
+
+		&.wp-block-jetpack-mailchimp_success {
+			background-color: #73b961;
+			color: #fff;
+		}
 	}
 }