Block Animations, Motion & Scroll Effects – Ghost Kit / 2.25.0

Block Animations, Motion & Scroll Effects – Ghost Kit v2.25.0

ghostkit / gutenberg / blocks / form / fields / submit / edit.js

edit.js in Block Animations, Motion & Scroll Effects – Ghost Kit 2.25.0, at gutenberg/blocks/form/fields/submit/edit.js

161 lines 3.8 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames/dedupe';
5	import { throttle } from 'throttle-debounce';
6
7	/**
8	* WordPress dependencies
9	*/
10	const { __ } = wp.i18n;
11
12	const { applyFilters } = wp.hooks;
13
14	const { Component, Fragment } = wp.element;
15
16	const { PanelBody, BaseControl } = wp.components;
17
18	const { InspectorControls, InnerBlocks, BlockControls, BlockAlignmentToolbar } = wp.blockEditor;
19
20	const { compose } = wp.compose;
21
22	const { withSelect, withDispatch } = wp.data;
23
24	/**
25	* Block Edit Class.
26	*/
27	class BlockEdit extends Component {
28	constructor(props) {
29	super(props);
30
31	this.maybeChangeButtonTagName = throttle(200, this.maybeChangeButtonTagName.bind(this));
32	}
33
34	componentDidMount() {
35	this.maybeChangeButtonTagName();
36	}
37
38	componentDidUpdate() {
39	this.maybeChangeButtonTagName();
40	}
41
42	maybeChangeButtonTagName() {
43	this.props.changeButtonTagName();
44	}
45
46	render() {
47	const { attributes, setAttributes } = this.props;
48
49	let { className = '' } = this.props;
50
51	const { align } = attributes;
52
53	className = classnames(
54	'ghostkit-form-submit-button',
55	align && align !== 'none' ? `ghostkit-form-submit-button-align-${align}` : false,
56	className
57	);
58
59	className = applyFilters('ghostkit.editor.className', className, this.props);
60
61	return (
62	<Fragment>
63	<BlockControls>
64	<BlockAlignmentToolbar
65	value={align}
66	onChange={(value) => setAttributes({ align: value })}
67	controls={['left', 'center', 'right']}
68	/>
69	</BlockControls>
70	<InspectorControls>
71	<PanelBody>
72	<BaseControl label={__('Align', 'ghostkit')}>
73	<div>
74	<BlockAlignmentToolbar
75	value={align}
76	onChange={(value) => setAttributes({ align: value })}
77	controls={['left', 'center', 'right']}
78	isCollapsed={false}
79	/>
80	</div>
81	</BaseControl>
82	</PanelBody>
83	</InspectorControls>
84	<div className={className}>
85	<InnerBlocks
86	template={[
87	[
88	'ghostkit/button-single',
89	{
90	text: __('Submit', 'ghostkit'),
91	tagName: 'button',
92	focusOutlineWeight: 2,
93	},
94	],
95	]}
96	allowedBlocks={['ghostkit/button-single']}
97	templateLock="all"
98	/>
99	</div>
100	</Fragment>
101	);
102	}
103	}
104
105	/**
106	* Parse all button blocks.
107	*
108	* @param {Object} submitData submit block data.
109	*
110	* @return {Array} - fields list.
111	*/
112	function getAllButtonBlocks(submitData) {
113	let result = [];
114
115	if (submitData.innerBlocks && submitData.innerBlocks.length) {
116	submitData.innerBlocks.forEach((block) => {
117	// field data.
118	if (block.name && block.name === 'ghostkit/button-single') {
119	result.push(block);
120	}
121
122	// inner blocks.
123	if (block.innerBlocks && block.innerBlocks.length) {
124	result = [...result, ...getAllButtonBlocks(block)];
125	}
126	});
127	}
128
129	return result;
130	}
131
132	export default compose([
133	withSelect((select, ownProps) => {
134	const { getBlock } = select('core/block-editor');
135
136	return {
137	blockData: getBlock(ownProps.clientId),
138	};
139	}),
140	withDispatch((dispatch, ownProps) => {
141	const { updateBlockAttributes } = dispatch('core/block-editor');
142
143	return {
144	changeButtonTagName() {
145	const { blockData } = ownProps;
146
147	const allButtonBlocks = getAllButtonBlocks(blockData) \|\| [];
148
149	// Generate slugs for new fields.
150	allButtonBlocks.forEach((data) => {
151	if (!data.attributes.tagName \|\| data.attributes.tagName !== 'button') {
152	updateBlockAttributes(data.clientId, {
153	tagName: 'button',
154	});
155	}
156	});
157	},
158	};
159	}),
160	])(BlockEdit);
161