Move required indicator to the bottom of the form

Author: iamdharmesh

includes/blocks/mailchimp/edit.js

@@ -255,7 +255,10 @@ export const BlockEdit = (props) => {
 									<RichText
 										className="mailchimp-block__sub-header"
 										tagName="h3"
-										placeholder={__('Enter a sub header (optional)', 'mailchimp')}
+										placeholder={__(
+											'Enter a sub header (optional)',
+											'mailchimp',
+										)}
 										value={sub_header}
 										onChange={(sub_header) => setAttributes({ sub_header })}
 									/>
@@ -276,17 +279,17 @@ export const BlockEdit = (props) => {
 										template={template}
 										templateLock="insert"
 									/>
-									{show_required_indicator && (
-										<div id="mc-indicates-required">
-											{__('* = required field', 'mailchimp')}
-										</div>
-									)}
 									<Disabled>
 										<InterestGroups
 											listData={listData}
 											visibility={interest_groups_visibility}
 										/>
 									</Disabled>
+									{show_required_indicator && (
+										<div id="mc-indicates-required">
+											{__('* = required field', 'mailchimp')}
+										</div>
+									)}
 									<div className="mc_signup_submit">
 										<RichText
 											id="mc_signup_submit"

includes/blocks/mailchimp/editor.css

@@ -20,7 +20,6 @@
 	display: block;
 	opacity: 0.2;
 	border: 1px dashed grey;
-	margin: 8px 0px;
 }
 
 h2.mailchimp-block__header:has(span:empty),
@@ -58,9 +57,10 @@ div#mc_subheader:has(h3 span:empty) {
 	text-align: center;
 }
 
-.mc_merge_var {
-	margin-bottom: 1.0em;
+.wp-block-mailchimp-mailchimp-form-field .mc_merge_var {
+	margin-bottom: 1em;
 }
+
 .mc_var_label,
 .mc_interest_label {
 	display: block;
@@ -127,3 +127,7 @@ select.mc_select {
 .mc_email_type {
 	padding-left: 4px;
 }
+#mc-indicates-required {
+	width:100%;
+	margin-top: 1em;
+}

includes/blocks/mailchimp/markup.php

@@ -162,6 +162,10 @@ function ( $single_list ) {
 		.mc_email_type {
 			padding-left: 4px;
 		}
+		#mc-indicates-required {
+			width:100%;
+			margin-top: 1em;
+		}
 		</style>
 		<?php
 	}
@@ -214,15 +218,6 @@ function ( $single_list ) {
 					 */
 					echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 
-					// Show an explanation of the * if there's more than one field
-					if ( $show_required_indicator ) {
-						?>
-						<div id="mc-indicates-required">
-							* = <?php esc_html_e( 'required field', 'mailchimp' ); ?>
-						</div><!-- /mc-indicates-required -->
-						<?php
-					}
-
 					// Show our Interest groups fields if we have them, and they're set to on
 					if ( is_array( $igs ) && ! empty( $igs ) ) {
 						foreach ( $igs as $ig ) {
@@ -252,6 +247,14 @@ function ( $single_list ) {
 						}
 					}
 
+					// Show an explanation of the * if there's more than one field
+					if ( $show_required_indicator ) {
+						?>
+						<div id="mc-indicates-required">
+							<?php esc_html_e( '* = required field', 'mailchimp' ); ?>
+						</div><!-- /mc-indicates-required -->
+						<?php
+					}
 					?>
 					<div class="mc_signup_submit">
 						<input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />

includes/class-mailchimp-block-form-submission.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Class responsible for admin side functionalities.
+ * Class responsible for handling the form submission for the Mailchimp block.
  *
  * @package Mailchimp
  */