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

Block Animations, Motion & Scroll Effects – Ghost Kit v3.3.2

ghostkit / gutenberg / blocks / pricing-table-item / edit.js

edit.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.3.2, at gutenberg/blocks/pricing-table-item/edit.js

250 lines 6.0 KB

Raw Download Zip

1	import classnames from 'classnames/dedupe';
2
3	import {
4	InspectorControls,
5	RichText,
6	useBlockProps,
7	useInnerBlocksProps,
8	} from '@wordpress/block-editor';
9	import { BaseControl, PanelBody, ToggleControl } from '@wordpress/components';
10	import { applyFilters } from '@wordpress/hooks';
11	import { __ } from '@wordpress/i18n';
12
13	/**
14	* Block Edit Class.
15	*
16	* @param props
17	*/
18	export default function BlockEdit(props) {
19	const { attributes, setAttributes, isSelected } = props;
20
21	const {
22	popularText,
23	title,
24	price,
25	priceCurrency,
26	priceRepeat,
27	description,
28	features,
29
30	showPopular,
31	showTitle,
32	showPrice,
33	showPriceCurrency,
34	showPriceRepeat,
35	showDescription,
36	showFeatures,
37	showButton,
38	} = attributes;
39
40	let className = classnames(
41	'ghostkit-pricing-table-item-wrap',
42	showPopular && 'ghostkit-pricing-table-item-popular'
43	);
44
45	className = applyFilters('ghostkit.editor.className', className, props);
46
47	const blockProps = useBlockProps({ className });
48	const innerBlocksProps = useInnerBlocksProps(
49	{
50	className: 'ghostkit-pricing-table-item-button-wrapper',
51	},
52	{
53	template: [
54	[
55	'ghostkit/button',
56	{
57	align: 'center',
58	},
59	[
60	[
61	'ghostkit/button-single',
62	{
63	text: 'Purchase',
64	},
65	],
66	],
67	],
68	],
69	templateLock: 'all',
70	allowedBlocks: ['ghostkit/button'],
71	}
72	);
73
74	return (
75	<div {...blockProps}>
76	<InspectorControls>
77	<PanelBody>
78	<BaseControl>
79	<ToggleControl
80	label={__('Show Popular Badge', 'ghostkit')}
81	checked={!!showPopular}
82	onChange={(value) =>
83	setAttributes({ showPopular: value })
84	}
85	/>
86	<ToggleControl
87	label={__('Show Title', 'ghostkit')}
88	checked={!!showTitle}
89	onChange={(value) =>
90	setAttributes({ showTitle: value })
91	}
92	/>
93	<ToggleControl
94	label={__('Show Price', 'ghostkit')}
95	checked={!!showPrice}
96	onChange={(value) =>
97	setAttributes({ showPrice: value })
98	}
99	/>
100	{showPrice ? (
101	<>
102	<ToggleControl
103	label={__(
104	'Show Price Currency',
105	'ghostkit'
106	)}
107	checked={!!showPriceCurrency}
108	onChange={(value) =>
109	setAttributes({
110	showPriceCurrency: value,
111	})
112	}
113	/>
114	<ToggleControl
115	label={__('Show Price Repeat', 'ghostkit')}
116	checked={!!showPriceRepeat}
117	onChange={(value) =>
118	setAttributes({
119	showPriceRepeat: value,
120	})
121	}
122	/>
123	</>
124	) : null}
125	<ToggleControl
126	label={__('Show Description', 'ghostkit')}
127	checked={!!showDescription}
128	onChange={(value) =>
129	setAttributes({ showDescription: value })
130	}
131	/>
132	<ToggleControl
133	label={__('Show Features', 'ghostkit')}
134	checked={!!showFeatures}
135	onChange={(value) =>
136	setAttributes({ showFeatures: value })
137	}
138	/>
139	<ToggleControl
140	label={__('Show Button', 'ghostkit')}
141	checked={!!showButton}
142	onChange={(value) =>
143	setAttributes({ showButton: value })
144	}
145	/>
146	</BaseControl>
147	</PanelBody>
148	</InspectorControls>
149	<div className="ghostkit-pricing-table-item">
150	{showTitle ? (
151	<RichText
152	inlineToolbar
153	tagName="h3"
154	className="ghostkit-pricing-table-item-title"
155	onChange={(val) => setAttributes({ title: val })}
156	value={title}
157	placeholder={__('Plan', 'ghostkit')}
158	withoutInteractiveFormatting
159	/>
160	) : null}
161	{showPrice ? (
162	<div className="ghostkit-pricing-table-item-price">
163	{showPriceCurrency &&
164	(!RichText.isEmpty(priceCurrency) \|\| isSelected) ? (
165	<div className="ghostkit-pricing-table-item-price-currency">
166	<RichText
167	inlineToolbar
168	tagName="div"
169	onChange={(val) =>
170	setAttributes({ priceCurrency: val })
171	}
172	value={priceCurrency}
173	placeholder={__('$', 'ghostkit')}
174	withoutInteractiveFormatting
175	/>
176	</div>
177	) : null}
178	<div className="ghostkit-pricing-table-item-price-amount">
179	<RichText
180	inlineToolbar
181	tagName="div"
182	onChange={(val) =>
183	setAttributes({ price: val })
184	}
185	value={price}
186	placeholder="77"
187	withoutInteractiveFormatting
188	/>
189	</div>
190	{showPriceRepeat &&
191	(!RichText.isEmpty(priceRepeat) \|\| isSelected) ? (
192	<div className="ghostkit-pricing-table-item-price-repeat">
193	<RichText
194	inlineToolbar
195	tagName="div"
196	onChange={(val) =>
197	setAttributes({ priceRepeat: val })
198	}
199	value={priceRepeat}
200	placeholder={__('/mo', 'ghostkit')}
201	withoutInteractiveFormatting
202	/>
203	</div>
204	) : null}
205	</div>
206	) : null}
207	{showDescription &&
208	(!RichText.isEmpty(description) \|\| isSelected) ? (
209	<RichText
210	inlineToolbar
211	tagName="div"
212	className="ghostkit-pricing-table-item-description"
213	onChange={(val) => setAttributes({ description: val })}
214	value={description}
215	placeholder={__('Description', 'ghostkit')}
216	withoutInteractiveFormatting
217	/>
218	) : null}
219	{showFeatures && (!RichText.isEmpty(features) \|\| isSelected) ? (
220	<RichText
221	inlineToolbar
222	tagName="ul"
223	multiline="li"
224	className="ghostkit-pricing-table-item-features"
225	onChange={(val) => setAttributes({ features: val })}
226	value={features}
227	placeholder={__('Add features', 'ghostkit')}
228	/>
229	) : null}
230	{showButton ? <div {...innerBlocksProps} /> : null}
231	{showPopular &&
232	(!RichText.isEmpty(popularText) \|\| isSelected) ? (
233	<div className="ghostkit-pricing-table-item-popular-badge">
234	<RichText
235	inlineToolbar
236	tagName="div"
237	onChange={(val) =>
238	setAttributes({ popularText: val })
239	}
240	value={popularText}
241	placeholder={__('Popular', 'ghostkit')}
242	withoutInteractiveFormatting
243	/>
244	</div>
245	) : null}
246	</div>
247	</div>
248	);
249	}
250