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

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

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

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

249 lines 6.2 KB

Raw Download Zip

1	import classnames from 'classnames/dedupe';
2
3	import {
4	InspectorControls,
5	RichText,
6	useBlockProps,
7	} from '@wordpress/block-editor';
8	import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
9	import { applyFilters } from '@wordpress/hooks';
10	import { __ } from '@wordpress/i18n';
11
12	import {
13	FieldDefaultSettings,
14	getFieldAttributes,
15	} from '../../field-attributes';
16	import FieldDescription from '../../field-description';
17	import FieldLabel from '../../field-label';
18
19	/**
20	* Block Edit Class.
21	*
22	* @param props
23	*/
24	export default function BlockEdit(props) {
25	const { attributes, setAttributes } = props;
26
27	const {
28	description,
29	nameFields,
30	descriptionLast,
31	placeholderLast,
32	defaultLast,
33	descriptionMiddle,
34	placeholderMiddle,
35	defaultMiddle,
36	} = attributes;
37
38	let { className = '' } = props;
39
40	className = classnames(
41	'ghostkit-form-field ghostkit-form-field-name',
42	nameFields === 'first-middle-last' \|\| nameFields === 'first-last'
43	? 'ghostkit-form-field-name-with-last'
44	: '',
45	nameFields === 'first-middle-last'
46	? 'ghostkit-form-field-name-with-middle'
47	: '',
48	className
49	);
50
51	className = applyFilters('ghostkit.editor.className', className, props);
52
53	const blockProps = useBlockProps({ className });
54
55	return (
56	<>
57	<InspectorControls>
58	<PanelBody>
59	<FieldDefaultSettings {...props} />
60	</PanelBody>
61	<PanelBody title={__('Name Fields', 'ghostkit')}>
62	<SelectControl
63	options={[
64	{
65	label: 'First',
66	value: 'first',
67	},
68	{
69	label: 'First Last',
70	value: 'first-last',
71	},
72	{
73	label: 'First Middle Last',
74	value: 'first-middle-last',
75	},
76	]}
77	value={nameFields}
78	onChange={(val) => {
79	if (val === 'first-last') {
80	setAttributes({
81	nameFields: val,
82	description:
83	description \|\| __('First', 'ghostkit'),
84	descriptionLast:
85	descriptionLast \|\|
86	__('Last', 'ghostkit'),
87	});
88	} else if (val === 'first-middle-last') {
89	setAttributes({
90	nameFields: val,
91	description:
92	description \|\| __('First', 'ghostkit'),
93	descriptionLast:
94	descriptionLast \|\|
95	__('Last', 'ghostkit'),
96	descriptionMiddle:
97	descriptionMiddle \|\|
98	__('Middle', 'ghostkit'),
99	});
100	} else {
101	setAttributes({ nameFields: val });
102	}
103	}}
104	__next40pxDefaultSize
105	__nextHasNoMarginBottom
106	/>
107	{nameFields === 'first-middle-last' ? (
108	<>
109	<TextControl
110	label={__('Middle Placeholder', 'ghostkit')}
111	value={placeholderMiddle}
112	onChange={(val) =>
113	setAttributes({ placeholderMiddle: val })
114	}
115	__next40pxDefaultSize
116	__nextHasNoMarginBottom
117	/>
118	<TextControl
119	label={__('Middle Default', 'ghostkit')}
120	value={defaultMiddle}
121	onChange={(val) =>
122	setAttributes({ defaultMiddle: val })
123	}
124	__next40pxDefaultSize
125	__nextHasNoMarginBottom
126	/>
127	</>
128	) : null}
129	{nameFields === 'first-middle-last' \|\|
130	nameFields === 'first-last' ? (
131	<>
132	<TextControl
133	label={__('Last Placeholder', 'ghostkit')}
134	value={placeholderLast}
135	onChange={(val) =>
136	setAttributes({ placeholderLast: val })
137	}
138	__next40pxDefaultSize
139	__nextHasNoMarginBottom
140	/>
141	<TextControl
142	label={__('Last Default', 'ghostkit')}
143	value={defaultLast}
144	onChange={(val) =>
145	setAttributes({ defaultLast: val })
146	}
147	__next40pxDefaultSize
148	__nextHasNoMarginBottom
149	/>
150	</>
151	) : null}
152	</PanelBody>
153	</InspectorControls>
154	<div {...blockProps}>
155	<FieldLabel {...props} />
156
157	{nameFields === 'first-middle-last' \|\|
158	nameFields === 'first-last' ? (
159	<div className="ghostkit-form-field-row">
160	<div className="ghostkit-form-field-name-first">
161	<TextControl
162	type="email"
163	__next40pxDefaultSize
164	__nextHasNoMarginBottom
165	{...getFieldAttributes(attributes)}
166	/>
167	<FieldDescription {...props} />
168	</div>
169	{nameFields === 'first-middle-last' ? (
170	<div className="ghostkit-form-field-name-middle">
171	<TextControl
172	type="email"
173	__next40pxDefaultSize
174	__nextHasNoMarginBottom
175	{...getFieldAttributes({
176	slug: attributes.slug
177	? `${attributes.slug}-middle`
178	: null,
179	placeholder:
180	attributes.placeholderMiddle,
181	default: attributes.defaultMiddle,
182	required: attributes.required,
183	})}
184	/>
185	<RichText
186	inlineToolbar
187	tagName="small"
188	className="ghostkit-form-field-description"
189	value={descriptionMiddle}
190	placeholder={__(
191	'Write description…',
192	'ghostkit'
193	)}
194	onChange={(val) =>
195	setAttributes({
196	descriptionMiddle: val,
197	})
198	}
199	/>
200	</div>
201	) : null}
202	{nameFields === 'first-middle-last' \|\|
203	nameFields === 'first-last' ? (
204	<div className="ghostkit-form-field-name-last">
205	<TextControl
206	type="email"
207	__next40pxDefaultSize
208	__nextHasNoMarginBottom
209	{...getFieldAttributes({
210	slug: attributes.slug
211	? `${attributes.slug}-last`
212	: null,
213	placeholder: attributes.placeholderLast,
214	default: attributes.defaultLast,
215	required: attributes.required,
216	})}
217	/>
218	<RichText
219	inlineToolbar
220	tagName="small"
221	className="ghostkit-form-field-description"
222	value={descriptionLast}
223	placeholder={__(
224	'Write description…',
225	'ghostkit'
226	)}
227	onChange={(val) =>
228	setAttributes({ descriptionLast: val })
229	}
230	/>
231	</div>
232	) : null}
233	</div>
234	) : (
235	<>
236	<TextControl
237	type="email"
238	__next40pxDefaultSize
239	__nextHasNoMarginBottom
240	{...getFieldAttributes(attributes)}
241	/>
242	<FieldDescription {...props} />
243	</>
244	)}
245	</div>
246	</>
247	);
248	}
249