Skip to content

Commit 75ad39b

Browse files
dkotterdkotter
authored
Merge pull request #132 from mailchimp/enhancement/82-2
[Block Updates] Move Audience Groups to the InnerBlocks to allow reordering.
2 parents ece5aa3 + 0e8f698 commit 75ad39b

File tree

13 files changed

+392
-190
lines changed

13 files changed

+392
-190
lines changed

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

Lines changed: 21 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,17 @@ 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+
'submit_text' => get_option( 'mc_submit_text', __( 'Subscribe', 'mailchimp' ) ),
76+
'show_unsubscribe_link' => get_option( 'mc_use_unsub_link', 'off' ) === 'on',
77+
'update_existing_subscribers' => (bool) get_option( 'mc_update_existing', true ),
78+
'double_opt_in' => (bool) get_option( 'mc_double_optin', true ),
79+
'merge_fields_visibility' => $merge_fields_visibility,
80+
'interest_groups_visibility' => $interest_groups_visibility,
6681
);
6782
$data = 'window.mailchimp_sf_block_data = ' . wp_json_encode( $data );
6883
wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' );

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

Lines changed: 4 additions & 5 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,13 +316,12 @@ 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 isRequired = mailchimpListData?.[listId]?.mergeFields?.[tag]?.required || false;
321320

