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

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

ghostkit / gutenberg / blocks / alert / edit.js

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

234 lines 5.9 KB

Raw Download Zip

1	import classnames from 'classnames/dedupe';
2
3	import {
4	BlockControls,
5	InnerBlocks,
6	InspectorControls,
7	useBlockProps,
8	useInnerBlocksProps,
9	} from '@wordpress/block-editor';
10	import {
11	PanelBody,
12	TabPanel,
13	ToggleControl,
14	ToolbarDropdownMenu,
15	ToolbarGroup,
16	} from '@wordpress/components';
17	import { useSelect } from '@wordpress/data';
18	import { applyFilters } from '@wordpress/hooks';
19	import { __ } from '@wordpress/i18n';
20
21	import ApplyFilters from '../../components/apply-filters';
22	import ColorIndicator from '../../components/color-indicator';
23	import ColorPicker from '../../components/color-picker';
24	import IconPicker from '../../components/icon-picker';
25	import RangeControl from '../../components/range-control';
26
27	/**
28	* Block Edit Class.
29	*
30	* @param {Object} props - component props.
31	*
32	* @return {JSX} component.
33	*/
34	export default function BlockEdit(props) {
35	const { attributes, setAttributes } = props;
36	let { className = '' } = props;
37
38	const { color, hoverColor, icon, iconSize, hideButton } = attributes;
39
40	const hasChildBlocks = useSelect(
41	(select) => {
42	const blockEditor = select('core/block-editor');
43
44	return blockEditor
45	? blockEditor.getBlockOrder(props.clientId).length > 0
46	: false;
47	},
48	[props.clientId]
49	);
50
51	className = classnames('ghostkit-alert', className);
52
53	className = applyFilters('ghostkit.editor.className', className, props);
54
55	const blockProps = useBlockProps({ className });
56
57	const innerBlockProps = useInnerBlocksProps(
58	{
59	className: 'ghostkit-alert-content',
60	},
61	{
62	renderAppender: hasChildBlocks
63	? undefined
64	: InnerBlocks.ButtonBlockAppender,
65	templateLock: false,
66	}
67	);
68
69	return (
70	<>
71	<BlockControls>
72	<ToolbarGroup>
73	<ToolbarDropdownMenu
74	icon="info"
75	label={__('Type', 'ghostkit')}
76	controls={[
77	{
78	title: __('Primary', 'ghostkit'),
79	icon: 'editor-help',
80	isActive: color === '#2E77C3',
81	onClick: () =>
82	setAttributes({ color: '#2E77C3' }),
83	},
84	{
85	title: __('Success', 'ghostkit'),
86	icon: 'marker',
87	isActive: color === '#22CF6E',
88	onClick: () =>
89	setAttributes({ color: '#22CF6E' }),
90	},
91	{
92	title: __('Danger', 'ghostkit'),
93	icon: 'dismiss',
94	isActive: color === '#DC3232',
95	onClick: () =>
96	setAttributes({ color: '#DC3232' }),
97	},
98	{
99	title: __('Warning', 'ghostkit'),
100	icon: 'warning',
101	isActive: color === '#E47F3B',
102	onClick: () =>
103	setAttributes({ color: '#E47F3B' }),
104	},
105	{
106	title: __('Info', 'ghostkit'),
107	icon: 'info',
108	isActive: color === '#2DC7E8',
109	onClick: () =>
110	setAttributes({ color: '#2DC7E8' }),
111	},
112	]}
113	/>
114	</ToolbarGroup>
115	</BlockControls>
116	<InspectorControls>
117	<PanelBody>
118	<IconPicker
119	label={__('Icon', 'ghostkit')}
120	value={icon}
121	onChange={(value) => setAttributes({ icon: value })}
122	insideInspector
123	/>
124	{icon ? (
125	<RangeControl
126	label={__('Icon Size', 'ghostkit')}
127	value={iconSize}
128	onChange={(value) =>
129	setAttributes({ iconSize: value })
130	}
131	min={20}
132	max={100}
133	beforeIcon="editor-textcolor"
134	afterIcon="editor-textcolor"
135	allowCustomMin
136	allowCustomMax
137	/>
138	) : null}
139	</PanelBody>
140	<PanelBody>
141	<ToggleControl
142	label={__('Dismiss button', 'ghostkit')}
143	checked={!!hideButton}
144	onChange={(val) => setAttributes({ hideButton: val })}
145	/>
146	</PanelBody>
147	<PanelBody
148	title={
149	<>
150	{__('Colors', 'ghostkit')}
151	<ColorIndicator colorValue={color} />
152	</>
153	}
154	initialOpen={false}
155	>
156	<TabPanel
157	className="ghostkit-control-tabs ghostkit-control-tabs-wide"
158	tabs={[
159	{
160	name: 'normal',
161	title: __('Normal', 'ghostkit'),
162	className: 'ghostkit-control-tabs-tab',
163	},
164	{
165	name: 'hover',
166	title: __('Hover', 'ghostkit'),
167	className: 'ghostkit-control-tabs-tab',
168	},
169	]}
170	>
171	{(tabData) => {
172	const isHover = tabData.name === 'hover';
173	return (
174	<ApplyFilters
175	name="ghostkit.editor.controls"
176	attribute={isHover ? 'hoverColor' : 'color'}
177	props={props}
178	>
179	<ColorPicker
180	label={__('Color', 'ghostkit')}
181	value={isHover ? hoverColor : color}
182	onChange={(val) =>
183	setAttributes(
184	isHover
185	? { hoverColor: val }
186	: { color: val }
187	)
188	}
189	alpha
190	/>
191	</ApplyFilters>
192	);
193	}}
194	</TabPanel>
195	</PanelBody>
196	</InspectorControls>
197	<div {...blockProps}>
198	{icon ? (
199	<div className="ghostkit-alert-icon">
200	<IconPicker.Dropdown
201	onChange={(value) => setAttributes({ icon: value })}
202	value={icon}
203	renderToggle={({ onToggle }) => (
204	<IconPicker.Preview
205	onClick={onToggle}
206	name={icon}
207	/>
208	)}
209	/>
210	</div>
211	) : null}
212	<div {...innerBlockProps} />
213	{hideButton ? (
214	<div className="ghostkit-alert-hide-button">
215	<svg
216	className="ghostkit-svg-icon"
217	width="24"
218	height="24"
219	viewBox="0 0 24 24"
220	fill="none"
221	xmlns="http://www.w3.org/2000/svg"
222	>
223	<path
224	d="M6.21967 6.21967C6.51256 5.92678 6.98744 5.92678 7.28033 6.21967L12 10.9393L16.7197 6.21967C17.0126 5.92678 17.4874 5.92678 17.7803 6.21967C18.0732 6.51256 18.0732 6.98744 17.7803 7.28033L13.0607 12L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L12 13.0607L7.28033 17.7803C6.98744 18.0732 6.51256 18.0732 6.21967 17.7803C5.92678 17.4874 5.92678 17.0126 6.21967 16.7197L10.9393 12L6.21967 7.28033C5.92678 6.98744 5.92678 6.51256 6.21967 6.21967Z"
225	fill="currentColor"
226	/>
227	</svg>
228	</div>
229	) : null}
230	</div>
231	</>
232	);
233	}
234