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

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

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

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

231 lines 5.6 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	/>
105	{nameFields === 'first-middle-last' ? (
106	<>
107	<TextControl
108	label={__('Middle Placeholder', 'ghostkit')}
109	value={placeholderMiddle}
110	onChange={(val) =>
111	setAttributes({ placeholderMiddle: val })
112	}
113	/>
114	<TextControl
115	label={__('Middle Default', 'ghostkit')}
116	value={defaultMiddle}
117	onChange={(val) =>
118	setAttributes({ defaultMiddle: val })
119	}
120	/>
121	</>
122	) : null}
123	{nameFields === 'first-middle-last' \|\|
124	nameFields === 'first-last' ? (
125	<>
126	<TextControl
127	label={__('Last Placeholder', 'ghostkit')}
128	value={placeholderLast}
129	onChange={(val) =>
130	setAttributes({ placeholderLast: val })
131	}
132	/>
133	<TextControl
134	label={__('Last Default', 'ghostkit')}
135	value={defaultLast}
136	onChange={(val) =>
137	setAttributes({ defaultLast: val })
138	}
139	/>
140	</>
141	) : null}
142	</PanelBody>
143	</InspectorControls>
144	<div {...blockProps}>
145	<FieldLabel {...props} />
146
147	{nameFields === 'first-middle-last' \|\|
148	nameFields === 'first-last' ? (
149	<div className="ghostkit-form-field-row">
150	<div className="ghostkit-form-field-name-first">
151	<TextControl
152	type="email"
153	{...getFieldAttributes(attributes)}
154	/>
155	<FieldDescription {...props} />
156	</div>
157	{nameFields === 'first-middle-last' ? (
158	<div className="ghostkit-form-field-name-middle">
159	<TextControl
160	type="email"
161	{...getFieldAttributes({
162	slug: attributes.slug
163	? `${attributes.slug}-middle`
164	: null,
165	placeholder:
166	attributes.placeholderMiddle,
167	default: attributes.defaultMiddle,
168	required: attributes.required,
169	})}
170	/>
171	<RichText
172	inlineToolbar
173	tagName="small"
174	className="ghostkit-form-field-description"
175	value={descriptionMiddle}
176	placeholder={__(
177	'Write description…',
178	'ghostkit'
179	)}
180	onChange={(val) =>
181	setAttributes({
182	descriptionMiddle: val,
183	})
184	}
185	/>
186	</div>
187	) : null}
188	{nameFields === 'first-middle-last' \|\|
189	nameFields === 'first-last' ? (
190	<div className="ghostkit-form-field-name-last">
191	<TextControl
192	type="email"
193	{...getFieldAttributes({
194	slug: attributes.slug
195	? `${attributes.slug}-last`
196	: null,
197	placeholder: attributes.placeholderLast,
198	default: attributes.defaultLast,
199	required: attributes.required,
200	})}
201	/>
202	<RichText
203	inlineToolbar
204	tagName="small"
205	className="ghostkit-form-field-description"
206	value={descriptionLast}
207	placeholder={__(
208	'Write description…',
209	'ghostkit'
210	)}
211	onChange={(val) =>
212	setAttributes({ descriptionLast: val })
213	}
214	/>
215	</div>
216	) : null}
217	</div>
218	) : (
219	<>
220	<TextControl
221	type="email"
222	{...getFieldAttributes(attributes)}
223	/>
224	<FieldDescription {...props} />
225	</>
226	)}
227	</div>
228	</>
229	);
230	}
231