322321
return (
323322
<div {...blockProps} style={{ color: 'inherit' }}>
324323
<MailchimpFormField {...props} />
325-
{isPublic && !isRequired && (
324+
{!isRequired && (
326325
<BlockControls>
327326
<ToolbarVisibilityGroup
328327
visible={visible}

‎includes/blocks/mailchimp-form-field/field-markup.php

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ function ( $field ) use ( $field_tag ) {
3535
?>
3636
<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
3737
<?php
38-
if ( $merge_field['public'] ) {
39-
echo mailchimp_form_field( $merge_field, $num_fields, $is_visible, $label ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function
40-
}
38+
echo mailchimp_form_field( $merge_field, $num_fields, $is_visible, $label ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function
4139
?>
4240
</div>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 3,
4+
"name": "mailchimp/mailchimp-audience-group",
5+
"title": "Mailchimp Audience Group",
6+
"category": "widgets",
7+
"attributes": {
8+
"id": {
9+
"type": "string"
10+
},
11+
"label": {
12+
"type": "string"
13+
},
14+
"visible": {
15+
"type": "boolean"
16+
}
17+
},
18+
"supports": {
19+
"html": false,
20+
"reusable": true,
21+
"lock": false,
22+
"typography": {
23+
"fontSize": true,
24+
"lineHeight": true
25+
}
26+
},
27+
"parent": [
28+
"mailchimp/mailchimp"
29+
],
30+
"usesContext": ["mailchimp/list_id"],
31+
"editorScript": "file:./index.js",
32+
"render": "file:./markup.php"
33+
}

‎includes/blocks/mailchimp-form-group/edit.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { BlockControls, RichText, useBlockProps } from '@wordpress/block-editor';
2+
import { __ } from '@wordpress/i18n';
3+
import { Disabled, ToolbarButton, ToolbarGroup } from '@wordpress/components';
4+
5+
const ToolbarVisibilityGroup = ({ visible, onClick }) => {
6+
return (
7+
<ToolbarGroup>
8+
<ToolbarButton
9+
title={__('Visibility', 'mailchimp')}
10+
icon="hidden"
11+
onClick={onClick}
12+
className={!visible ? 'is-pressed' : undefined}
13+
/>
14+
</ToolbarGroup>
15+
);
16+
};
17+
18+
export const MailchimpGroup = (props) => {
19+
const {
20+
attributes,
21+
setAttributes,
22+
context: { 'mailchimp/list_id': listId },
23+
} = props;
24+
const { id, label, visible } = attributes;
25+
const { mailchimpListData } = window;
26+
const group = mailchimpListData?.[listId]?.interestGroups?.[id] || {};
27+
28+
if (!group) {
29+
return null;
30+
}
31+
32+
const { type } = group;
33+
34+
return (
35+
<div
36+
className={`${visible && type !== 'hidden' ? 'mailchimp_interest_group_visible' : 'mailchimp_interest_group_hidden'}`}
37+
>
38+
<div className="mc_interests_header">
39+
<RichText
40+
tagName="label"
41+
value={label}
42+
onChange={(label) => setAttributes({ label })}
43+
placeholder={__('Enter a label', 'mailchimp')}
44+
/>
45+
</div>
46+
{!!(visible && type !== 'hidden') && (
47+
<Disabled>
48+
<div className="mc_interest">
49+
{group.type === 'checkboxes' &&
50+
group.groups.map((choice) => (
51+
<>
52+
<label
53+
htmlFor={`mc_interest_${group.id}_${choice.id}`}
54+
className="mc_interest_label"
55+
>
56+
<input
57+
id={`mc_interest_${group.id}_${choice.id}`}
58+
type="checkbox"
59+
name={`group[${group.id}][${choice.id}]`}
60+
value={choice.id}
61+
className="mc_interest"
62+
/>
63+
{choice.name}
64+
</label>
65+
<br />
66+
</>
67+
))}
68+
{group.type === 'radio' &&
69+
group.groups.map((choice) => (
70+
<>
71+
<input
72+
id={`mc_interest_${group.id}_${choice.id}`}
73+
type="radio"
74+
name={`group[${group.id}]`}
75+
value={choice.id}
76+
className="mc_interest"
77+
/>
78+
<label
79+
htmlFor={`mc_interest_${group.id}_${choice.id}`}
80+
className="mc_interest_label"
81+
>
82+
{choice.name}
83+
</label>
84+
<br />
85+
</>
86+
))}
87+
{group.type === 'dropdown' && (
88+
<select name={`group[${group.id}]`}>
89+
{group.groups.map((choice) => (
90+
<option key={choice.id} value={choice.id}>
91+
{choice.name}
92+
</option>
93+
))}
94+
</select>
95+
)}
96+
</div>
97+
</Disabled>
98+
)}
99+
</div>
100+
);
101+
};
102+
103+
export const BlockEdit = (props) => {
104+
const blockProps = useBlockProps();
105+
const {
106+
attributes,
107+
setAttributes,
108+
context: { 'mailchimp/list_id': listId },
109+
} = props;
110+
const { visible, id } = attributes;
111+
const { mailchimpListData } = window;
112+
const isHidden = mailchimpListData?.[listId]?.interestGroups?.[id]?.type === 'hidden';
113+
114+
return (
115+
<div {...blockProps} style={{ color: 'inherit' }}>
116+
<MailchimpGroup {...props} />
117+
{!isHidden && (
118+
<BlockControls>
119+
<ToolbarVisibilityGroup
120+
visible={visible}
121+
onClick={() => setAttributes({ visible: !visible })}
122+
/>
123+
</BlockControls>
124+
)}
125+
</div>
126+
);
127+
};

‎includes/blocks/mailchimp-form-group/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { registerBlockType } from '@wordpress/blocks';
2+
3+
import { BlockEdit } from './edit';
4+
import metadata from './block.json';
5+
6+
registerBlockType(metadata, {
7+
icon: 'groups',
8+
edit: BlockEdit,
9+
save: () => null,
10+
});

‎includes/blocks/mailchimp-form-group/markup.php

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<?php
2+
/**
3+
* Displays a Interest group.
4+
*
5+
* @package Mailchimp
6+
*/
7+
8+
$list_id = $block->context['mailchimp/list_id'] ?? '';
9+
$group_id = $attributes['id'] ?? '';
10+
$label = $attributes['label'] ?? '';
11+
$is_visible = $attributes['visible'] ?? false;
12+
13+
// Bail if we don't have a list ID or group ID.
14+
if ( ! $list_id || ! $group_id || ! $is_visible ) {
15+
return;
16+
}
17+
18+
$interest_groups = get_option( 'mailchimp_sf_interest_groups_' . $list_id, array() );
19+
$interest_groups = array_filter(
20+
$interest_groups,
21+
function ( $group ) use ( $group_id ) {
22+
return $group['id'] === $group_id;
23+
}
24+
);
25+
26+
$interest_group = current( $interest_groups );
27+
// Bail if we don't have a interest group.
28+
if ( empty( $interest_group ) ) {
29+
return;
30+
}
31+
32+
?>
33+
<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
34+
<?php
35+
if ( 'hidden' !== $interest_group['type'] ) {
36+
?>
37+
<div class="mc_interests_header">
38+
<?php echo wp_kses_post( $label ); ?>
39+
</div><!-- /mc_interests_header -->
40+
<div class="mc_interest">
41+
<?php
42+
} else {
43+
?>
44+
<div class="mc_interest" style="display: none;">
45+
<?php
46+
}
47+
48+
mailchimp_interest_group_field( $interest_group );
49+
?>
50+
</div><!-- /mc_interest -->
51+
</div>

‎includes/blocks/mailchimp/block.json

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,16 @@
1616
"type": "string"
1717
},
1818
"submit_text": {
19-
"type": "string",
20-
"default": "Subscribe"
21-
},
22-
"interest_groups_visibility": {
23-
"type": "object"
19+
"type": "string"
2420
},
2521
"double_opt_in": {
26-
"type": "boolean",
27-
"default": true
22+
"type": "boolean"
2823
},
2924
"update_existing_subscribers": {
30-
"type": "boolean",
31-
"default": true
25+
"type": "boolean"
3226
},
3327
"show_unsubscribe_link": {
34-
"type": "boolean",
35-
"default": false
28+
"type": "boolean"
3629
},
3730
"unsubscribe_link_text": {
3831
"type": "string",

0 commit comments

Comments
 (0)