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

post-carousel / src / blocks / smart-info-box / generalTab.js

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

3,579 lines 89.7 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { useEffect, useState, useRef } from "@wordpress/element";
3	import { ensureHttps, priceLink } from "../shared/helpFn";
4	import {
5	Layouts,
6	Background,
7	Border,
8	Spacing,
9	Toggle,
10	BoxShadow,
11	SPRangeControl,
12	SelectField,
13	SpColorPicker,
14	TypographyNew,
15	InputControl,
16	MediaPicker,
17	Divider,
18	} from "../../components";
19	import SPToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl";
20	import { AlignCenter, AlignLeft, AlignRight } from "../../icons/icons";
21	import { LayoutOne, LayoutTwo, LayoutThree, LayoutFour, LayoutFive } from "./icons";
22	import { BgIcon, GradientIcon, Image, TransparentIcon } from "../../components/background/svgIcon";
23	import useDefaultValue from "../../hooks/useDefaultValue";
24	import IconsLibrary from "../../components/iconLibrary/iconLibrary";
25	import ProInfo from "../../components/proInfo/proInfo";
26
27	export const InfoBoxGeneralTab = ({ attributes, setAttributes }) => {
28	const { infoBoxLayout, contentAlignment, separatorMargin, titleMargin, caMargin, iconPositionLayoutFive } =
29	attributes;
30	const layoutNameRef = useRef(infoBoxLayout);
31
32	const layoutChange = (newValue) => {
33	if (newValue === infoBoxLayout) {
34	return;
35	}
36	setAttributes({ infoBoxLayout: newValue });
37
38	if (newValue === "smart-info-box-layout-five" && iconPositionLayoutFive === "top-content") {
39	setAttributes({
40	titleMargin: {
41	...titleMargin,
42	device: {
43	...titleMargin.device,
44	Desktop: {
45	...titleMargin.device.Desktop,
46	top: 25,
47	},
48	},
49	},
50	});
51	}
52
53	if (newValue === "smart-info-box-layout-five" && iconPositionLayoutFive === "bottom-content") {
54	setAttributes({
55	caMargin: {
56	...caMargin,
57	device: {
58	...caMargin.device,
59	Desktop: {
60	...caMargin.device.Desktop,
61	bottom: 25,
62	},
63	},
64	},
65	});
66	}
67
68	if (newValue !== "smart-info-box-layout-five") {
69	setAttributes({
70	titleMargin: {
71	...titleMargin,
72	device: {
73	...titleMargin.device,
74	Desktop: {
75	...titleMargin.device.Desktop,
76	bottom: 8,
77	top: 0,
78	},
79	},
80	},
81	});
82	setAttributes({
83	caMargin: {
84	...caMargin,
85	device: {
86	...caMargin.device,
87	Desktop: {
88	...caMargin.device.Desktop,
89	bottom: 0,
90	},
91	},
92	},
93	});
94	}
95	};
96
97	useEffect(() => {
98	if (layoutNameRef.current === infoBoxLayout) {
99	return;
100	}
101	layoutNameRef.current = infoBoxLayout;
102	if (infoBoxLayout === "smart-info-box-layout-one" \|\| infoBoxLayout === "smart-info-box-layout-five") {
103	setAttributes({ contentAlignment: "center" });
104	}
105	if (
106	infoBoxLayout === "smart-info-box-layout-two" \|\|
107	infoBoxLayout === "smart-info-box-layout-three" \|\|
108	infoBoxLayout === "smart-info-box-layout-four"
109	) {
110	setAttributes({ contentAlignment: "left" });
111	}
112	}, [infoBoxLayout]);
113
114	return (
115	<>
116	<div className="info-box-layouts">
117	<Layouts
118	attributes={infoBoxLayout}
119	setAttributes={setAttributes}
120	attributesKey={"infoBoxLayout"}
121	displayActive={true}
122	grid={3}
123	onChange={layoutChange}
124	showDemoTitle={true}
125	label={__("Info Box Layout", "post-carousel")}
126	items={[
127	{
128	icon: <LayoutOne value={infoBoxLayout} />,
129	value: "smart-info-box-layout-one",
130	},
131	{
132	icon: <LayoutTwo value={infoBoxLayout} />,
133	value: "smart-info-box-layout-two",
134	type: "pro",
135	demoLink: priceLink
136	},
137	{
138	icon: <LayoutThree value={infoBoxLayout} />,
139	value: "smart-info-box-layout-three",
140	type: "pro",
141	demoLink: priceLink
142	},
143	{
144	icon: <LayoutFour value={infoBoxLayout} />,
145	value: "smart-info-box-layout-four",
146	type: "pro",
147	demoLink: priceLink
148	},
149	{
150	icon: <LayoutFive value={infoBoxLayout} />,
151	value: "smart-info-box-layout-five",
152	type: "pro",
153	demoLink: priceLink
154	},
155	]}
156	/>
157	</div>
158
159	<SPToggleGroupControl
160	label={__("Content Alignment", "post-carousel")}
161	attributes={contentAlignment}
162	attributesKey={"contentAlignment"}
163	setAttributes={setAttributes}
164	items={[
165	{ label: <AlignLeft />, value: "left" },
166	{ label: <AlignCenter />, value: "center" },
167	{ label: <AlignRight />, value: "right" },
168	]}
169	/>
170	<ProInfo>
171	<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>
172	</ProInfo>
173	</>
174	);
175	};
176
177	export const InfoBoxStyleTab = ({ attributes, setAttributes }) => {
178	const {
179	infoBoxBg,
180	borderStyle,
181	borderStyleWidth,
182	borderRadius,
183	boxShadowEnable,
184	boxShadow,
185	borderHoverStyle,
186	borderHoverStyleWidth,
187	borderHoverRadius,
188	boxShadowHoverEnable,
189	boxShadowHover,
190	margin,
191	padding,
192	infoBoxBgImage,
193	imageScale,
194	imageOverlayColor,
195	imageOverlayOpacity,
196	infoBoxRadialShape,
197	infoBoxRadialPosition,
198	infoBoxHoverBgImage,
199	infoBoxHoverRadialShape,
200	infoBoxHoverRadialPosition,
201	imageHoverScale,
202	imageHoverOverlayOpacity,
203	infoBoxStyleType,
204	imageOverlayEnable,
205	imageOverlayHoverEnable,
206	} = attributes;
207
208	return (
209	<>
210	<SPToggleGroupControl
211	attributes={infoBoxStyleType}
212	items={[
213	{
214	label: __("Normal", "post-carousel"),
215	value: "color",
216	},
217	{
218	label: __("Hover", "post-carousel"),
219	value: "hover",
220	},
221	]}
222	onClick={(val) => setAttributes({ infoBoxStyleType: val })}
223	/>
224
225	{infoBoxStyleType === "color" && (
226	<>
227	<Background
228	label={__("Background Type", "post-carousel")}
229	colorLabel="Solid Color"
230	defaultColor="#E9F4FF"
231	attributes={infoBoxBg}
232	attributesKey={"infoBoxBg"}
233	setAttributes={setAttributes}
234	colorType={infoBoxStyleType}
235	enableImageSize={true}
236	items={[
237	{
238	label: <TransparentIcon />,
239	value: "transparent",
240	tooltip: __("Transparent", "post-carousel"),
241	},
242	{
243	label: <BgIcon />,
244	value: "bgColor",
245	tooltip: __("Solid", "post-carousel"),
246	},
247	{
248	label: <GradientIcon />,
249	value: "gradient",
250	tooltip: __("Gradient", "post-carousel"),
251	},
252	{
253	label: <Image />,
254	value: "image",
255	tooltip: __("Image", "post-carousel"),
256	},
257	]}
258	imageObj={{
259	imageKey: "infoBoxBgImage",
260	backgroundImage: infoBoxBgImage,
261	}}
262	/>
263
264	{infoBoxBg[infoBoxStyleType]?.style === "gradient" && (
265	<>
266	{/^radial-gradient/.test(infoBoxBg[infoBoxStyleType]?.gradient) && (
267	<>
268	<SelectField
269	attributes={infoBoxRadialShape}
270	attributesKey={"infoBoxRadialShape"}
271	setAttributes={setAttributes}
272	items={[
273	{
274	label: __("Circle", "post-carousel"),
275	value: "circle",
276	},
277	{
278	label: __("Ellipse", "post-carousel"),
279	value: "ellipse",
280	},
281	]}
282	/>
283	<SelectField
284	attributes={infoBoxRadialPosition}
285	attributesKey={"infoBoxRadialPosition"}
286	setAttributes={setAttributes}
287	items={[
288	{
289	label: __("Center Center", "post-carousel"),
290	value: "center center",
291	},
292	{
293	label: __("Center Left", "post-carousel"),
294	value: "center left",
295	},
296	{
297	label: __("Center Right", "post-carousel"),
298	value: "center right",
299	},
300	{
301	label: __("Top Center", "post-carousel"),
302	value: "top center",
303	},
304	{
305	label: __("Top Left", "post-carousel"),
306	value: "top left",
307	},
308	{
309	label: __("Top Right", "post-carousel"),
310	value: "top right",
311	},
312	{
313	label: __("Bottom Center", "post-carousel"),
314	value: "bottom center",
315	},
316	{
317	label: __("Bottom Left", "post-carousel"),
318	value: "bottom left",
319	},
320	{
321	label: __("Bottom Right", "post-carousel"),
322	value: "bottom right",
323	},
324	]}
325	/>
326	</>
327	)}
328	</>
329	)}
330
331	{infoBoxBg[infoBoxStyleType]?.style === "image" && (
332	<>
333	<SPToggleGroupControl
334	label={__("Image Scale", "post-carousel")}
335	attributes={imageScale}
336	attributesKey={"imageScale"}
337	setAttributes={setAttributes}
338	items={[
339	{
340	label: __("None", "post-carousel"),
341	value: "auto",
342	},
343	{
344	label: __("Cover", "post-carousel"),
345	value: "cover",
346	},
347	{
348	label: __("Contain", "post-carousel"),
349	value: "contain",
350	},
351	]}
352	/>
353
354	<Toggle
355	label={__("Overlay", "post-carousel")}
356	attributes={imageOverlayEnable}
357	attributesKey={"imageOverlayEnable"}
358	setAttributes={setAttributes}
359	/>
360
361	{imageOverlayEnable && (
362	<>
363	<SpColorPicker
364	label={__("Overlay Color", "post-carousel")}
365	value={imageOverlayColor.color}
366	onChange={(newColor) =>
367	setAttributes({
368	imageOverlayColor: {
369	...imageOverlayColor,
370	color: newColor,
371	},
372	})
373	}
374	defaultColor="#fff"
375	/>
376
377	<SPRangeControl
378	label={__("Overlay Opacity", "post-carousel")}
379	attributes={imageOverlayOpacity}
380	attributesKey={"imageOverlayOpacity"}
381	setAttributes={setAttributes}
382	max={1}
383	step={0.1}
384	/>
385	</>
386	)}
387	</>
388	)}
389	<Border
390	attributes={{
391	border: borderStyle,
392	borderWidth: borderStyleWidth,
393	}}
394	setAttributes={setAttributes}
395	attributesKey={{
396	border: "borderStyle",
397	borderWidth: "borderStyleWidth",
398	}}
399	btnType="normal"
400	/>
401	<Spacing
402	label={__("Border Radius", "post-carousel")}
403	attributes={borderRadius}
404	attributesKey={"borderRadius"}
405	setAttributes={setAttributes}
406	units={["Px", "%", "em"]}
407	defaultValue={{
408	unit: "px",
409	value: {
410	top: "0",
411	right: "0",
412	bottom: "0",
413	left: "0",
414	},
415	}}
416	indicator={"radius"}
417	/>
418
419	<Toggle
420	label={__("Box Shadow", "post-carousel")}
421	attributes={boxShadowEnable}
422	attributesKey={"boxShadowEnable"}
423	setAttributes={setAttributes}
424	/>
425	{boxShadowEnable && (
426	<BoxShadow
427	label={__("Box Shadow", "post-carousel")}
428	attributes={boxShadow}
429	attributesKey={"boxShadow"}
430	setAttributes={setAttributes}
431	/>
432	)}
433	</>
434	)}
435	{infoBoxStyleType === "hover" && (
436	<>
437	<Background
438	label={__("Background Type", "post-carousel")}
439	colorLabel="Solid Color"
440	defaultColor="#E9F4FF"
441	attributes={infoBoxBg}
442	attributesKey={"infoBoxBg"}
443	setAttributes={setAttributes}
444	colorType={infoBoxStyleType}
445	enableImageSize={true}
446	items={[
447	{
448	label: <TransparentIcon />,
449	value: "transparent",
450	tooltip: __("Transparent", "post-carousel"),
451	},
452	{
453	label: <BgIcon />,
454	value: "bgColor",
455	tooltip: __("Solid", "post-carousel"),
456	},
457	{
458	label: <GradientIcon />,
459	value: "gradient",
460	tooltip: __("Gradient", "post-carousel"),
461	},
462	{
463	label: <Image />,
464	value: "image",
465	tooltip: __("Image", "post-carousel"),
466	},
467	]}
468	imageObj={{
469	imageKey: "infoBoxHoverBgImage",
470	backgroundImage: infoBoxHoverBgImage,
471	}}
472	/>
473
474	{infoBoxBg[infoBoxStyleType]?.style === "gradient" && (
475	<>
476	{/^radial-gradient/.test(infoBoxBg[infoBoxStyleType]?.gradient) && (
477	<>
478	<SelectField
479	attributes={infoBoxHoverRadialShape}
480	attributesKey={"infoBoxHoverRadialShape"}
481	setAttributes={setAttributes}
482	items={[
483	{
484	label: __("Circle", "post-carousel"),
485	value: "circle",
486	},
487	{
488	label: __("Ellipse", "post-carousel"),
489	value: "ellipse",
490	},
491	]}
492	/>
493	<SelectField
494	attributes={infoBoxHoverRadialPosition}
495	attributesKey={"infoBoxHoverRadialPosition"}
496	setAttributes={setAttributes}
497	items={[
498	{
499	label: __("Center Center", "post-carousel"),
500	value: "center center",
501	},
502	{
503	label: __("Center Left", "post-carousel"),
504	value: "center left",
505	},
506	{
507	label: __("Center Right", "post-carousel"),
508	value: "center right",
509	},
510	{
511	label: __("Top Center", "post-carousel"),
512	value: "top center",
513	},
514	{
515	label: __("Top Left", "post-carousel"),
516	value: "top left",
517	},
518	{
519	label: __("Top Right", "post-carousel"),
520	value: "top right",
521	},
522	{
523	label: __("Bottom Center", "post-carousel"),
524	value: "bottom center",
525	},
526	{
527	label: __("Bottom Left", "post-carousel"),
528	value: "bottom left",
529	},
530	{
531	label: __("Bottom Right", "post-carousel"),
532	value: "bottom right",
533	},
534	]}
535	/>
536	</>
537	)}
538	</>
539	)}
540
541	{infoBoxBg[infoBoxStyleType]?.style === "image" && (
542	<>
543	<SPToggleGroupControl
544	label={__("Image Scale", "post-carousel")}
545	attributes={imageHoverScale}
546	attributesKey={"imageHoverScale"}
547	setAttributes={setAttributes}
548	items={[
549	{
550	label: __("None", "post-carousel"),
551	value: "auto",
552	},
553	{
554	label: __("Cover", "post-carousel"),
555	value: "cover",
556	},
557	{
558	label: __("Contain", "post-carousel"),
559	value: "contain",
560	},
561	]}
562	/>
563	<Toggle
564	label={__("Overlay", "post-carousel")}
565	attributes={imageOverlayHoverEnable}
566	attributesKey={"imageOverlayHoverEnable"}
567	setAttributes={setAttributes}
568	/>
569	{imageOverlayHoverEnable && (
570	<>
571	<SpColorPicker
572	label={__("Overlay Color", "post-carousel")}
573	value={imageOverlayColor.hoverColor}
574	onChange={(newColor) =>
575	setAttributes({
576	imageOverlayColor: {
577	...imageOverlayColor,
578	hoverColor: newColor,
579	},
580	})
581	}
582	defaultColor="#fff"
583	/>
584
585	<SPRangeControl
586	label={__("Overlay Opacity", "post-carousel")}
587	attributes={imageHoverOverlayOpacity}
588	attributesKey={"imageHoverOverlayOpacity"}
589	setAttributes={setAttributes}
590	max={1}
591	step={0.1}
592	/>
593	</>
594	)}
595	</>
596	)}
597	<Border
598	attributes={{
599	border: borderHoverStyle,
600	borderWidth: borderHoverStyleWidth,
601	}}
602	setAttributes={setAttributes}
603	attributesKey={{
604	border: "borderHoverStyle",
605	borderWidth: "borderHoverStyleWidth",
606	}}
607	btnType="normal"
608	/>
609	<Spacing
610	label={__("Border Radius", "post-carousel")}
611	attributes={borderHoverRadius}
612	attributesKey={"borderHoverRadius"}
613	setAttributes={setAttributes}
614	units={["Px", "%", "em"]}
615	defaultValue={{
616	unit: "px",
617	value: {
618	top: "0",
619	right: "0",
620	bottom: "0",
621	left: "0",
622	},
623	}}
624	indicator={"radius"}
625	/>
626	<Toggle
627	label={__("Box Shadow", "post-carousel")}
628	attributes={boxShadowHoverEnable}
629	attributesKey={"boxShadowHoverEnable"}
630	setAttributes={setAttributes}
631	/>
632	{boxShadowHoverEnable && (
633	<BoxShadow
634	label={__("Box Shadow", "post-carousel")}
635	attributes={boxShadowHover}
636	attributesKey={"boxShadowHover"}
637	setAttributes={setAttributes}
638	/>
639	)}
640	</>
641	)}
642
643	<Spacing
644	label={__("Padding", "post-carousel")}
645	attributes={padding}
646	attributesKey={"padding"}
647	setAttributes={setAttributes}
648	units={["Px", "%", "em"]}
649	defaultValue={{
650	unit: "px",
651	value: {
652	top: "32",
653	right: "24",
654	bottom: "32",
655	left: "24",
656	},
657	}}
658	/>
659	<Spacing
660	label={__("Margin", "post-carousel")}
661	attributes={margin}
662	attributesKey={"margin"}
663	setAttributes={setAttributes}
664	units={["Px", "%", "em"]}
665	defaultValue={{
666	unit: "px",
667	value: {
668	top: "0",
669	right: "0",
670	bottom: "0",
671	left: "0",
672	},
673	}}
674	/>
675	</>
676	);
677	};
678
679	export const IconImageGeneralTab = ({ attributes, setAttributes }) => {
680	const {
681	iconEnable,
682	iconSize,
683	iconPosition,
684	iconSource,
685	iconSourceCustom,
686	iconCustomWidth,
687	iconCustomHeight,
688	infoBoxLayout,
689	verticalAlignment,
690	iconName,
691	iconPositionLayoutFive,
692	iconHorizontalAlignment,
693	iconVerticalAlignment,
694	separatorMargin,
695	caMargin,
696	titleMargin,
697	iconMargin,
698	} = attributes;
699
700	const iconPositionOptions = {
701	"smart-info-box-layout-one": [
702	{ label: __("Above Title", "post-carousel"), value: "above-title" },
703	{ label: __("Below Title", "post-carousel"), value: "below-title" },
704	{ label: __("Bottom of Content", "post-carousel"), value: "bottom-content" },
705	],
706	"smart-info-box-layout-two": [
707	{ label: __("Select Position", "post-carousel"), value: null },
708	{ label: __("Left of Title", "post-carousel"), value: "left-title" },
709	{ label: __("Right of Title", "post-carousel"), value: "right-title" },
710	],
711	"smart-info-box-layout-three": [
712	{ label: __("Select Position", "post-carousel"), value: null },
713	{ label: __("Left of Content", "post-carousel"), value: "left-content" },
714	{ label: __("Right of Content", "post-carousel"), value: "right-content" },
715	],
716	};
717
718	const handleIconPositionLayoutFive = (position) => {
719	setAttributes({ iconPositionLayoutFive: position });
720
721	if (position === "top-content") {
722	setAttributes({
723	titleMargin: {
724	...titleMargin,
725	device: {
726	...titleMargin.device,
727	Desktop: {
728	...titleMargin.device.Desktop,
729	top: 25,
730	},
731	},
732	},
733	});
734	} else {
735	setAttributes({
736	titleMargin: {
737	...titleMargin,
738	device: {
739	...titleMargin.device,
740	Desktop: {
741	...titleMargin.device.Desktop,
742	top: 8,
743	},
744	},
745	},
746	});
747	}
748
749	if (position === "bottom-content") {
750	setAttributes({
751	caMargin: {
752	...caMargin,
753	device: {
754	...caMargin.device,
755	Desktop: {
756	...caMargin.device.Desktop,
757	bottom: 25,
758	},
759	},
760	},
761	});
762
763	setAttributes({
764	separatorMargin: {
765	...separatorMargin,
766	device: {
767	...separatorMargin.device,
768	Desktop: {
769	...separatorMargin.device.Desktop,
770	top: 8,
771	},
772	},
773	},
774	});
775	} else {
776	setAttributes({
777	caMargin: {
778	...caMargin,
779	device: {
780	...caMargin.device,
781	Desktop: {
782	...caMargin.device.Desktop,
783	bottom: 0,
784	},
785	},
786	},
787	});
788	}
789	};
790
791	const handleIconPositionChange = (val) => {
792	setAttributes({ iconPosition: val });
793
794	if (val === "bottom-content") {
795	setAttributes({
796	iconMargin: {
797	...iconMargin,
798	device: {
799	...iconMargin.device,
800	Desktop: {
801	...iconMargin.device.Desktop,
802	top: "24",
803	bottom: "0",
804	},
805	},
806	},
807	});
808	} else {
809	setAttributes({
810	iconMargin: {
811	...iconMargin,
812	device: {
813	...iconMargin.device,
814	Desktop: {
815	...iconMargin.device.Desktop,
816	top: "0",
817	bottom: "24",
818	},
819	},
820	},
821	});
822	}
823	};
824
825	return (
826	<>
827	<Toggle
828	label={__("Icon", "post-carousel")}
829	attributes={iconEnable}
830	attributesKey={"iconEnable"}
831	setAttributes={setAttributes}
832	/>
833	{iconEnable && (
834	<>
835	<SPToggleGroupControl
836	label={__("Icon Source", "post-carousel")}
837	attributes={iconSource}
838	attributesKey={"iconSource"}
839	setAttributes={setAttributes}
840	items={[
841	{
842	label: __("Library", "post-carousel"),
843	value: "library",
844	},
845	{
846	label: __("Custom (Pro)", "post-carousel"),
847	value: "custom",
848	disabled: true,
849	},
850	]}
851	/>
852	{iconSource === "library" && (
853	<>
854	<IconsLibrary
855	attributes={iconName}
856	attributesKey={"iconName"}
857	setAttributes={setAttributes}
858	/>
859
860	<SPRangeControl
861	label={__("Icon Size", "post-carousel")}
862	attributes={iconSize}
863	attributesKey={"iconSize"}
864	setAttributes={setAttributes}
865	units={["px", "%", "em"]}
866	defaultValue={{ unit: "px", value: 32 }}
867	max={500}
868	/>
869	</>
870	)}
871
872	{iconSource === "custom" && (
873	<>
874	<MediaPicker
875	label={__("Icon/Image Source", "post-carousel")}
876	imageKey="iconSourceCustom"
877	enableImageSize={false}
878	setAttributes={setAttributes}
879	backgroundImage={iconSourceCustom}
880	/>
881
882	<SPRangeControl
883	label={__("Width", "post-carousel")}
884	attributes={iconCustomWidth}
885	attributesKey={"iconCustomWidth"}
886	setAttributes={setAttributes}
887	units={["px", "em"]}
888	defaultValue={{ unit: "px", value: 16 }}
889	/>
890
891	<SPRangeControl
892	label={__("Height", "post-carousel")}
893	attributes={iconCustomHeight}
894	attributesKey={"iconCustomHeight"}
895	setAttributes={setAttributes}
896	units={["px", "em"]}
897	defaultValue={{ unit: "px", value: 16 }}
898	/>
899	</>
900	)}
901	{["smart-info-box-layout-one", "smart-info-box-layout-two", "smart-info-box-layout-three"].includes(
902	infoBoxLayout
903	) && (
904	<SelectField
905	label={__("Icon Position", "post-carousel")}
906	attributes={iconPosition}
907	attributesKey={"iconPosition"}
908	setAttributes={setAttributes}
909	items={iconPositionOptions[infoBoxLayout] \|\| []}
910	onChange={handleIconPositionChange}
911	/>
912	)}
913	{infoBoxLayout === "smart-info-box-layout-five" && (
914	<>
915	<SelectField
916	label={__("Icon Position", "post-carousel")}
917	attributes={iconPositionLayoutFive}
918	attributesKey={"iconPositionLayoutFive"}
919	setAttributes={setAttributes}
920	onChange={handleIconPositionLayoutFive}
921	items={[
922	{
923	label: __("Top of Content", "post-carousel"),
924	value: "top-content",
925	},
926	{
927	label: __("Bottom of Content", "post-carousel"),
928	value: "bottom-content",
929	},
930	{
931	label: __("Left of Content", "post-carousel"),
932	value: "left-content",
933	},
934	{
935	label: __("Right of Content", "post-carousel"),
936	value: "right-content",
937	},
938	]}
939	/>
940
941	{["top-content", "bottom-content"].includes(iconPositionLayoutFive) && (
942	<SPToggleGroupControl
943	label={__("Horizontal Alignment", "post-carousel")}
944	attributes={iconHorizontalAlignment}
945	attributesKey={"iconHorizontalAlignment"}
946	setAttributes={setAttributes}
947	items={[
948	{
949	label: __("Left", "post-carousel"),
950	value: "left",
951	},
952	{
953	label: __("Center", "post-carousel"),
954	value: "center",
955	},
956	{
957	label: __("Right", "post-carousel"),
958	value: "right",
959	},
960	]}
961	/>
962	)}
963	{["left-content", "right-content"].includes(iconPositionLayoutFive) && (
964	<SPToggleGroupControl
965	label={__("Vertical Alignment", "post-carousel")}
966	attributes={iconVerticalAlignment}
967	attributesKey={"iconVerticalAlignment"}
968	setAttributes={setAttributes}
969	items={[
970	{
971	label: __("Top", "post-carousel"),
972	value: "top",
973	},
974	{
975	label: __("Middle", "post-carousel"),
976	value: "center",
977	},
978	{
979	label: __("Bottom", "post-carousel"),
980	value: "bottom",
981	},
982	]}
983	/>
984	)}
985	</>
986	)}
987	{infoBoxLayout === "smart-info-box-layout-three" && (
988	<SPToggleGroupControl
989	label={__("Vertical Alignment", "post-carousel")}
990	attributes={verticalAlignment}
991	attributesKey={"verticalAlignment"}
992	setAttributes={setAttributes}
993	items={[
994	{
995	label: __("Top", "post-carousel"),
996	value: "flex-start",
997	},
998	{
999	label: __("Middle", "post-carousel"),
1000	value: "center",
1001	},
1002	{
1003	label: __("Bottom", "post-carousel"),
1004	value: "flex-end",
1005	},
1006	]}
1007	/>
1008	)}
1009	</>
1010	)}
1011	</>
1012	);
1013	};
1014	export const IconImageStyleTab = ({ attributes, setAttributes }) => {
1015	const {
1016	iconHoverEffects,
1017	iconBorderStyle,
1018	iconBorderHoverStyle,
1019	iconBorderStyleWidth,
1020	iconBorderStyleHoverWidth,
1021	iconBorderRadius,
1022	iconBoxShadowEnable,
1023	iconBoxShadow,
1024	iconBorderHoverRadius,
1025	iconBoxShadowHoverEnable,
1026	iconBoxShadowHover,
1027	iconMargin,
1028	iconPadding,
1029	iconColor,
1030	iconOverlayColor,
1031	iconOverlayEnable,
1032	iconBg,
1033	iconOverlayOpacity,
1034	iconRadialShape,
1035	iconRadialPosition,
1036	iconHoverRadialPosition,
1037	iconHoverRadialShape,
1038	iconSource,
1039	iconEnable,
1040	infoBoxLayout,
1041	gapBetweenDescription,
1042	iconHoverEffectOpacity,
1043	} = attributes;
1044
1045	const [iconStyleType, setIconStyleType] = useState("color");
1046
1047	return (
1048	<>
1049	{iconEnable && (
1050	<>
1051	<SelectField
1052	label={__("Hover Effects", "post-carousel")}
1053	attributes={iconHoverEffects}
1054	attributesKey={"iconHoverEffects"}
1055	setAttributes={setAttributes}
1056	items={[
1057	{
1058	label: __("Normal", "post-carousel"),
1059	value: "normal",
1060	},
1061	{
1062	label: __("Zoom In", "post-carousel"),
1063	value: "zoom-in",
1064	},
1065	{
1066	label: __("Zoom Out", "post-carousel"),
1067	value: "zoom-out",
1068	},
1069	{
1070	label: __("Slide Left", "post-carousel"),
1071	value: "slide-left",
1072	},
1073	{
1074	label: __("Slide Right", "post-carousel"),
1075	value: "slide-right",
1076	},
1077	{
1078	label: __("Opacity", "post-carousel"),
1079	value: "opacity",
1080	},
1081	]}
1082	/>
1083	{iconHoverEffects === "opacity" && (
1084	<SPRangeControl
1085	label={__("Opacity", "post-carousel")}
1086	attributes={iconHoverEffectOpacity}
1087	attributesKey={"iconHoverEffectOpacity"}
1088	setAttributes={setAttributes}
1089	max={1}
1090	step={0.1}
1091	/>
1092	)}
1093	</>
1094	)}
1095
1096	{iconEnable && iconSource === "custom" && (
1097	<>
1098	<Toggle
1099	label={__("Icon/Image Overlay", "post-carousel")}
1100	attributes={iconOverlayEnable}
1101	attributesKey={"iconOverlayEnable"}
1102	setAttributes={setAttributes}
1103	/>
1104	{iconOverlayEnable && (
1105	<>
1106	<SpColorPicker
1107	label={__("Overlay Color", "post-carousel")}
1108	value={iconOverlayColor}
1109	onChange={(newColor) =>
1110	setAttributes({
1111	iconOverlayColor: newColor,
1112	})
1113	}
1114	defaultColor="#333333"
1115	/>
1116
1117	<SPRangeControl
1118	label={__("Overlay Opacity", "post-carousel")}
1119	attributes={iconOverlayOpacity}
1120	attributesKey={"iconOverlayOpacity"}
1121	setAttributes={setAttributes}
1122	max={1}
1123	step={0.1}
1124	/>
1125	</>
1126	)}
1127	</>
1128	)}
1129
1130	{iconEnable && (
1131	<>
1132	<SPToggleGroupControl
1133	attributes={iconStyleType}
1134	items={[
1135	{
1136	label: __("Normal", "post-carousel"),
1137	value: "color",
1138	},
1139	{
1140	label: __("Hover", "post-carousel"),
1141	value: "hover",
1142	},
1143	]}
1144	onClick={(val) => setIconStyleType(val)}
1145	/>
1146
1147	{iconStyleType === "color" && (
1148	<>
1149	{iconSource === "library" && (
1150	<SpColorPicker
1151	label={__("Icon Color", "post-carousel")}
1152	value={iconColor.color}
1153	onChange={(newColor) =>
1154	setAttributes({
1155	iconColor: {
1156	...iconColor,
1157	color: newColor,
1158	},
1159	})
1160	}
1161	defaultColor="#fff"
1162	/>
1163	)}
1164
1165	<Background
1166	label={__("Background Type", "post-carousel")}
1167	colorLabel="Solid Color"
1168	defaultColor="#2F2F2F"
1169	attributes={iconBg}
1170	attributesKey={"iconBg"}
1171	setAttributes={setAttributes}
1172	colorType={iconStyleType}
1173	items={[
1174	{
1175	label: <BgIcon />,
1176	value: "bgColor",
1177	tooltip: __("Solid", "post-carousel"),
1178	},
1179	{
1180	label: <GradientIcon />,
1181	value: "gradient",
1182	tooltip: __("Gradient", "post-carousel"),
1183	},
1184	]}
1185	/>
1186	{/* {iconBg[iconStyleType]?.style === "gradient" && (
1187	<>
1188	{/^radial-gradient/.test(iconBg[iconStyleType]?.gradient) && (
1189	<>
1190	<SelectField
1191	attributes={iconRadialShape}
1192	attributesKey={"iconRadialShape"}
1193	setAttributes={setAttributes}
1194	items={[
1195	{
1196	label: __("Circle", "post-carousel"),
1197	value: "circle",
1198	},
1199	{
1200	label: __("Ellipse", "post-carousel"),
1201	value: "ellipse",
1202	},
1203	]}
1204	/>
1205	<SelectField
1206	attributes={iconRadialPosition}
1207	attributesKey={"iconRadialPosition"}
1208	setAttributes={setAttributes}
1209	items={[
1210	{
1211	label: __("Center Center", "post-carousel"),
1212	value: "center center",
1213	},
1214	{
1215	label: __("Center Left", "post-carousel"),
1216	value: "center left",
1217	},
1218	{
1219	label: __("Center Right", "post-carousel"),
1220	value: "center right",
1221	},
1222	{
1223	label: __("Top Center", "post-carousel"),
1224	value: "top center",
1225	},
1226	{
1227	label: __("Top Left", "post-carousel"),
1228	value: "top left",
1229	},
1230	{
1231	label: __("Top Right", "post-carousel"),
1232	value: "top right",
1233	},
1234	{
1235	label: __("Bottom Center", "post-carousel"),
1236	value: "bottom center",
1237	},
1238	{
1239	label: __("Bottom Left", "post-carousel"),
1240	value: "bottom left",
1241	},
1242	{
1243	label: __("Bottom Right", "post-carousel"),
1244	value: "bottom right",
1245	},
1246	]}
1247	/>
1248	</>
1249	)}
1250	</>
1251	)} */}
1252	<Border
1253	attributes={{
1254	border: iconBorderStyle,
1255	borderWidth: iconBorderStyleWidth,
1256	}}
1257	setAttributes={setAttributes}
1258	attributesKey={{
1259	border: "iconBorderStyle",
1260	borderWidth: "iconBorderStyleWidth",
1261	}}
1262	btnType="normal"
1263	/>
1264	<Spacing
1265	label={__("Border Radius", "post-carousel")}
1266	attributes={iconBorderRadius}
1267	attributesKey={"iconBorderRadius"}
1268	setAttributes={setAttributes}
1269	units={["Px", "%", "em"]}
1270	defaultValue={{
1271	unit: "px",
1272	value: {
1273	top: "0",
1274	right: "0",
1275	bottom: "0",
1276	left: "0",
1277	},
1278	}}
1279	indicator={"radius"}
1280	/>
1281
1282	<Toggle
1283	label={__("Box Shadow", "post-carousel")}
1284	attributes={iconBoxShadowEnable}
1285	attributesKey={"iconBoxShadowEnable"}
1286	setAttributes={setAttributes}
1287	/>
1288	{iconBoxShadowEnable && (
1289	<BoxShadow
1290	label={__("Box Shadow", "post-carousel")}
1291	attributes={iconBoxShadow}
1292	attributesKey={"iconBoxShadow"}
1293	setAttributes={setAttributes}
1294	/>
1295	)}
1296	</>
1297	)}
1298	{iconStyleType === "hover" && (
1299	<>
1300	{iconSource === "library" && (
1301	<SpColorPicker
1302	label={__("Icon Hover Color", "post-carousel")}
1303	value={iconColor.hoverColor}
1304	onChange={(newColor) =>
1305	setAttributes({
1306	iconColor: {
1307	...iconColor,
1308	hoverColor: newColor,
1309	},
1310	})
1311	}
1312	defaultColor="#fff"
1313	/>
1314	)}
1315
1316	<Background
1317	label={__("Background Type", "post-carousel")}
1318	colorLabel="Solid Color"
1319	defaultColor="#2F2F2F"
1320	attributes={iconBg}
1321	attributesKey={"iconBg"}
1322	setAttributes={setAttributes}
1323	colorType={iconStyleType}
1324	items={[
1325	{
1326	label: <BgIcon />,
1327	value: "bgColor",
1328	tooltip: __("Solid", "post-carousel"),
1329	},
1330	{
1331	label: <GradientIcon />,
1332	value: "gradient",
1333	tooltip: __("Gradient", "post-carousel"),
1334	},
1335	]}
1336	/>
1337	{iconBg[iconStyleType]?.style === "gradient" && (
1338	<>
1339	{/^radial-gradient/.test(iconBg[iconStyleType]?.gradient) && (
1340	<>
1341	<SelectField
1342	attributes={iconHoverRadialShape}
1343	attributesKey={"iconHoverRadialShape"}
1344	setAttributes={setAttributes}
1345	items={[
1346	{
1347	label: __("Circle", "post-carousel"),
1348	value: "circle",
1349	},
1350	{
1351	label: __("Ellipse", "post-carousel"),
1352	value: "ellipse",
1353	},
1354	]}
1355	/>
1356	<SelectField
1357	attributes={iconHoverRadialPosition}
1358	attributesKey={"iconHoverRadialPosition"}
1359	setAttributes={setAttributes}
1360	items={[
1361	{
1362	label: __("Center Center", "post-carousel"),
1363	value: "center center",
1364	},
1365	{
1366	label: __("Center Left", "post-carousel"),
1367	value: "center left",
1368	},
1369	{
1370	label: __("Center Right", "post-carousel"),
1371	value: "center right",
1372	},
1373	{
1374	label: __("Top Center", "post-carousel"),
1375	value: "top center",
1376	},
1377	{
1378	label: __("Top Left", "post-carousel"),
1379	value: "top left",
1380	},
1381	{
1382	label: __("Top Right", "post-carousel"),
1383	value: "top right",
1384	},
1385	{
1386	label: __("Bottom Center", "post-carousel"),
1387	value: "bottom center",
1388	},
1389	{
1390	label: __("Bottom Left", "post-carousel"),
1391	value: "bottom left",
1392	},
1393	{
1394	label: __("Bottom Right", "post-carousel"),
1395	value: "bottom right",
1396	},
1397	]}
1398	/>
1399	</>
1400	)}
1401	</>
1402	)}
1403	<Border
1404	attributes={{
1405	border: iconBorderHoverStyle,
1406	borderWidth: iconBorderStyleHoverWidth,
1407	}}
1408	setAttributes={setAttributes}
1409	attributesKey={{
1410	border: "iconBorderHoverStyle",
1411	borderWidth: "iconBorderStyleHoverWidth",
1412	}}
1413	btnType="normal"
1414	/>
1415	<Spacing
1416	label={__("Border Radius", "post-carousel")}
1417	attributes={iconBorderHoverRadius}
1418	attributesKey={"iconBorderHoverRadius"}
1419	setAttributes={setAttributes}
1420	units={["Px", "%", "em"]}
1421	defaultValue={{
1422	unit: "px",
1423	value: {
1424	top: "0",
1425	right: "0",
1426	bottom: "0",
1427	left: "0",
1428	},
1429	}}
1430	indicator={"radius"}
1431	/>
1432	<Toggle
1433	label={__("Box Shadow", "post-carousel")}
1434	attributes={iconBoxShadowHoverEnable}
1435	attributesKey={"iconBoxShadowHoverEnable"}
1436	setAttributes={setAttributes}
1437	/>
1438	{iconBoxShadowHoverEnable && (
1439	<BoxShadow
1440	label={__("Box Shadow", "post-carousel")}
1441	attributes={iconBoxShadowHover}
1442	attributesKey={"iconBoxShadowHover"}
1443	setAttributes={setAttributes}
1444	/>
1445	)}
1446	</>
1447	)}
1448	<Divider position="sp-w-100pct" />
1449
1450	<Spacing
1451	label={__("Padding", "post-carousel")}
1452	attributes={iconPadding}
1453	attributesKey={"iconPadding"}
1454	setAttributes={setAttributes}
1455	units={["Px", "%", "em"]}
1456	defaultValue={{
1457	unit: "px",
1458	value: {
1459	top: "14",
1460	right: "14",
1461	bottom: "14",
1462	left: "14",
1463	},
1464	}}
1465	/>
1466	{infoBoxLayout === "smart-info-box-layout-one" && (
1467	<Spacing
1468	label={__("Margin", "post-carousel")}
1469	attributes={iconMargin}
1470	attributesKey={"iconMargin"}
1471	setAttributes={setAttributes}
1472	units={["Px", "%", "em"]}
1473	defaultValue={{
1474	unit: "px",
1475	value: {
1476	top: "0",
1477	right: "0",
1478	bottom: "24",
1479	left: "0",
1480	},
1481	}}
1482	/>
1483	)}
1484	{infoBoxLayout === "smart-info-box-layout-two" && (
1485	<Spacing
1486	label={__("Gap Between Description", "post-carousel")}
1487	attributes={gapBetweenDescription}
1488	attributesKey={"gapBetweenDescription"}
1489	setAttributes={setAttributes}
1490	units={["Px", "%", "em"]}
1491	defaultValue={{
1492	unit: "px",
1493	value: {
1494	top: "0",
1495	right: "0",
1496	bottom: "18",
1497	left: "0",
1498	},
1499	}}
1500	/>
1501	)}
1502	</>
1503	)}
1504	</>
1505	);
1506	};
1507
1508	export const TitleGeneralTab = ({ attributes, setAttributes }) => {
1509	const { titleEnable, titleTag, subTitleEnable, subTitleTag, subTitlePosition, subTitleGap } = attributes;
1510
1511	return (
1512	<>
1513	<Toggle
1514	label={__("Title", "post-carousel")}
1515	attributes={titleEnable}
1516	attributesKey={"titleEnable"}
1517	setAttributes={setAttributes}
1518	/>
1519	{titleEnable && (
1520	<>
1521	<>
1522	<SelectField
1523	label={__("HTML Tag", "post-carousel")}
1524	attributes={titleTag}
1525	attributesKey={"titleTag"}
1526	setAttributes={setAttributes}
1527	items={[
1528	{ label: "H1", value: "h1" },
1529	{ label: "H2", value: "h2" },
1530	{ label: "H3", value: "h3" },
1531	{ label: "H4", value: "h4" },
1532	{ label: "H5", value: "h5" },
1533	{ label: "H6", value: "h6" },
1534	{ label: "P", value: "p" },
1535	{ label: "Span", value: "span" },
1536	]}
1537	/>
1538	</>
1539
1540	<Toggle
1541	label={__("Sub Title", "post-carousel")}
1542	attributes={subTitleEnable}
1543	attributesKey={"subTitleEnable"}
1544	setAttributes={setAttributes}
1545	pro={true}
1546	/>
1547
1548	{subTitleEnable && (
1549	<>
1550	<SelectField
1551	label={__("HTML Tag", "post-carousel")}
1552	attributes={subTitleTag}
1553	attributesKey={"subTitleTag"}
1554	setAttributes={setAttributes}
1555	items={[
1556	{ label: "H1", value: "h1" },
1557	{ label: "H2", value: "h2" },
1558	{ label: "H3", value: "h3" },
1559	{ label: "H4", value: "h4" },
1560	{ label: "H5", value: "h5" },
1561	{ label: "H6", value: "h6" },
1562	{ label: "P", value: "p" },
1563	{ label: "Span", value: "span" },
1564	]}
1565	/>
1566
1567	<SelectField
1568	label={__("Position", "post-carousel")}
1569	attributes={subTitlePosition}
1570	attributesKey={"subTitlePosition"}
1571	setAttributes={setAttributes}
1572	items={[
1573	{
1574	label: __("Above Title", "post-carousel"),
1575	value: "above-title",
1576	},
1577	{
1578	label: __("Below Title", "post-carousel"),
1579	value: "below-title",
1580	},
1581	]}
1582	/>
1583	<SPRangeControl
1584	label={__("Sub Title Gap", "post-carousel")}
1585	attributes={subTitleGap}
1586	attributesKey={"subTitleGap"}
1587	setAttributes={setAttributes}
1588	units={["px", "em"]}
1589	defaultValue={{ unit: "px", value: 8 }}
1590	/>
1591	</>
1592	)}
1593	</>
1594	)}
1595	</>
1596	);
1597	};
1598	export const TitleStyleTab = ({ attributes, setAttributes }) => {
1599	const {
1600	titleHoverEffects,
1601	titleColor,
1602	subTitleColor,
1603	titleMargin,
1604	titleTypography,
1605	titleFontSize,
1606	titleLatterSpacing,
1607	titleLineHeight,
1608	subTitleTypography,
1609	subTitleFontSize,
1610	subTitleLatterSpacing,
1611	subTitleLineHeight,
1612	subTitleEnable,
1613	titleEnable,
1614	titleWordSpacing,
1615	subTitleWordSpacing,
1616	hoverEffectsColor,
1617	titleGlobalTypography,
1618	subTitleGlobalTypography,
1619	} = attributes;
1620
1621	const [iconStyleType, setIconStyleType] = useState("color");
1622
1623	return (
1624	<>
1625	{titleEnable && (
1626	<>
1627	<SelectField
1628	label={__("Title Hover Effects", "post-carousel")}
1629	attributes={titleHoverEffects}
1630	attributesKey={"titleHoverEffects"}
1631	setAttributes={setAttributes}
1632	items={[
1633	{
1634	label: __("None", "post-carousel"),
1635	value: "none",
1636	},
1637	{
1638	label: __("Underline", "post-carousel"),
1639	value: "underline",
1640	},
1641	{
1642	label: __("Overline", "post-carousel"),
1643	value: "overline",
1644	},
1645	{
1646	label: __("Double Line (Pro)", "post-carousel"),
1647	value: "double-line",
1648	disabled: true,
1649	},
1650	{
1651	label: __("Framed (Pro)", "post-carousel"),
1652	value: "framed",
1653	disabled: true,
1654	},
1655	{
1656	label: __("Background (Pro)", "post-carousel"),
1657	value: "background",
1658	disabled: true,
1659	},
1660	{
1661	label: __("Typing (Pro)", "post-carousel"),
1662	value: "text",
1663	disabled: true,
1664	},
1665	]}
1666	/>
1667
1668	{titleHoverEffects !== "none" && (
1669	<SpColorPicker
1670	label={__("Hover Effects Color", "post-carousel")}
1671	value={hoverEffectsColor}
1672	onChange={(newColor) => setAttributes({ hoverEffectsColor: newColor })}
1673	defaultColor="#2F2F2F"
1674	/>
1675	)}
1676
1677	<TypographyNew
1678	attributes={{
1679	family: titleTypography,
1680	familyKey: "titleTypography",
1681	fontSize: titleFontSize,
1682	fontSizeKey: "titleFontSize",
1683	fontSpacing: titleLatterSpacing,
1684	fontSpacingKey: "titleLatterSpacing",
1685	lineHeight: titleLineHeight,
1686	lineHeightKey: "titleLineHeight",
1687	wordSpacing: titleWordSpacing,
1688	wordSpacingKey: "titleWordSpacing",
1689	globalTypo: titleGlobalTypography,
1690	globalTypoKey: "titleGlobalTypography",
1691	}}
1692	setAttributes={setAttributes}
1693	spacingDefaultValue={{ unit: "px", value: 12 }}
1694	fontSizeDefault={{
1695	unit: "px",
1696	value: 20,
1697	}}
1698	lineDefaultValue={{ unit: "%", value: 120 }}
1699	typographyLabel={__("Title Typography", "post-carousel")}
1700	/>
1701	{subTitleEnable && (
1702	<TypographyNew
1703	attributes={{
1704	family: subTitleTypography,
1705	familyKey: "subTitleTypography",
1706	fontSize: subTitleFontSize,
1707	fontSizeKey: "subTitleFontSize",
1708	fontSpacing: subTitleLatterSpacing,
1709	fontSpacingKey: "subTitleLatterSpacing",
1710	lineHeight: subTitleLineHeight,
1711	lineHeightKey: "subTitleLineHeight",
1712	wordSpacing: subTitleWordSpacing,
1713	wordSpacingKey: "subTitleWordSpacing",
1714	globalTypo: subTitleGlobalTypography,
1715	globalTypoKey: "subTitleGlobalTypography",
1716	}}
1717	setAttributes={setAttributes}
1718	spacingDefaultValue={{ unit: "px", value: 0 }}
1719	fontSizeDefault={{
1720	unit: "px",
1721	value: 14,
1722	}}
1723	lineDefaultValue={{ unit: "px", value: 27.5 }}
1724	typographyLabel={__("Sub Title Typography", "post-carousel")}
1725	/>
1726	)}
1727
1728	<SPToggleGroupControl
1729	attributes={iconStyleType}
1730	items={[
1731	{
1732	label: __("Normal", "post-carousel"),
1733	value: "color",
1734	},
1735	{
1736	label: __("Hover", "post-carousel"),
1737	value: "hover",
1738	},
1739	]}
1740	onClick={(val) => setIconStyleType(val)}
1741	/>
1742
1743	{iconStyleType === "color" && (
1744	<>
1745	<SpColorPicker
1746	label={__("Title Color", "post-carousel")}
1747	value={titleColor.color}
1748	onChange={(newColor) =>
1749	setAttributes({
1750	titleColor: {
1751	...titleColor,
1752	color: newColor,
1753	},
1754	})
1755	}
1756	defaultColor="#2F2F2F"
1757	/>
1758	{subTitleEnable && (
1759	<SpColorPicker
1760	label={__("Sub Title Color", "post-carousel")}
1761	value={subTitleColor.color}
1762	onChange={(newColor) =>
1763	setAttributes({
1764	subTitleColor: {
1765	...subTitleColor,
1766	color: newColor,
1767	},
1768	})
1769	}
1770	defaultColor="#333333"
1771	/>
1772	)}
1773	</>
1774	)}
1775	{iconStyleType === "hover" && (
1776	<>
1777	<SpColorPicker
1778	label={__("Title Color", "post-carousel")}
1779	value={titleColor.hoverColor}
1780	onChange={(newColor) =>
1781	setAttributes({
1782	titleColor: {
1783	...titleColor,
1784	hoverColor: newColor,
1785	},
1786	})
1787	}
1788	defaultColor="#2F2F2F"
1789	/>
1790	{subTitleEnable && (
1791	<SpColorPicker
1792	label={__("Sub Title Color", "post-carousel")}
1793	value={subTitleColor.hoverColor}
1794	onChange={(newColor) =>
1795	setAttributes({
1796	subTitleColor: {
1797	...subTitleColor,
1798	hoverColor: newColor,
1799	},
1800	})
1801	}
1802	defaultColor="#333333"
1803	/>
1804	)}
1805	</>
1806	)}
1807
1808	<Spacing
1809	label={__("Margin", "post-carousel")}
1810	attributes={titleMargin}
1811	attributesKey={"titleMargin"}
1812	setAttributes={setAttributes}
1813	units={["Px", "%", "em"]}
1814	defaultValue={{
1815	unit: "px",
1816	value: {
1817	top: "0",
1818	right: "0",
1819	bottom: "8",
1820	left: "0",
1821	},
1822	}}
1823	/>
1824	</>
1825	)}
1826	</>
1827	);
1828	};
1829
1830	export const DescriptionGeneralTab = ({ attributes, setAttributes }) => {
1831	const { descriptionEnable, dropCapsEnable } = attributes;
1832
1833	return (
1834	<>
1835	<Toggle
1836	label={__("Description", "post-carousel")}
1837	attributes={descriptionEnable}
1838	attributesKey={"descriptionEnable"}
1839	setAttributes={setAttributes}
1840	/>
1841	{descriptionEnable && (
1842	<Toggle
1843	label={__("Drop Caps", "post-carousel")}
1844	attributes={dropCapsEnable}
1845	attributesKey={"dropCapsEnable"}
1846	setAttributes={setAttributes}
1847	pro={true}
1848	/>
1849	)}
1850	</>
1851	);
1852	};
1853	export const DescriptionStyleTab = ({ attributes, setAttributes }) => {
1854	const {
1855	descriptionMargin,
1856	descriptionTypography,
1857	descriptionFontSize,
1858	descriptionLatterSpacing,
1859	descriptionLineHeight,
1860	blockName,
1861	descriptionColor,
1862	dropCapsColor,
1863	descriptionEnable,
1864	dropCapsEnable,
1865	descriptionWordSpacing,
1866	desGlobalTypography,
1867	} = attributes;
1868
1869	const [iconStyleType, setIconStyleType] = useState("color");
1870
1871	return (
1872	<>
1873	{descriptionEnable && (
1874	<>
1875	<TypographyNew
1876	attributes={{
1877	family: descriptionTypography,
1878	familyKey: "descriptionTypography",
1879	fontSize: descriptionFontSize,
1880	fontSizeKey: "descriptionFontSize",
1881	fontSpacing: descriptionLatterSpacing,
1882	fontSpacingKey: "descriptionLatterSpacing",
1883	lineHeight: descriptionLineHeight,
1884	lineHeightKey: "descriptionLineHeight",
1885	wordSpacing: descriptionWordSpacing,
1886	wordSpacingKey: "descriptionWordSpacing",
1887	globalTypo: desGlobalTypography,
1888	globalTypoKey: "desGlobalTypography",
1889	}}
1890	setAttributes={setAttributes}
1891	spacingDefaultValue={{ unit: "px", value: 0 }}
1892	fontSizeDefault={{
1893	unit: "px",
1894	value: useDefaultValue(blockName).descriptionFontSize,
1895	}}
1896	lineDefaultValue={{ unit: "px", value: 27.5 }}
1897	typographyLabel={__("Typography", "post-carousel")}
1898	/>
1899
1900	<SPToggleGroupControl
1901	attributes={iconStyleType}
1902	items={[
1903	{
1904	label: __("Normal", "post-carousel"),
1905	value: "color",
1906	},
1907	{
1908	label: __("Hover", "post-carousel"),
1909	value: "hover",
1910	},
1911	]}
1912	onClick={(val) => setIconStyleType(val)}
1913	/>
1914
1915	{iconStyleType === "color" && (
1916	<>
1917	<SpColorPicker
1918	label={__("Color", "post-carousel")}
1919	value={descriptionColor.color}
1920	onChange={(newColor) =>
1921	setAttributes({
1922	descriptionColor: {
1923	...descriptionColor,
1924	color: newColor,
1925	},
1926	})
1927	}
1928	defaultColor="#fff"
1929	/>
1930	{dropCapsEnable && (
1931	<SpColorPicker
1932	label={__("Drop Caps Color", "post-carousel")}
1933	value={dropCapsColor}
1934	onChange={(newColor) =>
1935	setAttributes({
1936	dropCapsColor: newColor,
1937	})
1938	}
1939	defaultColor="#333333"
1940	/>
1941	)}
1942	</>
1943	)}
1944	{iconStyleType === "hover" && (
1945	<>
1946	<SpColorPicker
1947	label={__("Color", "post-carousel")}
1948	value={descriptionColor.hoverColor}
1949	onChange={(newColor) =>
1950	setAttributes({
1951	descriptionColor: {
1952	...descriptionColor,
1953	hoverColor: newColor,
1954	},
1955	})
1956	}
1957	defaultColor="#fff"
1958	/>
1959	</>
1960	)}
1961
1962	<Spacing
1963	label={__("Margin", "post-carousel")}
1964	attributes={descriptionMargin}
1965	attributesKey={"descriptionMargin"}
1966	setAttributes={setAttributes}
1967	units={["Px", "%", "em"]}
1968	defaultValue={{
1969	unit: "px",
1970	value: {
1971	top: "0",
1972	right: "0",
1973	bottom: "24",
1974	left: "0",
1975	},
1976	}}
1977	/>
1978	</>
1979	)}
1980	</>
1981	);
1982	};
1983
1984	export const BadgeGeneralTab = ({ attributes, setAttributes }) => {
1985	const { badgeEnable, badgePosition, badgeLabel } = attributes;
1986
1987	return (
1988	<>
1989	<Toggle
1990	label={__("Badge", "post-carousel")}
1991	attributes={badgeEnable}
1992	attributesKey={"badgeEnable"}
1993	setAttributes={setAttributes}
1994	pro={true}
1995	/>
1996	{badgeEnable && (
1997	<>
1998	<InputControl
1999	label={__("Badge Label", "post-carousel")}
2000	attributes={badgeLabel}
2001	flex={false}
2002	inputType="text"
2003	attributesKey={"badgeLabel"}
2004	setAttributes={setAttributes}
2005	placeholder={__("Badge Label", "post-carousel")}
2006	/>
2007	<SelectField
2008	label={__("Badge Position", "post-carousel")}
2009	attributes={badgePosition}
2010	attributesKey={"badgePosition"}
2011	setAttributes={setAttributes}
2012	items={[
2013	{
2014	label: __("Top Left", "post-carousel"),
2015	value: "top-left",
2016	},
2017	{
2018	label: __("Top Right", "post-carousel"),
2019	value: "top-right",
2020	},
2021	{
2022	label: __("Bottom Left", "post-carousel"),
2023	value: "bottom-left",
2024	},
2025	{
2026	label: __("Bottom Right", "post-carousel"),
2027	value: "bottom-right",
2028	},
2029	]}
2030	/>
2031	</>
2032	)}
2033	<ProInfo>
2034	<span>Highlight important content with custom badges and flexible positioning.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a>
2035	</ProInfo>
2036	</>
2037	);
2038	};
2039	export const BadgeStyleTab = ({ attributes, setAttributes }) => {
2040	const {
2041	blockName,
2042	badgeTypography,
2043	badgeFontSize,
2044	badgeLatterSpacing,
2045	badgeLineHeight,
2046	badgeColor,
2047	badgeBg,
2048	badgeBorderStyle,
2049	badgeBorderStyleWidth,
2050	badgeBorderRadius,
2051	badgeBoxShadowEnable,
2052	badgeBoxShadow,
2053	badgeBorderHoverStyle,
2054	badgeBorderStyleHoverWidth,
2055	badgeBorderHoverRadius,
2056	badgeBoxShadowHoverEnable,
2057	badgeBoxShadowHover,
2058	badgePadding,
2059	badgeMargin,
2060	badgeRadialShape,
2061	badgeRadialPosition,
2062	badgeHoverRadialShape,
2063	badgeHoverRadialPosition,
2064	badgeEnable,
2065	badgeWordSpacing,
2066	badgeGlobalTypography,
2067	} = attributes;
2068
2069	const [iconStyleType, setIconStyleType] = useState("color");
2070
2071	return (
2072	<>
2073	{badgeEnable && (
2074	<>
2075	<TypographyNew
2076	attributes={{
2077	family: badgeTypography,
2078	familyKey: "badgeTypography",
2079	fontSize: badgeFontSize,
2080	fontSizeKey: "badgeFontSize",
2081	fontSpacing: badgeLatterSpacing,
2082	fontSpacingKey: "badgeLatterSpacing",
2083	lineHeight: badgeLineHeight,
2084	lineHeightKey: "badgeLineHeight",
2085	wordSpacing: badgeWordSpacing,
2086	wordSpacingKey: "badgeWordSpacing",
2087	globalTypo: badgeGlobalTypography,
2088	globalTypoKey: "badgeGlobalTypography",
2089	}}
2090	setAttributes={setAttributes}
2091	spacingDefaultValue={{ unit: "px", value: 0 }}
2092	fontSizeDefault={{
2093	unit: "px",
2094	value: useDefaultValue(blockName).badgeFontSize,
2095	}}
2096	lineDefaultValue={{ unit: "px", value: 27.5 }}
2097	typographyLabel={__("Typography", "post-carousel")}
2098	/>
2099
2100	<SPToggleGroupControl
2101	attributes={iconStyleType}
2102	items={[
2103	{
2104	label: __("Normal", "post-carousel"),
2105	value: "color",
2106	},
2107	{
2108	label: __("Hover", "post-carousel"),
2109	value: "hover",
2110	},
2111	]}
2112	onClick={(val) => setIconStyleType(val)}
2113	/>
2114
2115	{iconStyleType === "color" && (
2116	<>
2117	<SpColorPicker
2118	label={__("Text Color", "post-carousel")}
2119	value={badgeColor.color}
2120	onChange={(newColor) =>
2121	setAttributes({
2122	badgeColor: {
2123	...badgeColor,
2124	color: newColor,
2125	},
2126	})
2127	}
2128	defaultColor="#2F2F2F"
2129	/>
2130	<>
2131	<Background
2132	label={__("Background Type", "post-carousel")}
2133	colorLabel="Solid Color"
2134	defaultColor="#E0E0E0"
2135	attributes={badgeBg}
2136	attributesKey={"badgeBg"}
2137	setAttributes={setAttributes}
2138	colorType={iconStyleType}
2139	items={[
2140	{
2141	label: <BgIcon />,
2142	value: "bgColor",
2143	tooltip: __("Solid", "post-carousel"),
2144	},
2145	{
2146	label: <GradientIcon />,
2147	value: "gradient",
2148	tooltip: __("Gradient", "post-carousel"),
2149	},
2150	]}
2151	/>
2152	{badgeBg[iconStyleType]?.style === "gradient" && (
2153	<>
2154	{/^radial-gradient/.test(badgeBg[iconStyleType]?.gradient) && (
2155	<>
2156	<SelectField
2157	attributes={badgeRadialShape}
2158	attributesKey={"badgeRadialShape"}
2159	setAttributes={setAttributes}
2160	items={[
2161	{
2162	label: __("Circle", "post-carousel"),
2163	value: "circle",
2164	},
2165	{
2166	label: __("Ellipse", "post-carousel"),
2167	value: "ellipse",
2168	},
2169	]}
2170	/>
2171	<SelectField
2172	attributes={badgeRadialPosition}
2173	attributesKey={"badgeRadialPosition"}
2174	setAttributes={setAttributes}
2175	items={[
2176	{
2177	label: __("Center Center", "post-carousel"),
2178	value: "center center",
2179	},
2180	{
2181	label: __("Center Left", "post-carousel"),
2182	value: "center left",
2183	},
2184	{
2185	label: __("Center Right", "post-carousel"),
2186	value: "center right",
2187	},
2188	{
2189	label: __("Top Center", "post-carousel"),
2190	value: "top center",
2191	},
2192	{
2193	label: __("Top Left", "post-carousel"),
2194	value: "top left",
2195	},
2196	{
2197	label: __("Top Right", "post-carousel"),
2198	value: "top right",
2199	},
2200	{
2201	label: __("Bottom Center", "post-carousel"),
2202	value: "bottom center",
2203	},
2204	{
2205	label: __("Bottom Left", "post-carousel"),
2206	value: "bottom left",
2207	},
2208	{
2209	label: __("Bottom Right", "post-carousel"),
2210	value: "bottom right",
2211	},
2212	]}
2213	/>
2214	</>
2215	)}
2216	</>
2217	)}
2218	<Border
2219	attributes={{
2220	border: badgeBorderStyle,
2221	borderWidth: badgeBorderStyleWidth,
2222	}}
2223	setAttributes={setAttributes}
2224	attributesKey={{
2225	border: "badgeBorderStyle",
2226	borderWidth: "badgeBorderStyleWidth",
2227	}}
2228	btnType="normal"
2229	/>
2230	<Spacing
2231	label={__("Border Radius", "post-carousel")}
2232	attributes={badgeBorderRadius}
2233	attributesKey={"badgeBorderRadius"}
2234	setAttributes={setAttributes}
2235	units={["Px", "%", "em"]}
2236	defaultValue={{
2237	unit: "px",
2238	value: {
2239	top: "0",
2240	right: "0",
2241	bottom: "0",
2242	left: "0",
2243	},
2244	}}
2245	indicator={"radius"}
2246	/>
2247
2248	<Toggle
2249	label={__("Box Shadow", "post-carousel")}
2250	attributes={badgeBoxShadowEnable}
2251	attributesKey={"badgeBoxShadowEnable"}
2252	setAttributes={setAttributes}
2253	/>
2254	{badgeBoxShadowEnable && (
2255	<BoxShadow
2256	label={__("Box Shadow", "post-carousel")}
2257	attributes={badgeBoxShadow}
2258	attributesKey={"badgeBoxShadow"}
2259	setAttributes={setAttributes}
2260	/>
2261	)}
2262	</>
2263	</>
2264	)}
2265	{iconStyleType === "hover" && (
2266	<>
2267	<SpColorPicker
2268	label={__("Hover Text Color", "post-carousel")}
2269	value={badgeColor.hoverColor}
2270	onChange={(newColor) =>
2271	setAttributes({
2272	badgeColor: {
2273	...badgeColor,
2274	hoverColor: newColor,
2275	},
2276	})
2277	}
2278	defaultColor="#2F2F2F"
2279	/>
2280	<>
2281	<Background
2282	label={__("Background Type", "post-carousel")}
2283	colorLabel="Solid Color"
2284	defaultColor="#E0E0E0"
2285	attributes={badgeBg}
2286	attributesKey={"badgeBg"}
2287	setAttributes={setAttributes}
2288	colorType={iconStyleType}
2289	items={[
2290	{
2291	label: <BgIcon />,
2292	value: "bgColor",
2293	tooltip: __("Solid", "post-carousel"),
2294	},
2295	{
2296	label: <GradientIcon />,
2297	value: "gradient",
2298	tooltip: __("Gradient", "post-carousel"),
2299	},
2300	]}
2301	/>
2302	{badgeBg[iconStyleType]?.style === "gradient" && (
2303	<>
2304	{/^radial-gradient/.test(badgeBg[iconStyleType]?.gradient) && (
2305	<>
2306	<SelectField
2307	attributes={badgeHoverRadialShape}
2308	attributesKey={"badgeHoverRadialShape"}
2309	setAttributes={setAttributes}
2310	items={[
2311	{
2312	label: __("Circle", "post-carousel"),
2313	value: "circle",
2314	},
2315	{
2316	label: __("Ellipse", "post-carousel"),
2317	value: "ellipse",
2318	},
2319	]}
2320	/>
2321	<SelectField
2322	attributes={badgeHoverRadialPosition}
2323	attributesKey={"badgeHoverRadialPosition"}
2324	setAttributes={setAttributes}
2325	items={[
2326	{
2327	label: __("Center Center", "post-carousel"),
2328	value: "center center",
2329	},
2330	{
2331	label: __("Center Left", "post-carousel"),
2332	value: "center left",
2333	},
2334	{
2335	label: __("Center Right", "post-carousel"),
2336	value: "center right",
2337	},
2338	{
2339	label: __("Top Center", "post-carousel"),
2340	value: "top center",
2341	},
2342	{
2343	label: __("Top Left", "post-carousel"),
2344	value: "top left",
2345	},
2346	{
2347	label: __("Top Right", "post-carousel"),
2348	value: "top right",
2349	},
2350	{
2351	label: __("Bottom Center", "post-carousel"),
2352	value: "bottom center",
2353	},
2354	{
2355	label: __("Bottom Left", "post-carousel"),
2356	value: "bottom left",
2357	},
2358	{
2359	label: __("Bottom Right", "post-carousel"),
2360	value: "bottom right",
2361	},
2362	]}
2363	/>
2364	</>
2365	)}
2366	</>
2367	)}
2368	<Border
2369	attributes={{
2370	border: badgeBorderHoverStyle,
2371	borderWidth: badgeBorderStyleHoverWidth,
2372	}}
2373	setAttributes={setAttributes}
2374	attributesKey={{
2375	border: "badgeBorderHoverStyle",
2376	borderWidth: "badgeBorderStyleHoverWidth",
2377	}}
2378	btnType="normal"
2379	/>
2380
2381	<Spacing
2382	label={__("Border Radius", "post-carousel")}
2383	attributes={badgeBorderHoverRadius}
2384	attributesKey={"badgeBorderHoverRadius"}
2385	setAttributes={setAttributes}
2386	units={["Px", "%", "em"]}
2387	defaultValue={{
2388	unit: "px",
2389	value: {
2390	top: "0",
2391	right: "0",
2392	bottom: "0",
2393	left: "0",
2394	},
2395	}}
2396	indicator={"radius"}
2397	/>
2398
2399	<Toggle
2400	label={__("Box Shadow", "post-carousel")}
2401	attributes={badgeBoxShadowHoverEnable}
2402	attributesKey={"badgeBoxShadowHoverEnable"}
2403	setAttributes={setAttributes}
2404	/>
2405	{badgeBoxShadowHoverEnable && (
2406	<BoxShadow
2407	label={__("Box Shadow", "post-carousel")}
2408	attributes={badgeBoxShadowHover}
2409	attributesKey={"badgeBoxShadowHover"}
2410	setAttributes={setAttributes}
2411	/>
2412	)}
2413	</>
2414	</>
2415	)}
2416
2417	<Spacing
2418	label={__("Padding", "post-carousel")}
2419	attributes={badgePadding}
2420	attributesKey={"badgePadding"}
2421	setAttributes={setAttributes}
2422	units={["Px", "%", "em"]}
2423	defaultValue={{
2424	unit: "px",
2425	value: {
2426	top: "6",
2427	right: "12",
2428	bottom: "6",
2429	left: "12",
2430	},
2431	}}
2432	/>
2433	<Spacing
2434	label={__("Margin", "post-carousel")}
2435	attributes={badgeMargin}
2436	attributesKey={"badgeMargin"}
2437	setAttributes={setAttributes}
2438	units={["Px", "%", "em"]}
2439	defaultValue={{
2440	unit: "px",
2441	value: {
2442	top: "0",
2443	right: "0",
2444	bottom: "0",
2445	left: "0",
2446	},
2447	}}
2448	/>
2449	</>
2450	)}
2451	</>
2452	);
2453	};
2454
2455	export const RatingGeneralTab = ({ attributes, setAttributes }) => {
2456	const {
2457	ratingEnable,
2458	scale,
2459	ratingIconSize,
2460	ratingValueEnable,
2461	ratingValuePosition,
2462	ratingIconSourceLibrary,
2463	ratingGap,
2464	} = attributes;
2465
2466	return (
2467	<>
2468	<Toggle
2469	label={__("Rating", "post-carousel")}
2470	attributes={ratingEnable}
2471	attributesKey={"ratingEnable"}
2472	setAttributes={setAttributes}
2473	pro={true}
2474	/>
2475	{ratingEnable && (
2476	<>
2477	<SPRangeControl
2478	label={__("Scale", "post-carousel")}
2479	attributes={scale}
2480	attributesKey={"scale"}
2481	setAttributes={setAttributes}
2482	max={5}
2483	step={0.1}
2484	/>
2485
2486	<p>{__("Icon Source", "post-carousel")}</p>
2487
2488	<IconsLibrary
2489	attributes={ratingIconSourceLibrary}
2490	attributesKey={"ratingIconSourceLibrary"}
2491	setAttributes={setAttributes}
2492	/>
2493	<SPRangeControl
2494	label={__("Icon Size", "post-carousel")}
2495	attributes={ratingIconSize}
2496	attributesKey={"ratingIconSize"}
2497	setAttributes={setAttributes}
2498	units={["px", "%", "em"]}
2499	defaultValue={{ unit: "px", value: 16 }}
2500	/>
2501
2502	<Toggle
2503	label={__("Rating Value", "post-carousel")}
2504	attributes={ratingValueEnable}
2505	attributesKey={"ratingValueEnable"}
2506	setAttributes={setAttributes}
2507	/>
2508	{ratingValueEnable && (
2509	<>
2510	<SPToggleGroupControl
2511	label={__("Rating Value Position", "post-carousel")}
2512	attributes={ratingValuePosition}
2513	attributesKey={"ratingValuePosition"}
2514	setAttributes={setAttributes}
2515	items={[
2516	{
2517	label: __("Left", "post-carousel"),
2518	value: "left",
2519	},
2520	{
2521	label: __("Right", "post-carousel"),
2522	value: "right",
2523	},
2524	]}
2525	/>
2526
2527	<SPRangeControl
2528	label={__("Gap with Rating", "post-carousel")}
2529	attributes={ratingGap}
2530	attributesKey={"ratingGap"}
2531	setAttributes={setAttributes}
2532	units={["px", "em"]}
2533	defaultValue={{ unit: "px", value: 8 }}
2534	/>
2535	</>
2536	)}
2537	</>
2538	)}
2539	<ProInfo>
2540	<h3>Premium Only</h3>
2541	<h4>Highlight content with customizable rating controls.</h4>
2542	<ul>
2543	<li>
2544	— Enable star ratings display
2545	</li>
2546	<li>
2547	— Adjustable rating scale
2548	</li>
2549	<li>
2550	— Custom icon selection
2551	</li>
2552	<li>
2553	— Icon size control
2554	</li>
2555	<li>
2556	— Control Rating value
2557	</li>
2558	<li>
2559	— Flexible position and spacing
2560	</li>
2561	</ul>
2562	<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a>
2563	</ProInfo>
2564	</>
2565	);
2566	};
2567	export const RatingStyleTab = ({ attributes, setAttributes }) => {
2568	const {
2569	ratingTypography,
2570	ratingFontSize,
2571	ratingLatterSpacing,
2572	ratingLineHeight,
2573	ratingMargin,
2574	filledColor,
2575	emptyColor,
2576	ratingNumberColor,
2577	ratingEnable,
2578	ratingWordSpacing,
2579	ratingGlobalTypography,
2580	} = attributes;
2581
2582	const [iconStyleType, setIconStyleType] = useState("color");
2583
2584	return (
2585	<>
2586	{ratingEnable && (
2587	<>
2588	<TypographyNew
2589	attributes={{
2590	family: ratingTypography,
2591	familyKey: "ratingTypography",
2592	fontSize: ratingFontSize,
2593	fontSizeKey: "ratingFontSize",
2594	fontSpacing: ratingLatterSpacing,
2595	fontSpacingKey: "ratingLatterSpacing",
2596	lineHeight: ratingLineHeight,
2597	lineHeightKey: "ratingLineHeight",
2598	wordSpacing: ratingWordSpacing,
2599	wordSpacingKey: "ratingWordSpacing",
2600	globalTypo: ratingGlobalTypography,
2601	globalTypoKey: "ratingGlobalTypography",
2602	}}
2603	setAttributes={setAttributes}
2604	spacingDefaultValue={{ unit: "px", value: 0 }}
2605	fontSizeDefault={{ unit: "px", value: 16 }}
2606	lineDefaultValue={{ unit: "px", value: 20 }}
2607	typographyLabel={__("Typography", "post-carousel")}
2608	/>
2609
2610	<SPToggleGroupControl
2611	attributes={iconStyleType}
2612	items={[
2613	{
2614	label: __("Normal", "post-carousel"),
2615	value: "color",
2616	},
2617	{
2618	label: __("Hover", "post-carousel"),
2619	value: "hover",
2620	},
2621	]}
2622	onClick={(val) => setIconStyleType(val)}
2623	/>
2624
2625	{iconStyleType === "color" && (
2626	<>
2627	<SpColorPicker
2628	label={__("Filled Color", "post-carousel")}
2629	value={filledColor.color}
2630	onChange={(newColor) =>
2631	setAttributes({
2632	filledColor: {
2633	...filledColor,
2634	color: newColor,
2635	},
2636	})
2637	}
2638	defaultColor="#F0B849"
2639	/>
2640	<SpColorPicker
2641	label={__("Empty Color", "post-carousel")}
2642	value={emptyColor.color}
2643	onChange={(newColor) =>
2644	setAttributes({
2645	emptyColor: {
2646	...emptyColor,
2647	color: newColor,
2648	},
2649	})
2650	}
2651	defaultColor="#ddd"
2652	/>
2653	<SpColorPicker
2654	label={__("Rating Number Color", "post-carousel")}
2655	value={ratingNumberColor.color}
2656	onChange={(newColor) =>
2657	setAttributes({
2658	ratingNumberColor: {
2659	...ratingNumberColor,
2660	color: newColor,
2661	},
2662	})
2663	}
2664	defaultColor="#757575"
2665	/>
2666	</>
2667	)}
2668	{iconStyleType === "hover" && (
2669	<>
2670	<SpColorPicker
2671	label={__("Filled Color", "post-carousel")}
2672	value={filledColor.hoverColor}
2673	onChange={(newColor) =>
2674	setAttributes({
2675	filledColor: {
2676	...filledColor,
2677	hoverColor: newColor,
2678	},
2679	})
2680	}
2681	defaultColor="#e79a00ff"
2682	/>
2683	<SpColorPicker
2684	label={__("Empty Color", "post-carousel")}
2685	value={emptyColor.hoverColor}
2686	onChange={(newColor) =>
2687	setAttributes({
2688	emptyColor: {
2689	...emptyColor,
2690	hoverColor: newColor,
2691	},
2692	})
2693	}
2694	defaultColor="#757575"
2695	/>
2696	<SpColorPicker
2697	label={__("Rating Number Color", "post-carousel")}
2698	value={ratingNumberColor.hoverColor}
2699	onChange={(newColor) =>
2700	setAttributes({
2701	ratingNumberColor: {
2702	...ratingNumberColor,
2703	hoverColor: newColor,
2704	},
2705	})
2706	}
2707	defaultColor="#757575"
2708	/>
2709	</>
2710	)}
2711
2712	<Spacing
2713	label={__("Margin", "post-carousel")}
2714	attributes={ratingMargin}
2715	attributesKey={"ratingMargin"}
2716	setAttributes={setAttributes}
2717	units={["Px", "%", "em"]}
2718	defaultValue={{
2719	unit: "px",
2720	value: {
2721	top: "8",
2722	right: "0",
2723	bottom: "8",
2724	left: "0",
2725	},
2726	}}
2727	/>
2728	</>
2729	)}
2730	</>
2731	);
2732	};
2733
2734	export const CallToActionGeneralTab = ({ attributes, setAttributes }) => {
2735	const {
2736	callActionEnable,
2737	linkingType,
2738	fullWidthButton,
2739	cAIconSize,
2740	cAIconPosition,
2741	iconTextGap,
2742	buttonLink,
2743	openNewTab,
2744	overlayOnHover,
2745	externalLinkIcon,
2746	cAIconSource,
2747	cAIconSourceLibrary,
2748	cAIconCustomWidth,
2749	cAIconCustomHeight,
2750	cAIconSourceCustom,
2751	buttonIconEnable,
2752	infoBoxLayout,
2753	} = attributes;
2754
2755	const handleButtonLink = (newLink) => {
2756	const link = ensureHttps(newLink);
2757	setAttributes({ buttonLink: link });
2758	};
2759
2760	return (
2761	<>
2762	<Toggle
2763	label={__("Call to Action", "post-carousel")}
2764	attributes={callActionEnable}
2765	attributesKey={"callActionEnable"}
2766	setAttributes={setAttributes}
2767	/>
2768	{callActionEnable && (
2769	<>
2770	<SPToggleGroupControl
2771	label={__("Linking Type", "post-carousel")}
2772	attributes={linkingType}
2773	attributesKey={"linkingType"}
2774	setAttributes={setAttributes}
2775	items={[
2776	{
2777	label: __("Button", "post-carousel"),
2778	value: "button",
2779	},
2780	{
2781	label: __("Text", "post-carousel"),
2782	value: "text",
2783	},
2784	{
2785	label: __("Full Box", "post-carousel"),
2786	value: "fullBox",
2787	disabled: true,
2788	},
2789	]}
2790	/>
2791	{linkingType === "button" && (
2792	<>
2793	{infoBoxLayout !== "smart-info-box-layout-four" && (
2794	<Toggle
2795	label={__("Full Width Button", "post-carousel")}
2796	attributes={fullWidthButton}
2797	attributesKey={"fullWidthButton"}
2798	setAttributes={setAttributes}
2799	/>
2800	)}
2801	</>
2802	)}
2803
2804	{(linkingType === "button" \|\| linkingType === "text") && (
2805	<Toggle
2806	label={__("Button Icon", "post-carousel")}
2807	attributes={buttonIconEnable}
2808	attributesKey={"buttonIconEnable"}
2809	setAttributes={setAttributes}
2810	pro={true}
2811	/>
2812	)}
2813
2814	{linkingType === "fullBox" && (
2815	<Toggle
2816	label={__("Overlay on Hover", "post-carousel")}
2817	attributes={overlayOnHover}
2818	attributesKey={"overlayOnHover"}
2819	setAttributes={setAttributes}
2820	/>
2821	)}
2822	{linkingType === "fullBox" && overlayOnHover && (
2823	<Toggle
2824	label={__("External Link Icon", "post-carousel")}
2825	attributes={externalLinkIcon}
2826	attributesKey={"externalLinkIcon"}
2827	setAttributes={setAttributes}
2828	/>
2829	)}
2830
2831	{buttonIconEnable && (
2832	<>
2833	{linkingType !== "fullBox" && (
2834	<>
2835	<SPToggleGroupControl
2836	label={__("Icon Source", "post-carousel")}
2837	attributes={cAIconSource}
2838	attributesKey={"cAIconSource"}
2839	setAttributes={setAttributes}
2840	pro={true}
2841	items={[
2842	{
2843	label: __("Library", "post-carousel"),
2844	value: "library",
2845	},
2846	{
2847	label: __("Custom", "post-carousel"),
2848	value: "custom",
2849	},
2850	]}
2851	/>
2852
2853	{cAIconSource === "library" && (
2854	<>
2855	<IconsLibrary
2856	attributes={cAIconSourceLibrary}
2857	attributesKey={"cAIconSourceLibrary"}
2858	setAttributes={setAttributes}
2859	pro={true}
2860	/>
2861	<SPRangeControl
2862	label={__("Icon Size", "post-carousel")}
2863	attributes={cAIconSize}
2864	attributesKey={"cAIconSize"}
2865	setAttributes={setAttributes}
2866	units={["px", "%", "em"]}
2867	defaultValue={{
2868	unit: "px",
2869	value: 16,
2870	}}
2871	pro={true}
2872	/>
2873	</>
2874	)}
2875
2876	{cAIconSource === "custom" && (
2877	<>
2878	<MediaPicker
2879	label={__("Icon/Image Source", "post-carousel")}
2880	imageKey="cAIconSourceCustom"
2881	enableImageSize={false}
2882	setAttributes={setAttributes}
2883	backgroundImage={cAIconSourceCustom}
2884	/>
2885
2886	<SPRangeControl
2887	label={__("Width", "post-carousel")}
2888	attributes={cAIconCustomWidth}
2889	attributesKey={"cAIconCustomWidth"}
2890	setAttributes={setAttributes}
2891	units={["px", "%", "em"]}
2892	defaultValue={{
2893	unit: "px",
2894	value: 16,
2895	}}
2896	/>
2897
2898	<SPRangeControl
2899	label={__("Height", "post-carousel")}
2900	attributes={cAIconCustomHeight}
2901	attributesKey={"cAIconCustomHeight"}
2902	setAttributes={setAttributes}
2903	units={["px", "%", "em"]}
2904	defaultValue={{
2905	unit: "px",
2906	value: 16,
2907	}}
2908	/>
2909	</>
2910	)}
2911	</>
2912	)}
2913
2914	{linkingType !== "fullBox" && (
2915	<>
2916	<SPToggleGroupControl
2917	label={__("Icon Position", "post-carousel")}
2918	attributes={cAIconPosition}
2919	attributesKey={"cAIconPosition"}
2920	setAttributes={setAttributes}
2921	pro={true}
2922	items={[
2923	{
2924	label: __("Before Text", "post-carousel"),
2925	value: "beforeText",
2926	},
2927	{
2928	label: __("After Text", "post-carousel"),
2929	value: "afterText",
2930	},
2931	]}
2932	/>
2933
2934	<SPRangeControl
2935	label={__("Icon to Text Gap", "post-carousel")}
2936	attributes={iconTextGap}
2937	attributesKey={"iconTextGap"}
2938	setAttributes={setAttributes}
2939	units={["px", "%", "em"]}
2940	defaultValue={{
2941	unit: "px",
2942	value: 8,
2943	}}
2944	pro={true}
2945	/>
2946	</>
2947	)}
2948	</>
2949	)}
2950
2951	<InputControl
2952	label={__("Button Link", "post-carousel")}
2953	attributes={buttonLink}
2954	flex={false}
2955	inputType="text"
2956	attributesKey={"buttonLink"}
2957	setAttributes={setAttributes}
2958	onChange={handleButtonLink}
2959	placeholder={__("#", "post-carousel")}
2960	/>
2961	<Toggle
2962	label={__("Open In a New Tab", "post-carousel")}
2963	attributes={openNewTab}
2964	attributesKey={"openNewTab"}
2965	setAttributes={setAttributes}
2966	/>
2967	</>
2968	)}
2969
2970	<ProInfo>
2971	<h3>Premium Only</h3>
2972	<h4>Enhance your buttons with customizable icons</h4>
2973	<ul>
2974	<li>
2975	— Add icons to buttons
2976	</li>
2977	<li>
2978	— Icon size and spacing control
2979	</li>
2980	<li>
2981	— Flexible icon positioning
2982	</li>
2983	<li>
2984	— Normal and hover color styling
2985	</li>
2986	</ul>
2987	<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a>
2988	</ProInfo>
2989	</>
2990	);
2991	};
2992	export const CallToActionStyleTab = ({ attributes, setAttributes }) => {
2993	const {
2994	caBorderRadius,
2995	caHoverBorderStyle,
2996	caHoverBorderStyleWidth,
2997	caPadding,
2998	caMargin,
2999	caIconColor,
3000	cABg,
3001	cATypography,
3002	caRadialShape,
3003	cAFontSize,
3004	cALatterSpacing,
3005	caHoverRadialPosition,
3006	cALineHeight,
3007	cAOverlayColor,
3008	externalLinkIconColor,
3009	caRadialPosition,
3010	cAOverlayOpacity,
3011	caHoverRadialShape,
3012	linkingType,
3013	caBorderStyle,
3014	caBorderStyleWidth,
3015	caHoverBorderRadius,
3016	callActionEnable,
3017	cAWordSpacing,
3018	callToActionGlobalTypography,
3019	} = attributes;
3020
3021	const [caStyleType, setCaStyleType] = useState("color");
3022	return (
3023	<>
3024	{callActionEnable && (
3025	<>
3026	{linkingType === "fullBox" && (
3027	<>
3028	<SpColorPicker
3029	label={__("Overlay Color", "post-carousel")}
3030	value={cAOverlayColor}
3031	onChange={(newColor) =>
3032	setAttributes({
3033	cAOverlayColor: newColor,
3034	})
3035	}
3036	defaultColor="#333333"
3037	/>
3038	<SPRangeControl
3039	label={__("Overlay Opacity", "post-carousel")}
3040	attributes={cAOverlayOpacity}
3041	attributesKey={"cAOverlayOpacity"}
3042	setAttributes={setAttributes}
3043	max={1}
3044	step={0.1}
3045	/>
3046
3047	<SpColorPicker
3048	label={__("External Link Icon Color", "post-carousel")}
3049	value={externalLinkIconColor}
3050	onChange={(newColor) =>
3051	setAttributes({
3052	externalLinkIconColor: newColor,
3053	})
3054	}
3055	defaultColor="#fff"
3056	/>
3057	</>
3058	)}
3059
3060	{linkingType !== "fullBox" && (
3061	<>
3062	<TypographyNew
3063	attributes={{
3064	family: cATypography,
3065	familyKey: "cATypography",
3066	fontSize: cAFontSize,
3067	fontSizeKey: "cAFontSize",
3068	fontSpacing: cALatterSpacing,
3069	fontSpacingKey: "cALatterSpacing",
3070	lineHeight: cALineHeight,
3071	lineHeightKey: "cALineHeight",
3072	wordSpacing: cAWordSpacing,
3073	wordSpacingKey: "cAWordSpacing",
3074	globalTypo: callToActionGlobalTypography,
3075	globalTypoKey: "callToActionGlobalTypography",
3076	}}
3077	setAttributes={setAttributes}
3078	spacingDefaultValue={{ unit: "px", value: 0 }}
3079	fontSizeDefault={{
3080	unit: "px",
3081	value: 14,
3082	}}
3083	lineDefaultValue={{ unit: "%", value: 120 }}
3084	typographyLabel={__("Typography", "post-carousel")}
3085	/>
3086
3087	<SPToggleGroupControl
3088	attributes={caStyleType}
3089	items={[
3090	{
3091	label: __("Normal", "post-carousel"),
3092	value: "color",
3093	},
3094	{
3095	label: __("Hover", "post-carousel"),
3096	value: "hover",
3097	},
3098	]}
3099	onClick={(val) => setCaStyleType(val)}
3100	/>
3101
3102	{caStyleType === "color" && (
3103	<>
3104	{(linkingType === "button" \|\| linkingType === "text") && (
3105	<SpColorPicker
3106	label={__("Color", "post-carousel")}
3107	value={caIconColor.color}
3108	onChange={(newColor) =>
3109	setAttributes({
3110	caIconColor: {
3111	...caIconColor,
3112	color: newColor,
3113	},
3114	})
3115	}
3116	defaultColor="#2F2F2F"
3117	/>
3118	)}
3119
3120	{linkingType === "button" && (
3121	<>
3122	<Background
3123	label={__("Background Type", "post-carousel")}
3124	colorLabel="Solid Color"
3125	defaultColor="#E0E0E0"
3126	attributes={cABg}
3127	attributesKey={"cABg"}
3128	setAttributes={setAttributes}
3129	colorType={caStyleType}
3130	items={[
3131	{
3132	label: <BgIcon />,
3133	value: "bgColor",
3134	tooltip: __("Solid", "post-carousel"),
3135	},
3136	{
3137	label: <GradientIcon />,
3138	value: "gradient",
3139	tooltip: __("Gradient", "post-carousel"),
3140	},
3141	]}
3142	/>
3143	{cABg[caStyleType]?.style === "gradient" && (
3144	<>
3145	{/^radial-gradient/.test(cABg[caStyleType]?.gradient) && (
3146	<>
3147	<SelectField
3148	attributes={caRadialShape}
3149	attributesKey={"caRadialShape"}
3150	setAttributes={setAttributes}
3151	items={[
3152	{
3153	label: __("Circle", "post-carousel"),
3154	value: "circle",
3155	},
3156	{
3157	label: __("Ellipse", "post-carousel"),
3158	value: "ellipse",
3159	},
3160	]}
3161	/>
3162	<SelectField
3163	attributes={caRadialPosition}
3164	attributesKey={"caRadialPosition"}
3165	setAttributes={setAttributes}
3166	items={[
3167	{
3168	label: __(
3169	"Center Center",
3170	"post-carousel"
3171	),
3172	value: "center center",
3173	},
3174	{
3175	label: __("Center Left", "post-carousel"),
3176	value: "center left",
3177	},
3178	{
3179	label: __(
3180	"Center Right",
3181	"post-carousel"
3182	),
3183	value: "center right",
3184	},
3185	{
3186	label: __("Top Center", "post-carousel"),
3187	value: "top center",
3188	},
3189	{
3190	label: __("Top Left", "post-carousel"),
3191	value: "top left",
3192	},
3193	{
3194	label: __("Top Right", "post-carousel"),
3195	value: "top right",
3196	},
3197	{
3198	label: __(
3199	"Bottom Center",
3200	"post-carousel"
3201	),
3202	value: "bottom center",
3203	},
3204	{
3205	label: __("Bottom Left", "post-carousel"),
3206	value: "bottom left",
3207	},
3208	{
3209	label: __(
3210	"Bottom Right",
3211	"post-carousel"
3212	),
3213	value: "bottom right",
3214	},
3215	]}
3216	/>
3217	</>
3218	)}
3219	</>
3220	)}
3221	<Border
3222	attributes={{
3223	border: caBorderStyle,
3224	borderWidth: caBorderStyleWidth,
3225	}}
3226	setAttributes={setAttributes}
3227	attributesKey={{
3228	border: "caBorderStyle",
3229	borderWidth: "caBorderStyleWidth",
3230	}}
3231	btnType="normal"
3232	/>
3233	<Spacing
3234	label={__("Border Radius", "post-carousel")}
3235	attributes={caBorderRadius}
3236	attributesKey={"caBorderRadius"}
3237	setAttributes={setAttributes}
3238	units={["Px", "%", "em"]}
3239	defaultValue={{
3240	unit: "px",
3241	value: {
3242	top: "0",
3243	right: "0",
3244	bottom: "0",
3245	left: "0",
3246	},
3247	}}
3248	indicator={"radius"}
3249	/>
3250	</>
3251	)}
3252	</>
3253	)}
3254	{caStyleType === "hover" && (
3255	<>
3256	{(linkingType === "button" \|\| linkingType === "text") && (
3257	<SpColorPicker
3258	label={__("Hover Color", "post-carousel")}
3259	value={caIconColor.hoverColor}
3260	onChange={(newColor) =>
3261	setAttributes({
3262	caIconColor: {
3263	...caIconColor,
3264	hoverColor: newColor,
3265	},
3266	})
3267	}
3268	defaultColor="#2F2F2F"
3269	/>
3270	)}
3271
3272	{linkingType === "button" && (
3273	<>
3274	<Background
3275	label={__("Background Type", "post-carousel")}
3276	colorLabel="Solid Color"
3277	defaultColor="#E0E0E0"
3278	attributes={cABg}
3279	attributesKey={"cABg"}
3280	setAttributes={setAttributes}
3281	colorType={caStyleType}
3282	items={[
3283	{
3284	label: <BgIcon />,
3285	value: "bgColor",
3286	tooltip: __("Solid", "post-carousel"),
3287	},
3288	{
3289	label: <GradientIcon />,
3290	value: "gradient",
3291	tooltip: __("Gradient", "post-carousel"),
3292	},
3293	]}
3294	/>
3295	{cABg[caStyleType]?.style === "gradient" && (
3296	<>
3297	{/^radial-gradient/.test(cABg[caStyleType]?.gradient) && (
3298	<>
3299	<SelectField
3300	attributes={caHoverRadialShape}
3301	attributesKey={"caHoverRadialShape"}
3302	setAttributes={setAttributes}
3303	items={[
3304	{
3305	label: __("Circle", "post-carousel"),
3306	value: "circle",
3307	},
3308	{
3309	label: __("Ellipse", "post-carousel"),
3310	value: "ellipse",
3311	},
3312	]}
3313	/>
3314	<SelectField
3315	attributes={caHoverRadialPosition}
3316	attributesKey={"caHoverRadialPosition"}
3317	setAttributes={setAttributes}
3318	items={[
3319	{
3320	label: __(
3321	"Center Center",
3322	"post-carousel"
3323	),
3324	value: "center center",
3325	},
3326	{
3327	label: __("Center Left", "post-carousel"),
3328	value: "center left",
3329	},
3330	{
3331	label: __(
3332	"Center Right",
3333	"post-carousel"
3334	),
3335	value: "center right",
3336	},
3337	{
3338	label: __("Top Center", "post-carousel"),
3339	value: "top center",
3340	},
3341	{
3342	label: __("Top Left", "post-carousel"),
3343	value: "top left",
3344	},
3345	{
3346	label: __("Top Right", "post-carousel"),
3347	value: "top right",
3348	},
3349	{
3350	label: __(
3351	"Bottom Center",
3352	"post-carousel"
3353	),
3354	value: "bottom center",
3355	},
3356	{
3357	label: __("Bottom Left", "post-carousel"),
3358	value: "bottom left",
3359	},
3360	{
3361	label: __(
3362	"Bottom Right",
3363	"post-carousel"
3364	),
3365	value: "bottom right",
3366	},
3367	]}
3368	/>
3369	</>
3370	)}
3371	</>
3372	)}
3373	<Border
3374	attributes={{
3375	border: caHoverBorderStyle,
3376	borderWidth: caHoverBorderStyleWidth,
3377	}}
3378	setAttributes={setAttributes}
3379	attributesKey={{
3380	border: "caHoverBorderStyle",
3381	borderWidth: "caHoverBorderStyleWidth",
3382	}}
3383	btnType="normal"
3384	/>
3385	<Spacing
3386	label={__("Border Radius", "post-carousel")}
3387	attributes={caHoverBorderRadius}
3388	attributesKey={"caHoverBorderRadius"}
3389	setAttributes={setAttributes}
3390	units={["Px", "%", "em"]}
3391	defaultValue={{
3392	unit: "px",
3393	value: {
3394	top: "0",
3395	right: "0",
3396	bottom: "0",
3397	left: "0",
3398	},
3399	}}
3400	indicator={"radius"}
3401	/>
3402	</>
3403	)}
3404	</>
3405	)}
3406
3407	{linkingType === "button" && (
3408	<Spacing
3409	label={__("Padding", "post-carousel")}
3410	attributes={caPadding}
3411	attributesKey={"caPadding"}
3412	setAttributes={setAttributes}
3413	units={["Px", "%", "em"]}
3414	defaultValue={{
3415	unit: "px",
3416	value: {
3417	top: "12",
3418	right: "22",
3419	bottom: "12",
3420	left: "22",
3421	},
3422	}}
3423	/>
3424	)}
3425	<Spacing
3426	label={__("Margin", "post-carousel")}
3427	attributes={caMargin}
3428	attributesKey={"caMargin"}
3429	setAttributes={setAttributes}
3430	units={["Px", "%", "em"]}
3431	defaultValue={{
3432	unit: "px",
3433	value: {
3434	top: "8",
3435	right: "0",
3436	bottom: "8",
3437	left: "0",
3438	},
3439	}}
3440	/>
3441	</>
3442	)}
3443	</>
3444	)}
3445	</>
3446	);
3447	};
3448	export const SeparatorTab = ({ attributes, setAttributes }) => {
3449	const {
3450	separatorWidth,
3451	separatorThinkness,
3452	separatorEnable,
3453	separatorStyle,
3454	separatorPosition,
3455	separatorColor,
3456	infoBoxLayout,
3457	separatorMargin,
3458	} = attributes;
3459
3460	const separatorItems =
3461	infoBoxLayout === "smart-info-box-layout-four"
3462	? [
3463	{
3464	label: __("After Title", "post-carousel"),
3465	value: "after-title",
3466	},
3467	{
3468	label: __("After Description", "post-carousel"),
3469	value: "after-description",
3470	},
3471	]
3472	: [
3473	{
3474	label: __("After Title", "post-carousel"),
3475	value: "after-title",
3476	},
3477	{
3478	label: __("After Description", "post-carousel"),
3479	value: "after-description",
3480	},
3481	{
3482	label: __("After Call to Action", "post-carousel"),
3483	value: "after-call-Action",
3484	},
3485	];
3486
3487	return (
3488	<>
3489	<Toggle
3490	label={__("Separator", "post-carousel")}
3491	attributes={separatorEnable}
3492	attributesKey={"separatorEnable"}
3493	setAttributes={setAttributes}
3494	pro={true}
3495	/>
3496	{separatorEnable && (
3497	<>
3498	<SelectField
3499	label={__("Style", "post-carousel")}
3500	attributes={separatorStyle}
3501	attributesKey={"separatorStyle"}
3502	setAttributes={setAttributes}
3503	items={[
3504	{
3505	label: __("Solid", "post-carousel"),
3506	value: "solid ",
3507	},
3508	{
3509	label: __("Double", "post-carousel"),
3510	value: "double",
3511	},
3512	{
3513	label: __("Dashed", "post-carousel"),
3514	value: "dashed",
3515	},
3516	{
3517	label: __("Dotted", "post-carousel"),
3518	value: "dotted",
3519	},
3520	]}
3521	/>
3522
3523	<SelectField
3524	label={__("Position", "post-carousel")}
3525	attributes={separatorPosition}
3526	attributesKey={"separatorPosition"}
3527	setAttributes={setAttributes}
3528	items={separatorItems}
3529	/>
3530
3531	<SPRangeControl
3532	label={__("Width", "post-carousel")}
3533	attributes={separatorWidth}
3534	attributesKey={"separatorWidth"}
3535	setAttributes={setAttributes}
3536	units={["px", "%", "em"]}
3537	defaultValue={{ unit: "px", value: 60 }}
3538	max={1000}
3539	/>
3540
3541	<SPRangeControl
3542	label={__("Thickness", "post-carousel")}
3543	attributes={separatorThinkness}
3544	attributesKey={"separatorThinkness"}
3545	setAttributes={setAttributes}
3546	units={["px", "em"]}
3547	defaultValue={{ unit: "px", value: 3 }}
3548	max={15}
3549	/>
3550
3551	<SpColorPicker
3552	label={__("Color", "post-carousel")}
3553	value={separatorColor}
3554	onChange={(newColor) => setAttributes({ separatorColor: newColor })}
3555	defaultColor="#ddd"
3556	/>
3557
3558	<Spacing
3559	label={__("Margin", "post-carousel")}
3560	attributes={separatorMargin}
3561	attributesKey={"separatorMargin"}
3562	setAttributes={setAttributes}
3563	units={["Px", "%", "em"]}
3564	defaultValue={{
3565	unit: "px",
3566	value: {
3567	top: "8",
3568	right: "0",
3569	bottom: "0",
3570	left: "0",
3571	},
3572	}}
3573	/>
3574	</>
3575	)}
3576	</>
3577	);
3578	};
3579