block.js — VK Blocks 0.22.4 | PluginProbe

PluginProbe ʕ •ᴥ•ʔ

VK Blocks / 0.22.4

VK Blocks v0.22.4

vk-blocks / src / button / block.js

vk-blocks / src / button Last commit date

.sass-cache 6 years ago deprecated 6 years ago block.js 6 years ago component.js 6 years ago style.css 6 years ago style.css.map 6 years ago style.scss 6 years ago

block.js

334 lines

1	/**
2	* Button block type
3	*
4	*/
5	import React from "react";
6	import {Component} from "./component";
7	import {deprecated} from "./deprecated/deprecated";
8
9	const {__} = wp.i18n; // Import __() from wp.i18n
10	const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
11	const {RadioControl, PanelBody, BaseControl, CheckboxControl, TextControl, Dashicon, IconButton,} = wp.components;
12	const {Fragment} = wp.element;
13	const {RichText, InspectorControls,ColorPalette, URLInput,} = wp.blockEditor && wp.blockEditor.BlockEdit ? wp.blockEditor : wp.editor;
14	const BlockIcon = (
15	<svg xmlns="http://www.w3.org/2000/svg" width="576" height="512" viewBox="0 0 576 512">
16	<g>
17	<path d="M506,185v142H70V185H506 M526.4,137H49.6C34.4,137,22,149.4,22,164.6v182.8c0,15.2,12.4,27.6,27.6,27.6h476.8
18	c15.2,0,27.6-12.4,27.6-27.6V164.6C554,149.4,541.6,137,526.4,137L526.4,137z"/>
19	</g>
20	<g>
21	<path d="M83.8,206.9h55.9c9.3,0,16.5,2.3,21.5,6.9c5,4.6,7.5,10.3,7.5,17.1c0,5.7-1.8,10.6-5.3,14.7c-2.4,2.7-5.8,4.9-10.4,6.5
22	c6.9,1.7,12.1,4.5,15.3,8.6c3.3,4.1,4.9,9.2,4.9,15.3c0,5-1.2,9.5-3.5,13.5c-2.3,4-5.5,7.2-9.6,9.5c-2.5,1.5-6.3,2.5-11.3,3.2
23	c-6.7,0.9-11.2,1.3-13.4,1.3H83.8V206.9z M113.9,244.8h13c4.7,0,7.9-0.8,9.7-2.4c1.8-1.6,2.7-3.9,2.7-7c0-2.8-0.9-5-2.7-6.6
24	c-1.8-1.6-5-2.4-9.5-2.4h-13.2V244.8z M113.9,282.8h15.2c5.1,0,8.8-0.9,10.9-2.7s3.2-4.3,3.2-7.4c0-2.9-1-5.2-3.1-6.9
25	c-2.1-1.7-5.7-2.6-11-2.6h-15.2V282.8z"/>
26	<path d="M245.9,303.5h-25.1v-11.3c-3.7,4.7-7.5,8-11.3,10c-3.8,2-8.5,3-14,3c-7.4,0-13.2-2.2-17.4-6.6c-4.2-4.4-6.3-11.2-6.3-20.4
27	v-44.6h27V272c0,4.4,0.8,7.5,2.4,9.4c1.6,1.8,3.9,2.8,6.9,2.8c3.2,0,5.8-1.2,7.9-3.7s3.1-6.9,3.1-13.3v-33.7h26.8V303.5z"/>
28	<path d="M282.4,206.9v26.6h14.8v19.7h-14.8V278c0,3,0.3,5,0.9,5.9c0.9,1.5,2.4,2.2,4.6,2.2c2,0,4.7-0.6,8.3-1.7l2,18.5
29	c-6.6,1.5-12.8,2.2-18.6,2.2c-6.7,0-11.6-0.9-14.8-2.6c-3.2-1.7-5.5-4.3-7-7.8c-1.5-3.5-2.3-9.1-2.3-17v-24.6h-9.9v-19.7h9.9v-12.9
30	L282.4,206.9z"/>
31	<path d="M330.2,206.9v26.6H345v19.7h-14.8V278c0,3,0.3,5,0.9,5.9c0.9,1.5,2.4,2.2,4.6,2.2c2,0,4.7-0.6,8.3-1.7l2,18.5
32	c-6.6,1.5-12.8,2.2-18.6,2.2c-6.7,0-11.6-0.9-14.8-2.6c-3.2-1.7-5.5-4.3-7-7.8c-1.5-3.5-2.3-9.1-2.3-17v-24.6h-9.9v-19.7h9.9v-12.9
33	L330.2,206.9z"/>
34	<path d="M339.6,268.7c0-10.7,3.6-19.5,10.8-26.4s16.9-10.4,29.2-10.4c14,0,24.6,4.1,31.8,12.2c5.8,6.6,8.6,14.6,8.6,24.2
35	c0,10.8-3.6,19.6-10.7,26.5c-7.1,6.9-17,10.3-29.6,10.3c-11.3,0-20.4-2.9-27.3-8.6C343.9,289.5,339.6,280.2,339.6,268.7z
36	M366.5,268.7c0,6.2,1.3,10.9,3.8,13.8c2.5,3,5.7,4.5,9.5,4.5c3.9,0,7-1.5,9.5-4.4c2.5-2.9,3.7-7.7,3.7-14.2
37	c0-6.1-1.3-10.6-3.8-13.6s-5.6-4.5-9.3-4.5c-3.9,0-7.1,1.5-9.7,4.5C367.8,257.9,366.5,262.5,366.5,268.7z"/>
38	<path d="M418.2,233.5h25v11.4c3.7-4.7,7.5-8,11.3-10c3.8-2,8.5-3,14-3c7.4,0,13.2,2.2,17.4,6.6c4.2,4.4,6.3,11.2,6.3,20.5v44.5h-27
39	V265c0-4.4-0.8-7.5-2.4-9.3c-1.6-1.8-3.9-2.7-6.9-2.7c-3.3,0-5.9,1.2-7.9,3.7c-2,2.5-3,6.9-3,13.3v33.6h-26.8V233.5z"/>
40	</g>
41	</svg>
42	);
43
44	/**
45	* Register: a Gutenberg Block.
46	*
47	* Registers a new block provided a unique name and an object defining its
48	* behavior. Once registered, the block is made editor as an option to any
49	* editor interface where blocks are implemented.
50	*
51	* @link https://wordpress.org/gutenberg/handbook/block-api/
52	* @param {string} name Block name.
53	* @param {Object} settings Block settings.
54	* @return {?WPBlock} The block, if it has been successfully
55	* registered; otherwise `undefined`.
56	*/
57	registerBlockType('vk-blocks/button', {
58	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
59	title: __('Button', 'vk-blocks'), // Block title.
60	icon: BlockIcon, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
61	category: 'vk-blocks-cat', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
62	attributes: {
63	content: {
64	type: 'string',
65	source: 'html',
66	selector: 'span',
67	},
68	subCaption: {
69	type: 'string',
70	default: null,
71	},
72	buttonUrl: {
73	type: 'string',
74	default: null,
75	},
76	buttonTarget: {
77	type: 'Boolean',
78	default: false,
79	},
80	buttonSize: {
81	type: 'string',
82	default: 'md',
83	},
84	buttonType: {
85	type: 'string',
86	default: '0',
87	},
88	buttonColor: {
89	type: 'string',
90	default: 'primary',
91	},
92	buttonColorCustom: {
93	type: 'string',
94	default: 'undefined',
95	},
96	buttonAlign: {
97	type: 'string',
98	default: 'left',
99	},
100	fontAwesomeIconBefore: {
101	type: 'string',
102	default: null,
103	},
104	fontAwesomeIconAfter: {
105	type: 'string',
106	default: null,
107	}
108	},
109
110	/**
111	* The edit function describes the structure of your block in the context of the editor.
112	* This represents what the editor will render when the block is used.
113	*
114	* The "edit" property must be a valid function.
115	*
116	* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
117	*/
118	edit({attributes, className, setAttributes, isSelected}) {
119	const {
120	content,
121	subCaption,
122	buttonUrl,
123	buttonTarget,
124	buttonSize,
125	buttonType,
126	buttonColor,
127	buttonColorCustom,
128	buttonAlign,
129	fontAwesomeIconBefore,
130	fontAwesomeIconAfter,
131	} = attributes;
132
133	let containerClass;
134	if (buttonColorCustom) {
135	containerClass = `vk_button vk_button-align-${buttonAlign} vk_button-color-custom`;
136	} else {
137	containerClass = `vk_button vk_button-align-${buttonAlign}`;
138	}
139
140	if (className) {
141	containerClass = `${className} vk_button vk_button-align-${buttonAlign} vk_button-color-custom`;
142	} else {
143	containerClass = `${className} vk_button vk_button-align-${buttonAlign}`;
144	}
145
146	return (
147	<Fragment>
148	<InspectorControls>
149	<PanelBody title={__('Button setting', 'vk-blocks')}>
150	<TextControl
151	label={__('Sub Caption', 'vk-blocks')}
152	value={subCaption}
153	onChange={(value) => setAttributes({subCaption: value})}
154	placeholder={'Sub Caption'}
155	/>
156	<CheckboxControl
157	label={__('Open link new tab.', 'vk-blocks')}
158	checked={buttonTarget}
159	onChange={(checked) => setAttributes({buttonTarget: checked})}
160	/>
161	<RadioControl
162	label={__('Button Size:', 'vk-blocks')}
163	selected={buttonSize}
164	options={[
165	{label: __('Large', 'vk-blocks'), value: 'lg'},
166	{label: __('normal', 'vk-blocks'), value: 'md'},
167	{label: __('Small', 'vk-blocks'), value: 'sm'},
168	]}
169	onChange={(value) => setAttributes({buttonSize: value})}
170	/>
171	<RadioControl
172	label={__('Button Position:', 'vk-blocks')}
173	selected={buttonAlign}
174	options={[
175	{label: __('Left', 'vk-blocks'), value: 'left'},
176	{label: __('Center', 'vk-blocks'), value: 'center'},
177	{label: __('Right', 'vk-blocks'), value: 'right'},
178	{label: __('Block', 'vk-blocks'), value: 'block'},
179	]}
180	onChange={(value) => setAttributes({buttonAlign: value})}
181	/>
182	<RadioControl
183	label={__('Button Style:', 'vk-blocks')}
184	selected={buttonType}
185	options={[
186	{label: __('Solid color', 'vk-blocks'), value: '0'},
187	{label: __('No background', 'vk-blocks'), value: '1'},
188	]}
189	help={__('If you select "No background", that you need to select a Custom Color.', 'vk-blocks')}
190	onChange={(value) => setAttributes({buttonType: value})}
191	/>
192	<RadioControl
193	label={__('Default Color:', 'vk-blocks')}
194	selected={buttonColor}
195	options={[
196	{label: __('Primary', 'vk-blocks'), value: 'primary'},
197	{label: __('Secondary', 'vk-blocks'), value: 'secondary'},
198	{label: __('Success', 'vk-blocks'), value: 'success'},
199	{label: __('Info', 'vk-blocks'), value: 'info'},
200	{label: __('Warning', 'vk-blocks'), value: 'warning'},
201	{label: __('Danger', 'vk-blocks'), value: 'danger'},
202	{label: __('Light', 'vk-blocks'), value: 'light'},
203	{label: __('Dark', 'vk-blocks'), value: 'dark'},
204	]}
205	onChange={(value) => setAttributes({buttonColor: value})}
206	/>
207	<BaseControl
208	label={__('Custom Color', 'vk-blocks')}
209	help={__('This custom color overrides the default color. If you want to use the default color, click the clear button.', 'vk-blocks')}
210	>
211	<ColorPalette
212	value={buttonColorCustom}
213	onChange={(value) => setAttributes({buttonColorCustom: value})}
214	/>
215	</BaseControl>
216	<BaseControl
217	label={__('Font Awesome:', 'vk-blocks')}
218	help={<a href={`https://fontawesome.com/icons?d=gallery&m=free`} target={`_blank`}>{__('Font Awesome icon list', 'vk-blocks')}</a>}
219	>
220	<TextControl
221	label={__('Before text', 'vk-blocks')}
222	help={__('Enter Font Awesome Class.This icon will appear before text. Ex) fas fa-arrow-circle-right', 'vk-blocks')}
223	value={fontAwesomeIconBefore}
224	onChange={(value) => setAttributes({fontAwesomeIconBefore: value})}
225	placeholder={'fas fa-arrow-circle-right'}
226	/>
227	<TextControl
228	label={__('After text', 'vk-blocks')}
229	help={__('Enter Font Awesome Class.This icon will appear after text. Ex) fas fa-external-link-alt', 'vk-blocks')}
230	value={fontAwesomeIconAfter}
231	onChange={(value) => setAttributes({fontAwesomeIconAfter: value})}
232	placeholder={'fas fa-external-link-alt'}
233	/>
234	</BaseControl>
235	</PanelBody>
236	</InspectorControls>
237	<div className={containerClass}>
238	<Component lbColorCustom={buttonColorCustom} lbColor={buttonColor} lbType={buttonType}
239	lbAlign={buttonAlign}
240	lbSize={buttonSize}
241	lbFontAwesomeIconBefore={fontAwesomeIconBefore}
242	lbFontAwesomeIconAfter={fontAwesomeIconAfter}
243	lbsubCaption={subCaption}
244	lbRichtext={
245	<RichText
246	tagName="span"
247	className={'vk_button_link_txt'}
248	onChange={(value) => setAttributes({content: value})}
249	value={content}
250	placeholder={__('Input text', 'vk-blocks')}
251	formattingControls={['bold', 'italic', 'strikethrough']}
252	isSelected={true}
253	/>
254	}/>
255	{isSelected && (
256	<form
257	className="block-library-button__inline-link"
258	onSubmit={(event) => event.preventDefault()}>
259	<Dashicon icon="admin-links"/>
260	<URLInput
261	value={buttonUrl}
262	onChange={(value) => setAttributes({buttonUrl: value})}
263	/>
264	<IconButton icon="editor-break" label={__('Apply', 'vk-blocks')} type="submit"/>
265	</form>
266	)}
267	</div>
268	</Fragment>
269	);
270	},
271
272	/**
273	* The save function defin className }> which the different attributes should be combined
274	* into the final markup, which is then serialized by Gutenberg into post_content.
275	*
276	* The "save" property must be specified and must be a valid function.
277	*
278	* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
279	*/
280	save({attributes, className}) {
281	const {
282	content,
283	subCaption,
284	buttonUrl,
285	buttonTarget,
286	buttonSize,
287	buttonType,
288	buttonColor,
289	buttonColorCustom,
290	buttonAlign,
291	fontAwesomeIconBefore,
292	fontAwesomeIconAfter,
293	} = attributes;
294
295	let containerClass = '';
296	if (buttonColorCustom) {
297
298	containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
299
300	} else if (!buttonColorCustom) {
301
302	containerClass = `vk_button vk_button-align-${buttonAlign}`;
303
304	}
305
306	if(className){
307	containerClass = className + ' ' + containerClass;
308	}
309
310	return (
311	<div className={containerClass}>
312
313	<Component lbColorCustom={buttonColorCustom} lbColor={buttonColor} lbType={buttonType}
314	lbAlign={buttonAlign}
315	lbSize={buttonSize}
316	lbUrl={buttonUrl}
317	lbTarget={buttonTarget}
318	lbFontAwesomeIconBefore={fontAwesomeIconBefore}
319	lbFontAwesomeIconAfter={fontAwesomeIconAfter}
320	lbsubCaption={subCaption}
321	lbRichtext={
322	<RichText.Content
323	tagName="span"
324	className={'vk_button_link_txt'}
325	value={content}
326	/>
327	}/>
328	</div>
329	);
330	},
331
332	deprecated: deprecated
333	});
334