block.js — VK Blocks 0.53.2 | PluginProbe

PluginProbe ʕ •ᴥ•ʔ

VK Blocks / 0.53.2

VK Blocks v0.53.2

vk-blocks / src / blocks / heading / block.js

vk-blocks / src / blocks / heading Last commit date

deprecated 5 years ago block.js 5 years ago component.js 5 years ago heading-toolbar.js 5 years ago icon.svg 5 years ago schema.js 5 years ago style.css 6 years ago style.css.map 6 years ago style.scss 5 years ago

block.js

198 lines

1	/**
2	* heading block type
3	*
4	*/
5	import { schema, example } from "./schema";
6	import HeadingToolbar from "./heading-toolbar";
7	import { VKBHeading } from "./component";
8	import { Deprecated } from "./deprecated/block";
9	import { vkbBlockEditor } from "./../_helper/depModules";
10	import { FontAwesome } from "./../_helper/font-awesome-new";
11	import BlockIcon from "./icon.svg";
12
13	const { __ } = wp.i18n;
14	const { registerBlockType } = wp.blocks;
15	const { RangeControl, PanelBody, RadioControl, SelectControl, BaseControl } = wp.components;
16	const { Fragment } = wp.element;
17	const { InspectorControls, ColorPalette, BlockControls, AlignmentToolbar } = vkbBlockEditor;
18
19	registerBlockType("vk-blocks/heading", {
20
21	title: __("Heading", "vk-blocks"),
22	icon: <BlockIcon />,
23	category: "vk-blocks-cat",
24	attributes: schema,
25	supports: {
26	className: true,
27	customClassName: true,
28	anchor: true
29	},
30	example,
31
32	edit( props ) {
33	const { attributes, className, setAttributes } = props
34	const {
35	level,
36	align,
37	titleColor,
38	titleSize,
39	subTextFlag,
40	subTextColor,
41	subTextSize,
42	titleStyle,
43	titleMarginBottom,
44	outerMarginBottom,
45	fontAwesomeIconColor
46	} = attributes;
47
48	const setTitleFontSize = newLevel => {
49	setAttributes({ level: newLevel });
50
51	switch (newLevel) {
52	case 1:
53	setAttributes({ titleSize: 3.6 });
54	break;
55	case 2:
56	setAttributes({ titleSize: 2.8 });
57	break;
58	case 3:
59	setAttributes({ titleSize: 2.2 });
60	break;
61	case 4:
62	setAttributes({ titleSize: 2.0 });
63	break;
64	case 5:
65	setAttributes({ titleSize: 1.8 });
66	break;
67	case 6:
68	setAttributes({ titleSize: 1.6 });
69	break;
70	}
71	};
72	return (
73	<Fragment>
74	<BlockControls>
75	<HeadingToolbar
76	minLevel={ 2 }
77	maxLevel={ 5 }
78	selectedLevel={ level }
79	onChange={ setTitleFontSize }
80	/>
81	</BlockControls>
82	<InspectorControls>
83	<PanelBody title={ __("Style Settings", "vk-blocks") }>
84	<SelectControl
85	label={ __("Heading style", "vk-blocks") }
86	value={ titleStyle }
87	onChange={ value => setAttributes({ titleStyle: value }) }
88	options={ [
89	{ label: __("Default", "vk-blocks"), value: "default" },
90	{ label: __("Plain", "vk-blocks"), value: "plain" }
91	] }
92	/>
93	</PanelBody>
94	<PanelBody title={ __("Margin Setting", "vk-blocks") }>
95	<label>{ __("Margin bottom size of after hedding (rem)", "vk-blocks") }</label>
96	<RangeControl
97	value={ titleMarginBottom }
98	onChange={ value => {
99	setAttributes({ titleMarginBottom: value });
100	} }
101	min={ -1 }
102	max={ 3 }
103	step={ 0.1 }
104	/>
105	<label>{ __("Margin bottom size of after this block (rem)", "vk-blocks") }</label>
106	<RangeControl
107	value={ outerMarginBottom }
108	onChange={ value => {
109	setAttributes({ outerMarginBottom: value });
110	} }
111	min={ -1 }
112	max={ 8 }
113	step={ 0.1 }
114	/>
115	</PanelBody>
116	<PanelBody title={ __("Heading Settings", "vk-blocks") }>
117	<label>{ __("Level", "vk-blocks") }</label>
118	<HeadingToolbar
119	minLevel={ 1 }
120	maxLevel={ 7 }
121	selectedLevel={ level }
122	onChange={ setTitleFontSize }
123	/>
124	<p>{ __("Text Alignment") }</p>
125	<AlignmentToolbar
126	value={ align }
127	onChange={ value => {
128	setAttributes({ align: value });
129	} }
130	/>
131	<RangeControl
132	label={ __("Text size (rem)", "vk-blocks") }
133	value={ titleSize }
134	onChange={ value => {
135	setAttributes({ titleSize: value });
136	} }
137	min={ 0.5 }
138	max={ 4 }
139	step={ 0.1 }
140	/>
141	<BaseControl label={ __("Text Color", "vk-blocks") }>
142	<ColorPalette value={ titleColor } onChange={ value => setAttributes({ titleColor: value }) } />
143	</BaseControl>
144	</PanelBody>
145	<PanelBody title={ __("Font Awesome Icon Settings", "vk-blocks") }>
146	<BaseControl label={ __("Before text", "vk-blocks") }>
147	<FontAwesome attributeName={ "fontAwesomeIconBefore" } { ...props } />
148	</BaseControl>
149	<BaseControl label={ __("After text", "vk-blocks") }>
150	<FontAwesome attributeName={ "fontAwesomeIconAfter" } { ...props } />
151	</BaseControl>
152	<BaseControl label={ __("Icon Color", "vk-blocks") }>
153	<ColorPalette value={ fontAwesomeIconColor } onChange={ value => setAttributes({ fontAwesomeIconColor: value }) } />
154	</BaseControl>
155	</PanelBody>
156	<PanelBody title={ __("Sub Text Settings", "vk-blocks") }>
157	<RadioControl
158	label={ __("Position", "vk-blocks") }
159	selected={ subTextFlag }
160	options={ [
161	{ label: __("Display", "vk-blocks"), value: "on" },
162	{ label: __("Hide", "vk-blocks"), value: "off" }
163	] }
164	onChange={ value => setAttributes({ subTextFlag: value }) }
165	/>
166	<label>{ __("Text size (rem)", "vk-blocks") }</label>
167	<RangeControl
168	value={ subTextSize }
169	onChange={ value => {
170	setAttributes({ subTextSize: value });
171	} }
172	min={ 0.5 }
173	max={ 3 }
174	step={ 0.1 }
175	/>
176	<ColorPalette
177	value={ subTextColor }
178	onChange={ value => setAttributes({ subTextColor: value }) }
179	/>
180	</PanelBody>
181	</InspectorControls>
182	<div className={ className }>
183	<VKBHeading { ...props } for_={ "edit" } />
184	</div>
185	</Fragment>
186	);
187	},
188
189	save(props) {
190	return (
191	<div>
192	<VKBHeading { ...props } for_={ "save" } />
193	</div>
194	);
195	},
196	deprecated: Deprecated
197	});
198