Skip to content

Commit f874acc

Browse files
dkotterdkotter
authored
Merge pull request #161 from mailchimp/enhancement/144
Improve the enqueueing of JS scripts and styles
2 parents c59af15 + 3bc03b1 commit f874acc

File tree

9 files changed

+222
-351
lines changed

9 files changed

+222
-351
lines changed

‎assets/css/frontend.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.mc_error_msg, .mc_error_msg a {
2+
color: red;
3+
margin-bottom: 1.0em;
4+
}
5+
.mc_success_msg {
6+
color: green;
7+
margin-bottom: 1.0em;
8+
}
9+
div.mc_interest{
10+
width:100%;
11+
}
12+
#mc_signup_form label.mc_interest_label {
13+
display:inline;
14+
}
15+
.mc_signup_submit {
16+
text-align:center;
17+
}
18+
ul.mc_list {
19+
list-style-type: none;
20+
margin-left: 0;
21+
padding-left: 0;
22+
}
23+
ul.mc_list li {
24+
font-size: 14px;
25+
}
26+
#ui-datepicker-div .ui-datepicker-year {
27+
display: none;
28+
}
29+
#ui-datepicker-div.show .ui-datepicker-year {
30+
display: inline;
31+
padding-left: 3px
32+
}
33+
.widget_mailchimpsf_widget .widget-title {
34+
line-height: 1.4em;
35+
margin-bottom: 0.75em;
36+
}
37+
.mc_custom_border_hdr,
38+
#mc_subheader {
39+
line-height: 1.25em;
40+
margin-bottom: 18px;
41+
}
42+
.mc_merge_var {
43+
padding:0;
44+
margin:0;
45+
margin-bottom: 1.0em;
46+
}
47+
.mc_var_label,
48+
.mc_interest_label {
49+
display: block;
50+
margin-bottom: 0.5em;
51+
}
52+
.mc_input {
53+
-moz-box-sizing: border-box;
54+
-webkit-box-sizing: border-box;
55+
box-sizing: border-box;
56+
padding: 10px 8px;
57+
width: 100%;
58+
}
59+
.mc_input.mc_phone {
60+
width: auto;
61+
}
62+
select.mc_select {
63+
margin-top: 0.5em;
64+
padding: 10px 8px;
65+
width: 100%;
66+
}
67+
.mc_address_label {
68+
margin-top: 1.0em;
69+
margin-bottom: 0.5em;
70+
display: block;
71+
}
72+
.mc_address_label ~ select {
73+
padding: 10px 8px;
74+
width: 100%;
75+
}
76+
.mc_list li {
77+
list-style: none;
78+
background: none !important;
79+
}
80+
.mc_interests_header {
81+
font-weight:bold;
82+
margin-top: 1.0em;
83+
margin-bottom: 0.5em;
84+
}
85+
.mc_interest label,
86+
.mc_interest input {
87+
margin-bottom: 0.4em;
88+
}
89+
#mc_signup_submit {
90+
margin-top: 1.5em;
91+
padding: 10px 8px;
92+
width: 80%;
93+
}
94+
#mc_unsub_link a {
95+
font-size: 0.75em;
96+
}
97+
#mc_unsub_link {
98+
margin-top: 1.0em;
99+
}
100+
.mc_header_address,
101+
.mc_email_format {
102+
display: block;
103+
font-weight: bold;
104+
margin-top: 1.0em;
105+
margin-bottom: 0.5em;
106+
}
107+
.mc_email_options {
108+
margin-top: 0.5em;
109+
}
110+
.mc_email_type {
111+
padding-left: 4px;
112+
}
113+
#mc-indicates-required {
114+
width:100%;
115+
margin-top: 1em;
116+
}

‎assets/js/mailchimp.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,46 @@
5151
});
5252
});
5353
})(window.jQuery);
54+
55+
/* Datepicker functions for the Mailchimp Widget */
56+
(function ($) {
57+
if ($('.date-pick').length > 0) {
58+
// Datepicker for the date-pick class
59+
$('.date-pick').each(function () {
60+
let format = $(this).data('format') || 'mm/dd/yyyy';
61+
format = format.replace(/yyyy/i, 'yy');
62+
$(this).datepicker({
63+
autoFocusNextInput: true,
64+
constrainInput: false,
65+
changeMonth: true,
66+
changeYear: true,
67+
// eslint-disable-next-line no-unused-vars
68+
beforeShow(input, inst) {
69+
$('#ui-datepicker-div').addClass('show');
70+
},
71+
dateFormat: format.toLowerCase(),
72+
});
73+
});
74+
}
75+
76+
if ($('.birthdate-pick').length > 0) {
77+
const d = new Date();
78+
$('.birthdate-pick').each(function () {
79+
let format = $(this).data('format') || 'mm/dd';
80+
format = format.replace(/yyyy/i, 'yy');
81+
$(this).datepicker({
82+
autoFocusNextInput: true,
83+
constrainInput: false,
84+
changeMonth: true,
85+
changeYear: false,
86+
minDate: new Date(d.getFullYear(), 1 - 1, 1),
87+
maxDate: new Date(d.getFullYear(), 12 - 1, 31),
88+
// eslint-disable-next-line no-unused-vars
89+
beforeShow(input, inst) {
90+
$('#ui-datepicker-div').removeClass('show');
91+
},
92+
dateFormat: format.toLowerCase(),
93+
});
94+
});
95+
}
96+
})(window.jQuery);

