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

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

ghostkit / gutenberg / components / url-picker / index.js

index.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.3.2, at gutenberg/components/url-picker/index.js

175 lines 3.7 KB

Raw Download Zip

1	import {
2	__experimentalLinkControl as LinkControl,
3	BlockControls,
4	InspectorControls,
5	} from '@wordpress/block-editor';
6	import {
7	KeyboardShortcuts,
8	PanelBody,
9	Popover,
10	TextControl,
11	ToolbarButton,
12	ToolbarGroup,
13	} from '@wordpress/components';
14	import { useState } from '@wordpress/element';
15	import { __ } from '@wordpress/i18n';
16	import { displayShortcut, rawShortcut } from '@wordpress/keycodes';
17
18	const NEW_TAB_REL = 'noreferrer noopener';
19
20	/**
21	* Component Class
22	*
23	* @param props
24	*/
25	export default function URLPicker(props) {
26	const [toolbarSettingsOpened, setToolbarSettingsOpened] = useState(false);
27	const {
28	rel,
29	target,
30	url,
31	ariaLabel,
32	toolbarSettings = true,
33	inspectorSettings = true,
34	blockControlsGroup = 'block',
35	isSelected,
36	} = props;
37
38	function onChange(data) {
39	const newData = {
40	rel,
41	target,
42	url,
43	ariaLabel,
44	...data,
45	};
46
47	if (target !== newData.target) {
48	let updatedRel = newData.rel;
49
50	if (newData.target && !newData.rel) {
51	updatedRel = NEW_TAB_REL;
52	} else if (!newData.target && newData.rel === NEW_TAB_REL) {
53	updatedRel = undefined;
54	}
55
56	newData.rel = updatedRel;
57	}
58
59	props.onChange(newData);
60	}
61
62	function toggleToolbarSettings(open) {
63	setToolbarSettingsOpened(
64	typeof open !== 'undefined' ? open : !toolbarSettingsOpened
65	);
66	}
67
68	function linkControl() {
69	return (
70	<LinkControl
71	className="wp-block-navigation-link__inline-link-input"
72	value={{
73	url,
74	opensInNewTab: target === '_blank',
75	}}
76	onChange={({
77	url: newURL = '',
78	opensInNewTab: newOpensInNewTab,
79	}) => {
80	onChange({
81	url: newURL,
82	target: newOpensInNewTab ? '_blank' : '',
83	});
84	}}
85	onRemove={() => {
86	onChange({
87	url: '',
88	target: '',
89	rel: '',
90	});
91	toggleToolbarSettings(false);
92	}}
93	/>
94	);
95	}
96
97	return (
98	<>
99	{toolbarSettings ? (
100	<>
101	<BlockControls group={blockControlsGroup}>
102	<ToolbarGroup>
103	<ToolbarButton
104	name="link"
105	icon={
106	<svg
107	width="24"
108	height="24"
109	xmlns="http://www.w3.org/2000/svg"
110	viewBox="0 0 24 24"
111	role="img"
112	aria-hidden="true"
113	focusable="false"
114	>
115	<path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
116	</svg>
117	}
118	title={__('Link')}
119	shortcut={displayShortcut.primary('k')}
120	onClick={() => toggleToolbarSettings()}
121	/>
122	</ToolbarGroup>
123	</BlockControls>
124	{isSelected && (
125	<KeyboardShortcuts
126	bindGlobal
127	shortcuts={{
128	[rawShortcut.primary('k')]:
129	toggleToolbarSettings,
130	}}
131	/>
132	)}
133	{toolbarSettingsOpened ? (
134	<Popover
135	position="bottom center"
136	onClose={() => toggleToolbarSettings(false)}
137	>
138	{linkControl()}
139	</Popover>
140	) : null}
141	</>
142	) : null}
143	{inspectorSettings ? (
144	<InspectorControls>
145	<PanelBody
146	title={__('Link Settings')}
147	initialOpen={false}
148	className="ghostkit-components-url-picker-inspector"
149	>
150	{linkControl()}
151	<TextControl
152	label={__('Link Rel')}
153	value={rel \|\| ''}
154	onChange={(val) => {
155	onChange({
156	rel: val,
157	});
158	}}
159	/>
160	<TextControl
161	label={__('Accessible Label')}
162	value={ariaLabel \|\| ''}
163	onChange={(val) => {
164	onChange({
165	ariaLabel: val,
166	});
167	}}
168	/>
169	</PanelBody>
170	</InspectorControls>
171	) : null}
172	</>
173	);
174	}
175