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

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

ghostkit / gutenberg / blocks / alert / edit.js

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

237 lines 6.0 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	__next40pxDefaultSize
138	__nextHasNoMarginBottom
139	/>
140	) : null}
141	</PanelBody>
142	<PanelBody>
143	<ToggleControl
144	label={__('Dismiss button', 'ghostkit')}
145	checked={!!hideButton}
146	onChange={(val) => setAttributes({ hideButton: val })}
147	__nextHasNoMarginBottom
148	/>
149	</PanelBody>
150	<PanelBody
151	title={
152	<>
153	{__('Colors', 'ghostkit')}
154	<ColorIndicator colorValue={color} />
155	</>
156	}
157	initialOpen={false}
158	>
159	<TabPanel
160	className="ghostkit-control-tabs ghostkit-control-tabs-wide"
161	tabs={[
162	{
163	name: 'normal',
164	title: __('Normal', 'ghostkit'),
165	className: 'ghostkit-control-tabs-tab',
166	},
167	{
168	name: 'hover',
169	title: __('Hover', 'ghostkit'),
170	className: 'ghostkit-control-tabs-tab',
171	},
172	]}
173	>
174	{(tabData) => {
175	const isHover = tabData.name === 'hover';
176	return (
177	<ApplyFilters
178	name="ghostkit.editor.controls"
179	attribute={isHover ? 'hoverColor' : 'color'}
180	props={props}
181	>
182	<ColorPicker
183	label={__('Color', 'ghostkit')}
184	value={isHover ? hoverColor : color}
185	onChange={(val) =>
186	setAttributes(
187	isHover
188	? { hoverColor: val }
189	: { color: val }
190	)
191	}
192	alpha
193	/>
194	</ApplyFilters>
195	);
196	}}
197	</TabPanel>
198	</PanelBody>
199	</InspectorControls>
200	<div {...blockProps}>
201	{icon ? (
202	<div className="ghostkit-alert-icon">
203	<IconPicker.Dropdown
204	onChange={(value) => setAttributes({ icon: value })}
205	value={icon}
206	renderToggle={({ onToggle }) => (
207	<IconPicker.Preview
208	onClick={onToggle}
209	name={icon}
210	/>
211	)}
212	/>
213	</div>
214	) : null}
215	<div {...innerBlockProps} />
216	{hideButton ? (
217	<div className="ghostkit-alert-hide-button">
218	<svg
219	className="ghostkit-svg-icon"
220	width="24"
221	height="24"
222	viewBox="0 0 24 24"
223	fill="none"
224	xmlns="http://www.w3.org/2000/svg"
225	>
226	<path
227	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"
228	fill="currentColor"
229	/>
230	</svg>
231	</div>
232	) : null}
233	</div>
234	</>
235	);
236	}
237