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

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

ghostkit / gutenberg / extend / custom-css / custom / index.js

index.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.4.1, at gutenberg/extend/custom-css/custom/index.js

214 lines 5.0 KB

Raw Download Zip

1	import { addCompleter } from 'ace-builds/src-noconflict/ext-language_tools';
2	import classnames from 'classnames/dedupe';
3
4	import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
5	import {
6	__experimentalToolsPanelItem as ExperimentalToolsPanelItem,
7	__stableToolsPanelItem as StableToolsPanelItem,
8	BaseControl,
9	Button,
10	Dropdown,
11	} from '@wordpress/components';
12	import { useState } from '@wordpress/element';
13	import { addFilter } from '@wordpress/hooks';
14	import { __ } from '@wordpress/i18n';
15
16	import CodeEditor from '../../../components/code-editor';
17	import ResponsiveToggle from '../../../components/responsive-toggle';
18	import useResponsive from '../../../hooks/use-responsive';
19	import useStyles from '../../../hooks/use-styles';
20
21	const ToolsPanelItem = StableToolsPanelItem \|\| ExperimentalToolsPanelItem;
22
23	const placeholder = 'selector {\n\n}';
24
25	/**
26	* Autocomplete for `selector`.
27	*/
28	addCompleter({
29	getCompletions(editor, session, pos, prefix, callback) {
30	if (editor.id === 'gkt-custom-css-editor') {
31	callback(null, [
32	{
33	caption: 'selector',
34	value: 'selector',
35	meta: __('Block Selector', 'ghostkit'),
36	},
37	]);
38	}
39	},
40	identifierRegexps: [/selector/],
41	});
42
43	function CustomCSSCustomTools(props) {
44	const [defaultPlaceholder, setDefaultPlaceholder] = useState(placeholder);
45
46	const { getStyle, hasStyle, setStyles, resetStyles } = useStyles(props);
47
48	const { device, allDevices } = useResponsive();
49
50	let hasCustom = false;
51
52	['', ...Object.keys(allDevices)].forEach((thisDevice) => {
53	hasCustom = hasCustom \|\| hasStyle('custom', thisDevice);
54	});
55
56	const baseControlLabel = (
57	<>
58	{__('Custom', 'ghostkit')}
59	<ResponsiveToggle
60	checkActive={(checkMedia) => {
61	return hasStyle('custom', checkMedia);
62	}}
63	/>
64	</>
65	);
66
67	return (
68	<ToolsPanelItem
69	label={__('Custom', 'ghostkit')}
70	hasValue={() => !!hasCustom}
71	onSelect={() => {
72	if (!hasStyle('custom')) {
73	setStyles({ custom: '' });
74	}
75	}}
76	onDeselect={() => {
77	resetStyles(['custom'], true);
78	}}
79	isShownByDefault={false}
80	>
81	<BaseControl
82	id={baseControlLabel}
83	label={baseControlLabel}
84	__nextHasNoMarginBottom
85	>
86	<Dropdown
87	className="ghostkit-extension-customCSS-custom__dropdown"
88	contentClassName="ghostkit-extension-customCSS-custom__dropdown-content"
89	popoverProps={{
90	placement: 'left-start',
91	offset: 36,
92	shift: true,
93	}}
94	renderToggle={({ isOpen, onToggle }) => (
95	<Button
96	className={classnames(
97	'ghostkit-extension-customCSS-custom__dropdown-content-toggle',
98	isOpen
99	? 'ghostkit-extension-customCSS-custom__dropdown-content-toggle-active'
100	: ''
101	)}
102	onClick={() => {
103	onToggle();
104	}}
105	>
106	<span>{__('Edit CSS', 'ghostkit')}</span>
107	<CodeEditor
108	mode="css"
109	value={
110	getStyle('custom', device) \|\|
111	defaultPlaceholder
112	}
113	maxLines={7}
114	minLines={3}
115	height="200px"
116	showPrintMargin={false}
117	showGutter={false}
118	highlightActiveLine={false}
119	setOptions={{
120	enableBasicAutocompletion: false,
121	enableLiveAutocompletion: false,
122	enableSnippets: false,
123	showLineNumbers: false,
124	}}
125	/>
126	</Button>
127	)}
128	renderContent={() => (
129	<>
130	<BaseControl
131	id={baseControlLabel}
132	label={baseControlLabel}
133	__nextHasNoMarginBottom
134	/>
135	<CodeEditor
136	mode="css"
137	onChange={(value) => {
138	if (value !== placeholder) {
139	setStyles({ custom: value }, device);
140	}
141
142	// Reset placeholder.
143	if (defaultPlaceholder) {
144	setDefaultPlaceholder('');
145	}
146	}}
147	value={
148	getStyle('custom', device) \|\|
149	defaultPlaceholder
150	}
151	maxLines={20}
152	minLines={5}
153	height="300px"
154	editorProps={{
155	id: 'gkt-custom-css-editor',
156	}}
157	/>
158	<p style={{ marginBottom: 20 }} />
159	<details>
160	<summary
161	label={__(
162	'Examples to use selector',
163	'ghostkit'
164	)}
165	dangerouslySetInnerHTML={{
166	__html: __(
167	'Use %s rule to change block styles.',
168	'ghostkit'
169	).replace(
170	'%s',
171	'<code>selector</code>'
172	),
173	}}
174	/>
175	<p>{__('Example:', 'ghostkit')}</p>
176	<pre className="ghostkit-control-pre-custom-css">
177	{`selector {
178	background-color: #2F1747;
179	}
180
181	selector p {
182	color: #2F1747;
183	}`}
184	</pre>
185	</details>
186	</>
187	)}
188	/>
189	</BaseControl>
190	</ToolsPanelItem>
191	);
192	}
193
194	addFilter(
195	'ghostkit.extension.customCSS.tools',
196	'ghostkit/extension/customCSS/tools/custom',
197	(children, { props }) => {
198	const hasCustomSupport =
199	hasBlockSupport(props.name, ['ghostkit', 'customCSS', 'custom']) \|\|
200	getBlockSupport(props.name, ['ghostkit', 'customCSS']) === true;
201
202	if (!hasCustomSupport) {
203	return children;
204	}
205
206	return (
207	<>
208	{children}
209	<CustomCSSCustomTools {...props} />
210	</>
211	);
212	}
213	);
214