‎includes/blocks/class-mailchimp-list-subscribe-form-blocks.php

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,11 @@ public function register_blocks() {
8282
$data = 'window.mailchimp_sf_block_data = ' . wp_json_encode( $data );
8383
wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' );
8484

85-
ob_start();
86-
require_once MCSF_DIR . '/views/css/frontend.php';
87-
$data = ob_get_clean();
88-
wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $data );
85+
// Backwards compatibility. TODO: Remove this in a future version.
86+
if ( get_option( 'mc_custom_style' ) === 'on' ) {
87+
$custom_css = mailchimp_sf_custom_style_css();
88+
wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $custom_css );
89+
}
8990
}
9091

9192
/**

‎includes/blocks/mailchimp/editor.css

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
11
/* Leave this file - wp_add_inline_style relies on this file existing */
2+
div.mc_interest{
3+
width:100%;
4+
}
5+
#mc_signup_form label.mc_interest_label {
6+
display:inline;
7+
}
8+
.mc_signup_submit {
9+
text-align:center;
10+
}
11+
ul.mc_list {
12+
list-style-type: none;
13+
margin-left: 0;
14+
padding-left: 0;
15+
}
16+
ul.mc_list li {
17+
font-size: 14px;
18+
}
19+
220
#mc_message {
321
display: none;
422
}
@@ -65,8 +83,7 @@ div#mc_subheader:has(h3 span:empty) {
6583
margin-bottom: 1em;
6684
}
6785

68-
.mc_var_label,
69-
.mc_interest_label {
86+
.mc_var_label {
7087
display: block;
7188
margin-bottom: 0.5em;
7289
}
@@ -103,7 +120,6 @@ select.mc_select {
103120
margin-top: 1.0em;
104121
margin-bottom: 0.5em;
105122
}
106-
.mc_interest label,
107123
.mc_interest input {
108124
margin-bottom: 0.4em;
109125
}

‎includes/blocks/mailchimp/markup.php

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -80,94 +80,6 @@ function ( $single_list ) {
8080
<?php
8181
return;
8282
}
83-
// TODO: Move this to a separate CSS file.
84-
if ( get_option( 'mc_nuke_all_styles' ) !== '1' ) {
85-
?>
86-
<style>
87-
.widget_mailchimpsf_widget .widget-title {
88-
line-height: 1.4em;
89-
margin-bottom: 0.75em;
90-
}
91-
.mc_custom_border_hdr,
92-
#mc_subheader {
93-
line-height: 1.25em;
94-
margin-bottom: 18px;
95-
}
96-
.mc_merge_var {
97-
margin-bottom: 1.0em;
98-
}
99-
.mc_var_label,
100-
.mc_interest_label {
101-
display: block;
102-
margin-bottom: 0.5em;
103-
}
104-
.mc_input {
105-
-moz-box-sizing: border-box;
106-
-webkit-box-sizing: border-box;
107-
box-sizing: border-box;
108-
padding: 10px 8px;
109-
width: 100%;
110-
}
111-
.mc_input.mc_phone {
112-
width: auto;
113-
}
114-
select.mc_select {
115-
margin-top: 0.5em;
116-
padding: 10px 8px;
117-
width: 100%;
118-
}
119-
.mc_address_label {
120-
margin-top: 1.0em;
121-
margin-bottom: 0.5em;
122-
display: block;
123-
}
124-
.mc_address_label ~ select {
125-
padding: 10px 8px;
126-
width: 100%;
127-
}
128-
.mc_list li {
129-
list-style: none;
130-
background: none !important;
131-
}
132-
.mc_interests_header {
133-
margin-top: 1.0em;
134-
margin-bottom: 0.5em;
135-
}
136-
.mc_interest label,
137-
.mc_interest input {
138-
margin-bottom: 0.4em;
139-
}
140-
#mc_signup_submit {
141-
margin-top: 1.5em;
142-
padding: 10px 8px;
143-
width: 80%;
144-
}
145-
#mc_unsub_link a {
146-
font-size: 0.75em;
147-
}
148-
#mc_unsub_link {
149-
margin-top: 1.0em;
150-
}
151-
.mc_header_address,
152-
.mc_email_format {
153-
display: block;
154-
font-weight: bold;
155-
margin-top: 1.0em;
156-
margin-bottom: 0.5em;
157-
}
158-
.mc_email_options {
159-
margin-top: 0.5em;
160-
}
161-
.mc_email_type {
162-
padding-left: 4px;
163-
}
164-
#mc-indicates-required {
165-
width:100%;
166-
margin-top: 1em;
167-
}
168-
</style>
169-
<?php
170-
}
17183
?>
17284
<div class="mc_container">
17385
<?php

0 commit comments

Comments
 (0)