Skip to content

Commit dce6e45

Browse files
iamdharmeshiamdharmesh
committed
Added new "Audience Group" block.
1 parent ece5aa3 commit dce6e45

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎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-form-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>

0 commit comments

Comments
 (0)