diff --git a/assets/css/frontend.css b/assets/css/frontend.css new file mode 100644 index 00000000..5c6f7809 --- /dev/null +++ b/assets/css/frontend.css @@ -0,0 +1,116 @@ +.mc_error_msg, .mc_error_msg a { + color: red; + margin-bottom: 1.0em; +} +.mc_success_msg { + color: green; + margin-bottom: 1.0em; +} +div.mc_interest{ + width:100%; +} +#mc_signup_form label.mc_interest_label { + display:inline; +} +.mc_signup_submit { + text-align:center; +} +ul.mc_list { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} +ul.mc_list li { + font-size: 14px; +} +#ui-datepicker-div .ui-datepicker-year { + display: none; +} +#ui-datepicker-div.show .ui-datepicker-year { + display: inline; + padding-left: 3px +} +.widget_mailchimpsf_widget .widget-title { + line-height: 1.4em; + margin-bottom: 0.75em; +} +.mc_custom_border_hdr, +#mc_subheader { + line-height: 1.25em; + margin-bottom: 18px; +} +.mc_merge_var { + padding:0; + margin:0; + margin-bottom: 1.0em; +} +.mc_var_label, +.mc_interest_label { + display: block; + margin-bottom: 0.5em; +} +.mc_input { + -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 { + margin-top: 1.0em; + margin-bottom: 0.5em; + display: block; +} +.mc_address_label ~ select { + padding: 10px 8px; + width: 100%; +} +.mc_list li { + list-style: none; + background: none !important; +} +.mc_interests_header { + font-weight:bold; + margin-top: 1.0em; + margin-bottom: 0.5em; +} +.mc_interest label, +.mc_interest input { + margin-bottom: 0.4em; +} +#mc_signup_submit { + margin-top: 1.5em; + padding: 10px 8px; + width: 80%; +} +#mc_unsub_link a { + font-size: 0.75em; +} +#mc_unsub_link { + margin-top: 1.0em; +} +.mc_header_address, +.mc_email_format { + display: block; + font-weight: bold; + margin-top: 1.0em; + margin-bottom: 0.5em; +} +.mc_email_options { + margin-top: 0.5em; +} +.mc_email_type { + padding-left: 4px; +} +#mc-indicates-required { + width:100%; + margin-top: 1em; +} diff --git a/assets/js/mailchimp.js b/assets/js/mailchimp.js index 78e61513..a27900ea 100644 --- a/assets/js/mailchimp.js +++ b/assets/js/mailchimp.js @@ -51,3 +51,46 @@ }); }); })(window.jQuery); + +/* Datepicker functions for the Mailchimp Widget */ +(function ($) { + if ($('.date-pick').length > 0) { + // Datepicker for the date-pick class + $('.date-pick').each(function () { + let format = $(this).data('format') || 'mm/dd/yyyy'; + format = format.replace(/yyyy/i, 'yy'); + $(this).datepicker({ + autoFocusNextInput: true, + constrainInput: false, + changeMonth: true, + changeYear: true, + // eslint-disable-next-line no-unused-vars + beforeShow(input, inst) { + $('#ui-datepicker-div').addClass('show'); + }, + dateFormat: format.toLowerCase(), + }); + }); + } + + if ($('.birthdate-pick').length > 0) { + const d = new Date(); + $('.birthdate-pick').each(function () { + let format = $(this).data('format') || 'mm/dd'; + format = format.replace(/yyyy/i, 'yy'); + $(this).datepicker({ + autoFocusNextInput: true, + constrainInput: false, + changeMonth: true, + changeYear: false, + minDate: new Date(d.getFullYear(), 1 - 1, 1), + maxDate: new Date(d.getFullYear(), 12 - 1, 31), + // eslint-disable-next-line no-unused-vars + beforeShow(input, inst) { + $('#ui-datepicker-div').removeClass('show'); + }, + dateFormat: format.toLowerCase(), + }); + }); + } +})(window.jQuery); diff --git a/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php b/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php index fbc13408..45496dca 100644 --- a/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php +++ b/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php @@ -82,10 +82,11 @@ public function register_blocks() { $data = 'window.mailchimp_sf_block_data = ' . wp_json_encode( $data ); wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' ); - ob_start(); - require_once MCSF_DIR . '/views/css/frontend.php'; - $data = ob_get_clean(); - wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $data ); + // Backwards compatibility. TODO: Remove this in a future version. + if ( get_option( 'mc_custom_style' ) === 'on' ) { + $custom_css = mailchimp_sf_custom_style_css(); + wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $custom_css ); + } } /** diff --git a/includes/blocks/mailchimp/editor.css b/includes/blocks/mailchimp/editor.css index 5862848a..31229236 100644 --- a/includes/blocks/mailchimp/editor.css +++ b/includes/blocks/mailchimp/editor.css @@ -1,4 +1,22 @@ /* Leave this file - wp_add_inline_style relies on this file existing */ +div.mc_interest{ + width:100%; +} +#mc_signup_form label.mc_interest_label { + display:inline; +} +.mc_signup_submit { + text-align:center; +} +ul.mc_list { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} +ul.mc_list li { + font-size: 14px; +} + #mc_message { display: none; } @@ -65,8 +83,7 @@ div#mc_subheader:has(h3 span:empty) { margin-bottom: 1em; } -.mc_var_label, -.mc_interest_label { +.mc_var_label { display: block; margin-bottom: 0.5em; } @@ -103,7 +120,6 @@ select.mc_select { margin-top: 1.0em; margin-bottom: 0.5em; } -.mc_interest label, .mc_interest input { margin-bottom: 0.4em; } diff --git a/includes/blocks/mailchimp/markup.php b/includes/blocks/mailchimp/markup.php index a7085dbd..843e5da1 100644 --- a/includes/blocks/mailchimp/markup.php +++ b/includes/blocks/mailchimp/markup.php @@ -80,94 +80,6 @@ function ( $single_list ) { - -