PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / social-profiles / generalTab.js

generalTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/social-profiles/generalTab.js

518 lines 14.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from "@wordpress/i18n";
2 import {
3 Background,
4 Border,
5 BoxShadow,
6 Divider,
7 Layouts,
8 SelectField,
9 Spacing,
10 SPRangeControl,
11 SPToggleGroupControl,
12 Toggle,
13 } from "../../components";
14 import useLayouts from "../../hooks/useLayouts";
15 import { checkInArray } from "../shared/helpFn";
16 import { AlignCenter, AlignLeft, AlignRight, AlignStretch } from "../../icons/icons";
17 import { useMemo, useState } from "@wordpress/element";
18 import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon";
19 import { useSelect } from "@wordpress/data";
20 import { useDeviceType } from "../../controls/controls";
21 import ProInfo from "../../components/proInfo/proInfo";
22
23 export const SocialProfilesGeneralTab = ({ attributes, setAttributes }) => {
24 const {
25 blockName,
26 layout,
27 socialListViewEnable,
28 columns,
29 socialHorizontalGap,
30 socialVerticalGap,
31 socialHoverEffect,
32 socialAlignment,
33 uniqueId,
34 socialContentAreaBorder,
35 socialIconColor,
36 socialIconBg,
37 } = attributes;
38
39 const [columnKey, setColumnKey] = useState("");
40
41 const layoutDefault = useMemo(
42 () => ({
43 "social-profiles-layout-one": {
44 socialIconDivider: false,
45 socialLabelEnable: false,
46 socialSubTextEnable: false,
47 socialContentAreaBorder: {
48 ...socialContentAreaBorder,
49 style: "none",
50 },
51 socialIconCustomColorEnable: false,
52 socialIconBg: {
53 ...socialIconBg,
54 color: { ...socialIconBg.color, solidColor: "" },
55 },
56 socialIconColor: { ...socialIconColor, color: "#FFFFFF" },
57 },
58 "social-profiles-layout-two": {
59 socialIconDivider: false,
60 socialLabelEnable: true,
61 socialSubTextEnable: false,
62 socialContentAreaBorder: {
63 ...socialContentAreaBorder,
64 style: "none",
65 },
66 socialIconCustomColorEnable: false,
67 socialIconBg: {
68 ...socialIconBg,
69 color: { ...socialIconBg.color, solidColor: "" },
70 },
71 socialIconColor: { ...socialIconColor, color: "#FFFFFF" },
72 },
73 "social-profiles-layout-three": {
74 socialIconDivider: true,
75 socialLabelEnable: true,
76 socialSubTextEnable: true,
77 socialContentAreaBorder: {
78 ...socialContentAreaBorder,
79 style: "none",
80 },
81 socialIconCustomColorEnable: true,
82 socialIconBg: {
83 ...socialIconBg,
84 color: { ...socialIconBg.color, solidColor: "#E0E0E000" },
85 },
86 socialIconColor: { ...socialIconColor, color: "#2F343A;" },
87 },
88 "social-profiles-layout-four": {
89 socialIconDivider: false,
90 socialLabelEnable: true,
91 socialSubTextEnable: true,
92 socialContentAreaBorder: {
93 ...socialContentAreaBorder,
94 style: "solid",
95 },
96 socialIconCustomColorEnable: false,
97 socialIconBg: {
98 ...socialIconBg,
99 color: { ...socialIconBg.color, solidColor: "" },
100 },
101 socialIconColor: { ...socialIconColor, color: "#FFFFFF" },
102 },
103 "social-profiles-layout-five": {
104 socialIconDivider: false,
105 socialLabelEnable: true,
106 socialSubTextEnable: true,
107 socialContentAreaBorder: {
108 ...socialContentAreaBorder,
109 style: "solid",
110 },
111 socialIconCustomColorEnable: false,
112 socialIconBg: {
113 ...socialIconBg,
114 color: { ...socialIconBg.color, solidColor: "" },
115 },
116 socialIconColor: { ...socialIconColor, color: "#FFFFFF" },
117 },
118 }),
119 []
120 );
121
122 const layoutChangeHandler = (newValue) => {
123 if (newValue === layout) {
124 return;
125 }
126 setColumnKey(newValue);
127 const newData = {
128 layout: newValue,
129 ...layoutDefault[newValue],
130 };
131 if (checkInArray(newValue)) {
132 newData.socialLabelPosition = "bottom";
133 } else {
134 newData.socialLabelPosition = "right";
135 }
136
137 setAttributes(newData);
138 };
139 const parentClientId = uniqueId.replace("sp-social-profiles-", "");
140 const childBlocks = useSelect((select) => select("core/block-editor").getBlocks(parentClientId), [parentClientId]);
141 const deviceType = useDeviceType();
142
143 const layouts = useLayouts(blockName, layout);
144
145 return (
146 <>
147 {layouts?.length > 0 && (
148 <Layouts
149 label={__("Layouts", "post-carousel")}
150 attributes={layout}
151 attributesKey={"layout"}
152 setAttributes={setAttributes}
153 items={layouts}
154 showDemoTitle={true}
155 grid={3}
156 onChange={layoutChangeHandler}
157 displayActive={true}
158 />
159 )}
160 {/* <Toggle
161 label={ __( 'List View', 'post-carousel' ) }
162 attributes={ socialListViewEnable }
163 attributesKey={ 'socialListViewEnable' }
164 setAttributes={ setAttributes }
165 /> */}
166 <SPRangeControl
167 // key={ columnKey }
168 label={__("Columns", "post-carousel")}
169 attributes={columns}
170 attributesKey={"columns"}
171 setAttributes={setAttributes}
172 max={10}
173 min={1}
174 defaultValue={{ value: "" }}
175 pro={true}
176 />
177 {"social-profiles-layout-five" !== layout && (
178 <>
179 <SPRangeControl
180 label={__("Horizontal Gap", "post-carousel")}
181 attributes={socialHorizontalGap}
182 attributesKey={"socialHorizontalGap"}
183 setAttributes={setAttributes}
184 units={["px", "%", "em"]}
185 defaultValue={{ unit: "px", value: 24 }}
186 />
187 {childBlocks.length > columns ||
188 (columns?.device?.[deviceType] && (
189 <SPRangeControl
190 label={__("Vertical Gap", "post-carousel")}
191 attributes={socialVerticalGap}
192 attributesKey={"socialVerticalGap"}
193 setAttributes={setAttributes}
194 units={["px", "%", "em"]}
195 defaultValue={{ unit: "px", value: 24 }}
196 />
197 ))}
198 </>
199 )}
200 <SelectField
201 label={__("Hover Effect", "post-carousel")}
202 attributes={socialHoverEffect}
203 attributesKey={"socialHoverEffect"}
204 setAttributes={setAttributes}
205 items={[
206 { label: "None", value: "none" },
207 { label: "Darken", value: "darken" },
208 { label: "Lift", value: "lift" },
209 { label: "Scale", value: "scale" },
210 { label: "Lift & Scale", value: "lift-scale" },
211 { label: "Lift More", value: "lift-more" },
212 { label: "Scale More", value: "scale-more" },
213 { label: "Lift & Scale More", value: "lift-scale-more" },
214 ]}
215 pro={true}
216 />
217 {["social-profiles-layout-one", "social-profiles-layout-two"].includes(layout) && (
218 <SPToggleGroupControl
219 label={__("Alignment", "post-carousel")}
220 attributes={socialAlignment}
221 attributesKey={"socialAlignment"}
222 setAttributes={setAttributes}
223 items={[
224 { label: <AlignLeft />, value: "left" },
225 { label: <AlignCenter />, value: "center" },
226 { label: <AlignRight />, value: "right" },
227 { label: <AlignStretch />, value: "Stretch" },
228 ]}
229 />
230 )}
231 <ProInfo>
232 <span>Unlock exclusive layouts and advanced display controls.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a>
233 </ProInfo>
234 </>
235 );
236 };
237
238 export const SocialProfilesIconGeneralTab = ({ attributes, setAttributes }) => {
239 const { socialIconEnable, socialIconSize, socialIconBGSize, layout, socialIconDivider } = attributes;
240 return (
241 <>
242 {/* <Toggle
243 label={ __( 'Social Icon', 'post-carousel' ) }
244 attributes={ socialIconEnable }
245 attributesKey={ 'socialIconEnable' }
246 setAttributes={ setAttributes }
247 /> */}
248 {socialIconEnable && (
249 <>
250 <SPRangeControl
251 label={__("Icon Size", "post-carousel")}
252 attributes={socialIconSize}
253 attributesKey={"socialIconSize"}
254 setAttributes={setAttributes}
255 units={["px", "%", "em"]}
256 defaultValue={{ unit: "px", value: 18 }}
257 />
258 <SPRangeControl
259 label={__("Background Size", "post-carousel")}
260 attributes={socialIconBGSize}
261 attributesKey={"socialIconBGSize"}
262 setAttributes={setAttributes}
263 units={["px", "%", "em"]}
264 defaultValue={{ unit: "px", value: 36 }}
265 />
266 {"social-profiles-layout-three" === layout && (
267 <Toggle
268 label={__("Divider", "post-carousel")}
269 attributes={socialIconDivider}
270 attributesKey={"socialIconDivider"}
271 setAttributes={setAttributes}
272 />
273 )}
274 </>
275 )}
276 </>
277 );
278 };
279
280 export const SocialProfilesLabelGeneralTab = ({ attributes, setAttributes }) => {
281 const { socialLabelEnable, socialLabelPosition, socialLabelGap, socialSubTextEnable, socialSubTextGap, layout } =
282 attributes;
283 const textPositionOption = useMemo(() => {
284 if (!checkInArray(layout)) {
285 return [
286 { label: "Left", value: "left" },
287 { label: "Right", value: "right" },
288 ];
289 } else {
290 return [
291 { label: "Top", value: "top" },
292 { label: "Bottom", value: "bottom" },
293 ];
294 }
295 }, [layout]);
296
297 return (
298 <>
299 {/* <Toggle
300 label={ __( 'Social Label', 'post-carousel' ) }
301 attributes={ socialLabelEnable }
302 attributesKey={ 'socialLabelEnable' }
303 setAttributes={ setAttributes }
304 /> */}
305 {socialLabelEnable && (
306 <>
307 <SPToggleGroupControl
308 label={__("Label Position", "post-carousel")}
309 attributes={socialLabelPosition}
310 attributesKey={"socialLabelPosition"}
311 setAttributes={setAttributes}
312 items={textPositionOption}
313 />
314 <SPRangeControl
315 label={__("Gap", "post-carousel")}
316 attributes={socialLabelGap}
317 attributesKey={"socialLabelGap"}
318 setAttributes={setAttributes}
319 units={["px", "%", "em"]}
320 defaultValue={{ unit: "px", value: 8 }}
321 />
322 </>
323 )}
324 {/* <Toggle
325 label={ __( 'Sub Text', 'post-carousel' ) }
326 attributes={ socialSubTextEnable }
327 attributesKey={ 'socialSubTextEnable' }
328 setAttributes={ setAttributes }
329 /> */}
330 {socialSubTextEnable && layout !== "social-profiles-layout-three" && (
331 <>
332 <SPRangeControl
333 label={__("Gap Between Social Label", "post-carousel")}
334 attributes={socialSubTextGap}
335 attributesKey={"socialSubTextGap"}
336 setAttributes={setAttributes}
337 units={["px", "%", "em"]}
338 defaultValue={{ unit: "px", value: 8 }}
339 />
340 </>
341 )}
342 </>
343 );
344 };
345
346 export const SocialProfilesContentTab = ({ attributes, setAttributes }) => {
347 const {
348 socialContentAreaBG,
349 socialContentAreaBorder,
350 socialContentAreaBorderWidth,
351 socialContentAreaBorderRadius,
352 socialContentAreaBorderHover,
353 socialContentAreaBorderWidthHover,
354 socialContentAreaBorderRadiusHover,
355 socialContentAreaShadowEnable,
356 socialContentAreaShadow,
357 socialContentAreaShadowHoverEnable,
358 socialContentAreaShadowHover,
359 socialContentAreaPadding,
360 socialContentAreaMargin,
361 // socialContentAreaBgBlur,
362 } = attributes;
363 const [bgState, setBgState] = useState("color");
364
365 return (
366 <>
367 <SPToggleGroupControl
368 attributes={bgState}
369 onClick={(newValue) => setBgState(newValue)}
370 items={[
371 { label: "Normal", value: "color" },
372 { label: "Hover", value: "hover" },
373 ]}
374 />
375 <Background
376 label={__("Background Type", "post-carousel")}
377 attributes={socialContentAreaBG}
378 attributesKey={"socialContentAreaBG"}
379 setAttributes={setAttributes}
380 colorType={bgState}
381 items={[
382 {
383 label: <TransparentIcon />,
384 value: "transparent",
385 tooltip: "Transparent",
386 },
387 {
388 label: <BgIcon />,
389 value: "bgColor",
390 tooltip: "Solid",
391 },
392 {
393 label: <GradientIcon />,
394 value: "gradient",
395 tooltip: "Gradient",
396 },
397 ]}
398 />
399 {/* <SPRangeControl
400 label={ __( 'Background Blur', 'post-carousel' ) }
401 attributes={ socialContentAreaBgBlur }
402 attributesKey={ 'socialContentAreaBgBlur' }
403 setAttributes={ setAttributes }
404 units={ [ '%' ] }
405 min={ 0 }
406 max={ 100 }
407 defaultValue={ { unit: '%', value: 0 } }
408 /> */}
409 {"color" === bgState ? (
410 <>
411 <Border
412 attributes={{
413 border: socialContentAreaBorder,
414 borderWidth: socialContentAreaBorderWidth,
415 }}
416 attributesKey={{
417 border: "socialContentAreaBorder",
418 borderWidth: "socialContentAreaBorderWidth",
419 }}
420 setAttributes={setAttributes}
421 btnType={"normal"}
422 />
423 <Spacing
424 label={__("Border Radius", "post-carousel")}
425 attributes={socialContentAreaBorderRadius}
426 attributesKey={"socialContentAreaBorderRadius"}
427 setAttributes={setAttributes}
428 units={["px", "%", "em"]}
429 defaultValue={{
430 unit: "px",
431 value: { top: 0, right: 0, bottom: 0, left: 0 },
432 }}
433 indicator={"radius"}
434 />
435 <Toggle
436 label={__("Box Shadow", "post-carousel")}
437 attributes={socialContentAreaShadowEnable}
438 attributesKey={"socialContentAreaShadowEnable"}
439 setAttributes={setAttributes}
440 />
441 {socialContentAreaShadowEnable && (
442 <BoxShadow
443 attributes={socialContentAreaShadow}
444 attributesKey={"socialContentAreaShadow"}
445 setAttributes={setAttributes}
446 />
447 )}
448 </>
449 ) : (
450 <>
451 <Border
452 label={__("Border Hover", "post-carousel")}
453 attributes={{
454 border: socialContentAreaBorderHover,
455 borderWidth: socialContentAreaBorderWidthHover,
456 }}
457 attributesKey={{
458 border: "socialContentAreaBorderHover",
459 borderWidth: "socialContentAreaBorderWidthHover",
460 }}
461 setAttributes={setAttributes}
462 btnType={"normal"}
463 />
464 <Spacing
465 label={__("Border Radius Hover", "post-carousel")}
466 attributes={socialContentAreaBorderRadiusHover}
467 attributesKey={"socialContentAreaBorderRadiusHover"}
468 setAttributes={setAttributes}
469 units={["px", "%", "em"]}
470 defaultValue={{
471 unit: "px",
472 value: { top: 0, right: 0, bottom: 0, left: 0 },
473 }}
474 indicator={"radius"}
475 />
476 <Toggle
477 label={__("Box Shadow Hover", "post-carousel")}
478 attributes={socialContentAreaShadowHoverEnable}
479 attributesKey={"socialContentAreaShadowHoverEnable"}
480 setAttributes={setAttributes}
481 />
482 {socialContentAreaShadowHoverEnable && (
483 <BoxShadow
484 customLabel={__("Box Shadow Hover", "post-carousel")}
485 attributes={socialContentAreaShadowHover}
486 attributesKey={"socialContentAreaShadowHover"}
487 setAttributes={setAttributes}
488 />
489 )}
490 </>
491 )}
492 <Divider position={"sp-w-100pct bottom"} />
493 <Spacing
494 label={__("Padding", "post-carousel")}
495 attributes={socialContentAreaPadding}
496 attributesKey={"socialContentAreaPadding"}
497 setAttributes={setAttributes}
498 units={["px", "%", "em"]}
499 defaultValue={{
500 unit: "px",
501 value: { top: 0, right: 0, bottom: 0, left: 0 },
502 }}
503 />
504 <Spacing
505 label={__("Margin", "post-carousel")}
506 attributes={socialContentAreaMargin}
507 attributesKey={"socialContentAreaMargin"}
508 setAttributes={setAttributes}
509 units={["px", "%", "em"]}
510 defaultValue={{
511 unit: "px",
512 value: { top: 0, right: 0, bottom: 0, left: 0 },
513 }}
514 />
515 </>
516 );
517 };
518