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

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

ghostkit / gutenberg / blocks / alert / edit.js

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

233 lines 5.9 KB

Raw Download Zip

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