Skip to content

Commit bc62979

Browse files
committed
Moved block from sidebar to innerBlock.
1 parent dce6e45 commit bc62979

File tree

8 files changed

+132
-168
lines changed

8 files changed

+132
-168
lines changed

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ public function init() {
3535
* Register the block.
3636
*/
3737
public function register_blocks() {
38+
// Get the default visibility of interest groups.
39+
$interest_groups_visibility = array();
40+
$interest_groups = get_option( 'mc_interest_groups', array() );
41+
if ( ! empty( $interest_groups ) ) {
42+
foreach ( $interest_groups as $group ) {
43+
$visible = 'on' === get_option( 'mc_show_interest_groups_' . $group['id'], 'on' ) && 'hidden' !== $group['type'];
44+
$interest_groups_visibility[ $group['id'] ] = $visible ? 'on' : 'off';
45+
}
46+
}
47+
3848
// Get the default visibility of merge fields.
3949
$merge_fields_visibility = array();
4050
$merge_fields = get_option( 'mc_merge_vars', array() );
@@ -57,12 +67,13 @@ public function register_blocks() {
5767
}
5868

5969
$data = array(
60-
'admin_settings_url' => esc_url_raw( admin_url( 'admin.php?page=mailchimp_sf_options' ) ),
61-
'lists' => $this->get_lists(),
62-
'list_id' => get_option( 'mc_list_id', '' ),
63-
'header_text' => get_option( 'mc_header_content', '' ),
64-
'sub_header_text' => get_option( 'mc_subheader_content', '' ),
65-
'merge_fields_visibility' => $merge_fields_visibility,
70+
'admin_settings_url' => esc_url_raw( admin_url( 'admin.php?page=mailchimp_sf_options' ) ),
71+
'lists' => $this->get_lists(),
72+
'list_id' => get_option( 'mc_list_id', '' ),
73+
'header_text' => get_option( 'mc_header_content', '' ),
74+
'sub_header_text' => get_option( 'mc_subheader_content', '' ),
75+
'merge_fields_visibility' => $merge_fields_visibility,
76+
'interest_groups_visibility' => $interest_groups_visibility,
6677
);
6778
$data = 'window.mailchimp_sf_block_data = ' . wp_json_encode( $data );
6879
wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' );

includes/blocks/mailchimp-form-field/edit.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const MailchimpFormField = (props) => {
2626
} = props;
2727
const { tag, label, visible, type } = attributes;
2828
const { mailchimpListData } = window;
29-
const field = mailchimpListData?.[listId]?.[tag] || {};
29+
const field = mailchimpListData?.[listId]?.mergeFields?.[tag] || {};
3030

3131
if (!field) {
3232
return (
@@ -293,7 +293,7 @@ export const MailchimpFormField = (props) => {
293293
tagName="label"
294294
value={label}
295295
onChange={(label) => setAttributes({ label })}
296-
placeholder={__('Enter a label', 'mailchimp-form-field')}
296+
placeholder={__('Enter a label', 'mailchimp')}
297297
/>
298298
{required && showRequiredIndicator && <span className="mc_required">*</span>}
299299
</label>
@@ -316,8 +316,8 @@ export const BlockEdit = (props) => {
316316
} = props;
317317
const { visible, tag } = attributes;
318318
const { mailchimpListData } = window;
319-
const isPublic = mailchimpListData?.[listId]?.[tag]?.public;
320-
const isRequired = mailchimpListData?.[listId]?.[tag]?.required || false;
319+
const isPublic = mailchimpListData?.[listId]?.mergeFields?.[tag]?.public;
320+
const isRequired = mailchimpListData?.[listId]?.mergeFields?.[tag]?.required || false;
321321

322322
return (
323323
<div {...blockProps} style={{ color: 'inherit' }}>

includes/blocks/mailchimp-form-group/block.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://schemas.wp.org/trunk/block.json",
33
"apiVersion": 3,
4-
"name": "mailchimp/mailchimp-form-group",
4+
"name": "mailchimp/mailchimp-audience-group",
55
"title": "Mailchimp Audience Group",
66
"category": "widgets",
77
"attributes": {

includes/blocks/mailchimp/block.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@
1919
"type": "string",
2020
"default": "Subscribe"
2121
},
22-
"interest_groups_visibility": {
23-
"type": "object"
24-
},
2522
"double_opt_in": {
2623
"type": "boolean",
2724
"default": true

includes/blocks/mailchimp/edit.js

Lines changed: 96 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,12 @@ import {
1212
SelectControl,
1313
Spinner,
1414
Placeholder,
15-
Disabled,
1615
} from '@wordpress/components';
1716
import { useEffect, useState } from '@wordpress/element';
1817
import apiFetch from '@wordpress/api-fetch';
1918
import { useDispatch, useSelect } from '@wordpress/data';
2019
import { createBlock } from '@wordpress/blocks';
2120
import Icon from './icon';
22-
import { InterestGroups } from './interest-groups';
2321

2422
const SelectListPlaceholder = () => {
2523
return (
@@ -40,6 +38,7 @@ export const BlockEdit = (props) => {
4038
const {
4139
lists,
4240
merge_fields_visibility,
41+
interest_groups_visibility,
4342
list_id: listId,
4443
header_text,
4544
sub_header_text,
@@ -54,7 +53,6 @@ export const BlockEdit = (props) => {
5453
update_existing_subscribers,
5554
show_unsubscribe_link,
5655
unsubscribe_link_text,
57-
interest_groups_visibility,
5856
show_required_indicator = true,
5957
required_indicator_text,
6058
} = attributes;
@@ -70,7 +68,8 @@ export const BlockEdit = (props) => {
7068
(select) => select(blockEditorStore).getBlocksByClientId(clientId)?.[0]?.innerBlocks || [],
7169
[clientId],
7270
);
73-
const exisingTags = innerBlocks.map((block) => block?.attributes?.tag);
71+
const exisingTags = innerBlocks.map((block) => block?.attributes?.tag).filter(Boolean);
72+
const exisingGroups = innerBlocks.map((block) => block?.attributes?.id).filter(Boolean);
7473
const visibleFieldsCount = innerBlocks.filter((block) => block?.attributes?.visible).length;
7574

7675
const listOptions = [];
@@ -99,43 +98,60 @@ export const BlockEdit = (props) => {
9998
// Fetch data from API.
10099
apiFetch({ path: `/mailchimp/v1/list-data/${listId}` })
101100
.then((data) => {
101+
if (!data) {
102+
setError(__('Error fetching list data.', 'mailchimp'));
103+
setIsLoading(false);
104+
return;
105+
}
106+
102107
if (replaceBlocks) {
103108
// Replace all innerBlocks with new ones on list change.
104-
const listInnerBlocks = data?.merge_fields?.map((field) =>
105-
createBlock('mailchimp/mailchimp-form-field', {
106-
tag: field.tag,
107-
label: field.name,
108-
type: field.type,
109-
visible:
110-
(field.required || merge_fields_visibility?.[field.tag] === 'on') &&
111-
field.public,
112-
}),
113-
);
114-
replaceInnerBlocks(clientId, [...listInnerBlocks], false);
115-
116-
// Reset groups visibility settings on list change.
117-
if (data?.interest_groups?.length > 0) {
118-
const newVisibility = data?.interest_groups?.reduce((acc, field) => {
119-
acc[field.id] = 'off';
120-
return acc;
121-
}, {});
122-
setAttributes({ interest_groups_visibility: newVisibility });
123-
} else {
124-
setAttributes({ interest_groups_visibility: {} });
125-
}
109+
const listFieldsBlocks =
110+
data?.merge_fields?.map((field) =>
111+
createBlock('mailchimp/mailchimp-form-field', {
112+
tag: field.tag,
113+
label: field.name,
114+
type: field.type,
115+
visible:
116+
(field.required ||
117+
merge_fields_visibility?.[field.tag] === 'on') &&
118+
field.public,
119+
}),
120+
) || [];
121+
const listGroupsBlocks =
122+
data?.interest_groups?.map((group) =>
123+
createBlock('mailchimp/mailchimp-audience-group', {
124+
id: group.id,
125+
label: group.title,
126+
visible:
127+
interest_groups_visibility?.[group.id] === 'on' &&
128+
group.type !== 'hidden',
129+
}),
130+
) || [];
131+
replaceInnerBlocks(clientId, [...listFieldsBlocks, ...listGroupsBlocks], false);
126132
} else if (exisingTags && exisingTags.length > 0) {
127133
// Update existing innerBlocks with if new fields are added to the list or removed from the list.
128-
const newFormFields = data?.merge_fields?.filter(
129-
(field) => !exisingTags.includes(field.tag),
130-
);
134+
const newFormFields =
135+
data?.merge_fields?.filter((field) => !exisingTags.includes(field.tag)) ||
136+
[];
137+
const newFormGroups =
138+
data?.interest_groups?.filter(
139+
(group) => !exisingGroups.includes(group.id),
140+
) || [];
131141
const updatedInnerBlocks = innerBlocks.filter((block) => {
132-
const { tag } = block.attributes;
133-
return data?.merge_fields?.find((field) => field.tag === tag);
142+
const { tag, id } = block.attributes;
143+
if (tag) {
144+
return data?.merge_fields?.find((field) => field.tag === tag);
145+
}
146+
return data?.interest_groups?.find((group) => group.id === id);
134147
});
148+
135149
if (
136150
newFormFields.length > 0 ||
151+
newFormGroups.length > 0 ||
137152
updatedInnerBlocks.length !== innerBlocks.length
138153
) {
154+
// Create new blocks for newly added fields and groups.
139155
const newBlocks = newFormFields.map((field) =>
140156
createBlock('mailchimp/mailchimp-form-field', {
141157
tag: field.tag,
@@ -147,7 +163,22 @@ export const BlockEdit = (props) => {
147163
field.public,
148164
}),
149165
);
150-
replaceInnerBlocks(clientId, [...updatedInnerBlocks, ...newBlocks], false);
166+
const newGroupBlocks = newFormGroups.map((group) =>
167+
createBlock('mailchimp/mailchimp-audience-group', {
168+
id: group.id,
169+
label: group.title,
170+
visible:
171+
interest_groups_visibility?.[group.id] === 'on' &&
172+
group.type !== 'hidden',
173+
}),
174+
);
175+
176+
// Replace innerBlocks with updated ones.
177+
replaceInnerBlocks(
178+
clientId,
179+
[...updatedInnerBlocks, ...newBlocks, ...newGroupBlocks],
180+
false,
181+
);
151182
}
152183
}
153184

@@ -157,10 +188,17 @@ export const BlockEdit = (props) => {
157188
if (!window.mailchimpListData) {
158189
window.mailchimpListData = {};
159190
}
160-
window.mailchimpListData[listId] = data?.merge_fields?.reduce((acc, field) => {
161-
acc[field.tag] = field;
162-
return acc;
163-
}, {});
191+
const mergeFields =
192+
data?.merge_fields?.reduce((acc, field) => {
193+
acc[field.tag] = field;
194+
return acc;
195+
}, {}) || {};
196+
const interestGroups =
197+
data?.interest_groups?.reduce((acc, group) => {
198+
acc[group.id] = group;
199+
return acc;
200+
}, {}) || {};
201+
window.mailchimpListData[listId] = { mergeFields, interestGroups };
164202
setIsLoading(false);
165203
})
166204
.catch((error) => {
@@ -226,16 +264,28 @@ export const BlockEdit = (props) => {
226264
}
227265

228266
// Create a template for innerBlocks based on list data and visibility settings.
229-
const template = listData?.merge_fields?.map((field) => [
230-
'mailchimp/mailchimp-form-field',
231-
{
232-
tag: field.tag,
233-
label: field.name,
234-
type: field.type,
235-
visible:
236-
(field.required || merge_fields_visibility?.[field.tag] === 'on') && field.public,
237-
},
238-
]);
267+
const templateFields =
268+
listData?.merge_fields?.map((field) => [
269+
'mailchimp/mailchimp-form-field',
270+
{
271+
tag: field.tag,
272+
label: field.name,
273+
type: field.type,
274+
visible:
275+
(field.required || merge_fields_visibility?.[field.tag] === 'on') &&
276+
field.public,
277+
},
278+
]) || [];
279+
const templateGroups =
280+
listData?.interest_groups?.map((group) => [
281+
'mailchimp/mailchimp-audience-group',
282+
{
283+
id: group.id,
284+
label: group.title,
285+
visible: interest_groups_visibility?.[group.id] === 'on' && group.type !== 'hidden',
286+
},
287+
]) || [];
288+
const template = [...templateFields, ...templateGroups];
239289

240290
return (
241291
<>
@@ -280,12 +330,6 @@ export const BlockEdit = (props) => {
280330
template={template}
281331
templateLock="insert"
282332
/>
283-
<Disabled>
284-
<InterestGroups
285-
listData={listData}
286-
visibility={interest_groups_visibility}
287-
/>
288-
</Disabled>
289333
{show_required_indicator && (
290334
<div id="mc-indicates-required">
291335
<RichText
@@ -345,28 +389,6 @@ export const BlockEdit = (props) => {
345389
)}
346390
__nextHasNoMarginBottom
347391
/>
348-
{listData?.interest_groups?.length > 0 && (
349-
<div style={{ marginTop: '20px' }}>
350-
<h3>{__('Groups Settings', 'mailchimp')}</h3>
351-
{listData?.interest_groups?.map((group) => (
352-
<ToggleControl
353-
key={group.id}
354-
label={group.title}
355-
className="mailchimp-interest-groups"
356-
checked={interest_groups_visibility?.[group.id] === 'on'}
357-
onChange={(checked) => {
358-
setAttributes({
359-
interest_groups_visibility: {
360-
...interest_groups_visibility,
361-
[group.id]: checked ? 'on' : 'off',
362-
},
363-
});
364-
}}
365-
__nextHasNoMarginBottom
366-
/>
367-
))}
368-
</div>
369-
)}
370392
</PanelBody>
371393
<PanelBody title={__('Form Settings', 'mailchimp')} initialOpen={false}>
372394
<ToggleControl

includes/blocks/mailchimp/editor.css

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
opacity: 0.5;
1212
}
1313

14-
.mailchimp_merge_field_hidden {
14+
.mailchimp_merge_field_hidden,
15+
.mailchimp_interest_group_hidden {
1516
display: none;
1617
}
1718

18-
.is-selected .mailchimp_merge_field_hidden,
19-
.has-child-selected .mailchimp_merge_field_hidden {
19+
.wp-block-mailchimp-mailchimp.is-selected .mailchimp_merge_field_hidden,
20+
.wp-block-mailchimp-mailchimp.has-child-selected .mailchimp_merge_field_hidden,
21+
.wp-block-mailchimp-mailchimp.is-selected .mailchimp_interest_group_hidden,
22+
.wp-block-mailchimp-mailchimp.has-child-selected .mailchimp_interest_group_hidden {
2023
display: block;
2124
opacity: 0.2;
2225
border: 1px dashed grey;
@@ -27,14 +30,15 @@ div#mc_subheader:has(h3 span:empty) {
2730
display: none;
2831
}
2932

30-
.is-selected div#mc_subheader:has(h3 span:empty),
31-
.has-child-selected div#mc_subheader:has(h3 span:empty),
32-
.is-selected h2.mailchimp-block__header:has(span:empty),
33-
.has-child-selected h2.mailchimp-block__header:has(span:empty) {
33+
.wp-block-mailchimp-mailchimp.is-selected div#mc_subheader:has(h3 span:empty),
34+
.wp-block-mailchimp-mailchimp.has-child-selected div#mc_subheader:has(h3 span:empty),
35+
.wp-block-mailchimp-mailchimp.is-selected h2.mailchimp-block__header:has(span:empty),
36+
.wp-block-mailchimp-mailchimp.has-child-selected h2.mailchimp-block__header:has(span:empty) {
3437
display: block;
3538
}
3639

37-
#mc_signup_form .mailchimp_merge_field_hidden .mc_var_label {
40+
#mc_signup_form .mailchimp_merge_field_hidden .mc_var_label,
41+
#mc_signup_form .mailchimp_interest_group_hidden .mc_interests_header {
3842
padding: 0.25em 0.5em;
3943
margin: 0px;
4044
}

0 commit comments

Comments
 (0)