PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7
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 / smart-search / styleTab.js

styleTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/smart-search/styleTab.js

892 lines 23.2 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 Spacing,
8 SpColorPicker,
9 SPRangeControl,
10 SPToggleGroupControl,
11 Toggle,
12 TypographyNew,
13 } from "../../components";
14 import { Fragment, useState } from "@wordpress/element";
15 import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon";
16
17 export const PresetStyleTab = ({ attributes, setAttributes }) => {
18 const {
19 inputPlaceholderTypography,
20 inputPlaceholderFontSize,
21 inputPlaceholderLatterSpacing,
22 inputPlaceholderWordSpacing,
23 inputPlaceholderLineHeight,
24 inputPlaceholderColor,
25 searchFormBgColor,
26 searchFormBorder,
27 searchFormBorderWidth,
28 searchFormHoverBorder,
29 searchFormHoverBorderWidth,
30 searchFormBorderRadius,
31 searchFormHoverBorderRadius,
32 searchFormPadding,
33 searchFormWidth,
34 searchFormHeight,
35 inputPlaceHolderGlobalTypography,
36 } = attributes;
37 const [colorState, setColorState] = useState("color");
38
39 return (
40 <>
41 <TypographyNew
42 attributes={{
43 family: inputPlaceholderTypography,
44 familyKey: "inputPlaceholderTypography",
45 fontSize: inputPlaceholderFontSize,
46 fontSizeKey: "inputPlaceholderFontSize",
47 fontSpacing: inputPlaceholderLatterSpacing,
48 fontSpacingKey: "inputPlaceholderLatterSpacing",
49 lineHeight: inputPlaceholderLineHeight,
50 lineHeightKey: "inputPlaceholderLineHeight",
51 wordSpacing: inputPlaceholderWordSpacing,
52 wordSpacingKey: "inputPlaceholderWordSpacing",
53 globalTypo: inputPlaceHolderGlobalTypography,
54 globalTypoKey: "inputPlaceHolderGlobalTypography",
55 }}
56 setAttributes={setAttributes}
57 spacingDefaultValue={{ unit: "px", value: 0 }}
58 fontSizeDefault={{
59 unit: "px",
60 value: 14,
61 }}
62 typographyLabel={__("Placeholder Typography", "post-carousel")}
63 />
64 <SPToggleGroupControl
65 attributes={colorState}
66 attributesKey={"colorState"}
67 onClick={(newValue) => setColorState(newValue)}
68 items={[
69 { label: "Normal", value: "color" },
70 { label: "Hover & Focus", value: "hover" },
71 ]}
72 />
73 <Background
74 label={__("Background Type", "post-carousel")}
75 attributes={searchFormBgColor}
76 attributesKey={"searchFormBgColor"}
77 setAttributes={setAttributes}
78 colorType={colorState}
79 items={[
80 {
81 label: <BgIcon />,
82 value: "bgColor",
83 tooltip: "Solid",
84 },
85 {
86 label: <GradientIcon />,
87 value: "gradient",
88 tooltip: "Gradient",
89 },
90 ]}
91 />
92 {"color" === colorState ? (
93 <Fragment key={colorState}>
94 <SpColorPicker
95 label={__("Placeholder Color", "post-carousel")}
96 value={inputPlaceholderColor.color}
97 onChange={(newValue) =>
98 setAttributes({
99 inputPlaceholderColor: {
100 ...inputPlaceholderColor,
101 color: newValue,
102 },
103 })
104 }
105 />
106
107 <Border
108 attributes={{
109 border: searchFormBorder,
110 borderWidth: searchFormBorderWidth,
111 }}
112 attributesKey={{
113 border: "searchFormBorder",
114 borderWidth: "searchFormBorderWidth",
115 }}
116 setAttributes={setAttributes}
117 btnType={"normal"}
118 />
119
120 <Spacing
121 label={__("Border Radius", "post-carousel")}
122 attributes={searchFormBorderRadius}
123 attributesKey={"searchFormBorderRadius"}
124 setAttributes={setAttributes}
125 units={["px", "%", "em"]}
126 defaultValue={{
127 unit: "%",
128 value: { top: 0, right: 0, bottom: 0, left: 0 },
129 }}
130 indicator={"radius"}
131 />
132 </Fragment>
133 ) : (
134 <Fragment key={colorState}>
135 <SpColorPicker
136 label={__("Hover Placeholder Color", "post-carousel")}
137 value={inputPlaceholderColor.hoverColor}
138 onChange={(newValue) =>
139 setAttributes({
140 inputPlaceholderColor: {
141 ...inputPlaceholderColor,
142 hoverColor: newValue,
143 },
144 })
145 }
146 />
147 <Border
148 attributes={{
149 border: searchFormHoverBorder,
150 borderWidth: searchFormHoverBorderWidth,
151 }}
152 attributesKey={{
153 border: "searchFormHoverBorder",
154 borderWidth: "searchFormHoverBorderWidth",
155 }}
156 setAttributes={setAttributes}
157 btnType={"normal"}
158 />
159 <Spacing
160 label={__("Hover Border Radius", "post-carousel")}
161 attributes={searchFormHoverBorderRadius}
162 attributesKey={"searchFormHoverBorderRadius"}
163 setAttributes={setAttributes}
164 units={["px", "%", "em"]}
165 defaultValue={{
166 unit: "%",
167 value: { top: 0, right: 0, bottom: 0, left: 0 },
168 }}
169 indicator={"radius"}
170 />
171 </Fragment>
172 )}
173 <Divider position="sp-w-100pct" />
174 <Spacing
175 label={__("Padding", "post-carousel")}
176 attributes={searchFormPadding}
177 attributesKey={"searchFormPadding"}
178 setAttributes={setAttributes}
179 units={["px", "%", "em"]}
180 defaultValue={{
181 unit: "px",
182 value: {
183 top: 10,
184 right: 12,
185 bottom: 10,
186 left: 12,
187 },
188 }}
189 />
190 </>
191 );
192 };
193 export const SearchButtonStyleTab = ({ attributes, setAttributes }) => {
194 const {
195 searchButtonIconColor,
196 searchIcon,
197 searchIconDivider,
198 searchBtnLabelTextColor,
199 searchBtnLabel,
200 searchBtnBgColor,
201 searchFormPreset,
202 searchButtonBorderRadius,
203 searchButtonBorder,
204 searchButtonBorderWidth,
205 searchButtonPadding,
206 gapWithIcon,
207 gapWithSearchField,
208 searchBtnLabelTypography,
209 searchBtnLabelFontSize,
210 searchIconDividerColor,
211 searchBtnLabelLineHeight,
212 searchButtonHoverBorder,
213 searchButtonHoverBorderWidth,
214 } = attributes;
215 const [colorState, setColorState] = useState("color");
216
217 return (
218 <>
219 {searchBtnLabel &&
220 [
221 "smart-search-form-preset-three",
222 "smart-search-form-preset-four",
223 "smart-search-form-preset-five",
224 ].includes(searchFormPreset) && (
225 <TypographyNew
226 attributes={{
227 family: searchBtnLabelTypography,
228 familyKey: "searchBtnLabelTypography",
229 fontSize: searchBtnLabelFontSize,
230 fontSizeKey: "searchBtnLabelFontSize",
231 lineHeight: searchBtnLabelLineHeight,
232 lineHeightKey: "searchBtnLabelLineHeight",
233 }}
234 setAttributes={setAttributes}
235 spacingDefaultValue={{ unit: "px", value: 0 }}
236 fontSizeDefault={{
237 unit: "px",
238 value: 14,
239 }}
240 lineDefaultValue={{ unit: "px", value: 27.5 }}
241 typographyLabel={__("Typography", "post-carousel")}
242 />
243 )}
244 <SPToggleGroupControl
245 attributes={colorState}
246 attributesKey={"colorState"}
247 onClick={(newValue) => setColorState(newValue)}
248 items={[
249 { label: "Normal", value: "color" },
250 { label: "Hover", value: "hoverColor" },
251 ]}
252 />
253 {searchIcon && (
254 <SpColorPicker
255 label={colorState === "hoverColor" ? "Hover Icon Color" : "Icon Color"}
256 value={searchButtonIconColor[colorState]}
257 onChange={(newValue) =>
258 setAttributes({
259 searchButtonIconColor: {
260 ...searchButtonIconColor,
261 [colorState]: newValue,
262 },
263 })
264 }
265 />
266 )}
267 {searchIconDivider && "smart-search-form-preset-one" === searchFormPreset && (
268 <SpColorPicker
269 label={colorState === "hoverColor" ? "Hover Divider Color" : "Divider Color"}
270 value={searchIconDividerColor[colorState]}
271 onChange={(newValue) =>
272 setAttributes({
273 searchIconDividerColor: {
274 ...searchIconDividerColor,
275 [colorState]: newValue,
276 },
277 })
278 }
279 />
280 )}
281
282 {[
283 "smart-search-form-preset-three",
284 "smart-search-form-preset-four",
285 "smart-search-form-preset-five",
286 ].includes(searchFormPreset) && (
287 <>
288 {searchBtnLabel && (
289 <SpColorPicker
290 label={colorState === "hoverColor" ? "Hover Label Color" : "Label Color"}
291 value={searchBtnLabelTextColor[colorState]}
292 onChange={(newValue) =>
293 setAttributes({
294 searchBtnLabelTextColor: {
295 ...searchBtnLabelTextColor,
296 [colorState]: newValue,
297 },
298 })
299 }
300 />
301 )}
302 <Background
303 label={colorState === "hoverColor" ? "Hover Background Type" : "Background Type"}
304 attributes={searchBtnBgColor}
305 attributesKey={"searchBtnBgColor"}
306 setAttributes={setAttributes}
307 colorType={colorState === "hoverColor" ? "hover" : "color"}
308 items={[
309 {
310 label: <TransparentIcon />,
311 value: "transparent",
312 tooltip: "Transparent",
313 },
314 {
315 label: <BgIcon />,
316 value: "bgColor",
317 tooltip: "Solid",
318 },
319 {
320 label: <GradientIcon />,
321 value: "gradient",
322 tooltip: "Gradient",
323 },
324 ]}
325 />
326 {colorState === "color" ? (
327 <Border
328 attributes={{
329 border: searchButtonBorder,
330 borderWidth: searchButtonBorderWidth,
331 }}
332 attributesKey={{
333 border: "searchButtonBorder",
334 borderWidth: "searchButtonBorderWidth",
335 }}
336 setAttributes={setAttributes}
337 btnType={"normal"}
338 />
339 ) : (
340 <Border
341 attributes={{
342 border: searchButtonHoverBorder,
343 borderWidth: searchButtonHoverBorderWidth,
344 }}
345 attributesKey={{
346 border: "searchButtonHoverBorder",
347 borderWidth: "searchButtonHoverBorderWidth",
348 }}
349 setAttributes={setAttributes}
350 btnType={"normal"}
351 />
352 )}
353
354 <Spacing
355 label={__("Border Radius", "post-carousel")}
356 attributes={searchButtonBorderRadius}
357 attributesKey={"searchButtonBorderRadius"}
358 setAttributes={setAttributes}
359 units={["px", "%", "em"]}
360 defaultValue={{
361 unit: "%",
362 value: { top: 0, right: 0, bottom: 0, left: 0 },
363 }}
364 indicator={"radius"}
365 />
366 {searchIcon && searchBtnLabel && (
367 <SPRangeControl
368 label={__("Gap With Icon", "post-carousel")}
369 attributes={gapWithIcon}
370 attributesKey={"gapWithIcon"}
371 setAttributes={setAttributes}
372 max={50}
373 units={["px", "%", "em"]}
374 defaultValue={{ unit: "px", value: 20 }}
375 />
376 )}
377 {"smart-search-form-preset-four" === searchFormPreset && (
378 <SPRangeControl
379 label={__("Gap With Search Field", "post-carousel")}
380 attributes={gapWithSearchField}
381 attributesKey={"gapWithSearchField"}
382 setAttributes={setAttributes}
383 max={50}
384 units={["px", "%", "em"]}
385 defaultValue={{ unit: "px", value: 20 }}
386 />
387 )}
388 <Spacing
389 label={__("Padding", "post-carousel")}
390 attributes={searchButtonPadding}
391 attributesKey={"searchButtonPadding"}
392 setAttributes={setAttributes}
393 units={["px", "%", "em"]}
394 defaultValue={{
395 unit: "px",
396 value: {
397 top: 10,
398 right: 12,
399 bottom: 10,
400 left: 12,
401 },
402 }}
403 />
404 </>
405 )}
406 </>
407 );
408 };
409
410 export const SearchResultStyleTab = ({ attributes, setAttributes }) => {
411 const {
412 searchResultTitleTypography,
413 searchResultTitleFontSize,
414 searchResultTitleLineHeight,
415 searchResultMetaTypography,
416 searchResultMetaFontSize,
417 searchResultMetaLineHeight,
418 searchResultTitleColor,
419 searchResultMetaColor,
420 searchResultHighlightColor,
421 searchResultItemSeparatorColor,
422 searchResultBoxBackground,
423 searchResultBoxBorder,
424 searchResultHoverBoxBorder,
425 searchResultBoxBorderWidth,
426 searchResultHoverBoxBorderWidth,
427 searchResultBoxBorderRadius,
428 searchResultBoxHoverBorderRadius,
429 searchResultBoxPadding,
430 searchResultImgBorderRadius,
431 searchResultTitleGlobalTypography,
432 searchResultMetaGlobalTypography,
433 } = attributes;
434 const [colorState, setColorState] = useState("color");
435
436 return (
437 <>
438 <TypographyNew
439 attributes={{
440 family: searchResultTitleTypography,
441 familyKey: "searchResultTitleTypography",
442 fontSize: searchResultTitleFontSize,
443 fontSizeKey: "searchResultTitleFontSize",
444 lineHeight: searchResultTitleLineHeight,
445 lineHeightKey: "searchResultTitleLineHeight",
446 globalTypo: searchResultTitleGlobalTypography,
447 globalTypoKey: "searchResultTitleGlobalTypography",
448 }}
449 setAttributes={setAttributes}
450 spacingDefaultValue={{ unit: "px", value: 0 }}
451 fontSizeDefault={{
452 unit: "px",
453 value: 18,
454 }}
455 lineDefaultValue={{ unit: "px", value: 20 }}
456 typographyLabel={__("Title Typography", "post-carousel")}
457 />
458 <TypographyNew
459 typographyLabel={__("Meta Typography", "post-carousel")}
460 attributes={{
461 family: searchResultMetaTypography,
462 familyKey: "searchResultMetaTypography",
463 fontSize: searchResultMetaFontSize,
464 fontSizeKey: "searchResultMetaFontSize",
465 lineHeight: searchResultMetaLineHeight,
466 lineHeightKey: "searchResultMetaLineHeight",
467 globalTypo: searchResultMetaGlobalTypography,
468 globalTypoKey: "searchResultMetaGlobalTypography",
469 }}
470 setAttributes={setAttributes}
471 spacingDefaultValue={{ unit: "px", value: 0 }}
472 fontSizeDefault={{
473 unit: "px",
474 value: 14,
475 }}
476 lineDefaultValue={{ unit: "px", value: 16 }}
477 />
478 <SPToggleGroupControl
479 attributes={colorState}
480 attributesKey={"colorState"}
481 onClick={(newValue) => setColorState(newValue)}
482 items={[
483 { label: "Normal", value: "color" },
484 { label: "Hover", value: "hoverColor" },
485 ]}
486 />
487 <SpColorPicker
488 label={colorState === "hoverColor" ? "Hover Title Color" : "Title Color"}
489 value={searchResultTitleColor[colorState]}
490 onChange={(newValue) =>
491 setAttributes({
492 searchResultTitleColor: {
493 ...searchResultTitleColor,
494 [colorState]: newValue,
495 },
496 })
497 }
498 />
499 <SpColorPicker
500 label={colorState === "hoverColor" ? "Hover Meta Color" : "Meta Color"}
501 value={searchResultMetaColor[colorState]}
502 onChange={(newValue) =>
503 setAttributes({
504 searchResultMetaColor: {
505 ...searchResultMetaColor,
506 [colorState]: newValue,
507 },
508 })
509 }
510 />
511 <SpColorPicker
512 label={
513 colorState === "hoverColor" ? "Hover Highlight Search Term Color" : "Highlight Search Term Color"
514 }
515 value={searchResultHighlightColor[colorState]}
516 onChange={(newValue) =>
517 setAttributes({
518 searchResultHighlightColor: {
519 ...searchResultHighlightColor,
520 [colorState]: newValue,
521 },
522 })
523 }
524 />
525 <SpColorPicker
526 label={colorState === "hoverColor" ? "Hover Item Separator Color" : "Item Separator Color"}
527 value={searchResultItemSeparatorColor[colorState]}
528 onChange={(newValue) =>
529 setAttributes({
530 searchResultItemSeparatorColor: {
531 ...searchResultItemSeparatorColor,
532 [colorState]: newValue,
533 },
534 })
535 }
536 />
537 <Background
538 label={colorState === "hoverColor" ? "Hover Area Background Type" : "Area Background Type"}
539 attributes={searchResultBoxBackground}
540 attributesKey={"searchResultBoxBackground"}
541 setAttributes={setAttributes}
542 colorType={colorState === "hoverColor" ? "hover" : "color"}
543 items={[
544 {
545 label: <BgIcon />,
546 value: "bgColor",
547 tooltip: "Solid",
548 },
549 {
550 label: <GradientIcon />,
551 value: "gradient",
552 tooltip: "Gradient",
553 },
554 ]}
555 />
556 {colorState === "color" ? (
557 <>
558 <Border
559 label={__("Area Border", "post-carousel")}
560 attributes={{
561 border: searchResultBoxBorder,
562 borderWidth: searchResultBoxBorderWidth,
563 }}
564 attributesKey={{
565 border: "searchResultBoxBorder",
566 borderWidth: "searchResultBoxBorderWidth",
567 }}
568 setAttributes={setAttributes}
569 btnType={"normal"}
570 />
571 <Spacing
572 label={__("Area Border Radius", "post-carousel")}
573 attributes={searchResultBoxBorderRadius}
574 attributesKey={"searchResultBoxBorderRadius"}
575 setAttributes={setAttributes}
576 units={["px", "%", "em"]}
577 />
578 </>
579 ) : (
580 <>
581 <Border
582 label={__("Hover Area Border", "post-carousel")}
583 attributes={{
584 border: searchResultHoverBoxBorder,
585 borderWidth: searchResultHoverBoxBorderWidth,
586 }}
587 attributesKey={{
588 border: "searchResultHoverBoxBorder",
589 borderWidth: "searchResultHoverBoxBorderWidth",
590 }}
591 setAttributes={setAttributes}
592 btnType={"normal"}
593 />
594 <Spacing
595 label={__("Hover Area Border Radius", "post-carousel")}
596 attributes={searchResultBoxHoverBorderRadius}
597 attributesKey={"searchResultBoxHoverBorderRadius"}
598 setAttributes={setAttributes}
599 units={["px", "%", "em"]}
600 />
601 </>
602 )}
603 <Spacing
604 label={__("Image Border Radius", "post-carousel")}
605 attributes={searchResultImgBorderRadius}
606 attributesKey={"searchResultImgBorderRadius"}
607 setAttributes={setAttributes}
608 units={["px", "%", "em"]}
609 />
610 <Spacing
611 label={__("Padding", "post-carousel")}
612 attributes={searchResultBoxPadding}
613 attributesKey={"searchResultBoxPadding"}
614 setAttributes={setAttributes}
615 units={["px", "%", "em"]}
616 />
617 </>
618 );
619 };
620 export const MoreResultStyleTab = ({ attributes, setAttributes }) => {
621 const {
622 moreResultTypography,
623 moreResultFontSize,
624 moreResultLineHeight,
625 moreResultGlobalTypography,
626 moreResultColor,
627 moreResultLatterSpacing,
628 moreResultWordSpacing,
629 } = attributes;
630 const [colorState, setColorState] = useState("color");
631
632 return (
633 <>
634 <TypographyNew
635 attributes={{
636 family: moreResultTypography,
637 familyKey: "moreResultTypography",
638 fontSize: moreResultFontSize,
639 fontSizeKey: "moreResultFontSize",
640 lineHeight: moreResultLineHeight,
641 lineHeightKey: "moreResultLineHeight",
642 letterSpacing: moreResultLatterSpacing,
643 letterSpacingKey: "moreResultLatterSpacing",
644 wordSpacing: moreResultWordSpacing,
645 wordSpacingKey: "moreResultWordSpacing",
646 globalTypo: moreResultGlobalTypography,
647 globalTypoKey: "moreResultGlobalTypography",
648 }}
649 setAttributes={setAttributes}
650 spacingDefaultValue={{ unit: "px", value: 0 }}
651 fontSizeDefault={{
652 unit: "px",
653 value: 14,
654 }}
655 lineDefaultValue={1.2}
656 typographyLabel={__("Typography", "post-carousel")}
657 />
658
659 <SPToggleGroupControl
660 attributes={colorState}
661 attributesKey={"colorState"}
662 onClick={(newValue) => setColorState(newValue)}
663 items={[
664 { label: "Normal", value: "color" },
665 { label: "Hover", value: "hoverColor" },
666 ]}
667 />
668 <SpColorPicker
669 label={colorState === "hoverColor" ? "Hover Color" : "Color"}
670 value={moreResultColor[colorState]}
671 onChange={(newValue) =>
672 setAttributes({
673 moreResultColor: {
674 ...moreResultColor,
675 [colorState]: newValue,
676 },
677 })
678 }
679 />
680 </>
681 );
682 };
683 export const PopupCanvasStyleTab = ({ attributes, setAttributes }) => {
684 const {
685 popupHeadingTypography,
686 popupHeadingFontSize,
687 popupCloseIconColor,
688 popupHeadingLineHeight,
689 popupCanvasBorder,
690 popupHeadingLatterSpacing,
691 popupHeadingWordSpacing,
692 popupHeadingGlobalTypography,
693 popupHeadingColor,
694 popupCanvasBgColor,
695 popupCanvasBorderWidth,
696 popupCanvasHoverBorder,
697 popupCanvasHoverBorderWidth,
698 popupCanvasBorderRadius,
699 popupCanvasPadding,
700 popupCanvasBoxShadowEnable,
701 popupCanvasBoxShadowValue,
702 popupCanvasMargin,
703 } = attributes;
704 const [colorState, setColorState] = useState("color");
705
706 return (
707 <>
708 <TypographyNew
709 attributes={{
710 family: popupHeadingTypography,
711 familyKey: "popupHeadingTypography",
712 fontSize: popupHeadingFontSize,
713 fontSizeKey: "popupHeadingFontSize",
714 lineHeight: popupHeadingLineHeight,
715 lineHeightKey: "popupHeadingLineHeight",
716 letterSpacing: popupHeadingLatterSpacing,
717 letterSpacingKey: "popupHeadingLatterSpacing",
718 wordSpacing: popupHeadingWordSpacing,
719 wordSpacingKey: "popupHeadingWordSpacing",
720 globalTypo: popupHeadingGlobalTypography,
721 globalTypoKey: "popupHeadingGlobalTypography",
722 }}
723 setAttributes={setAttributes}
724 spacingDefaultValue={{ unit: "px", value: 0 }}
725 fontSizeDefault={{
726 unit: "px",
727 value: 14,
728 }}
729 lineDefaultValue={1.2}
730 typographyLabel={__("Typography", "post-carousel")}
731 fontSizePresetType="heading"
732 />
733
734 <SPToggleGroupControl
735 attributes={colorState}
736 attributesKey={"colorState"}
737 onClick={(newValue) => setColorState(newValue)}
738 items={[
739 { label: "Normal", value: "color" },
740 { label: "Hover", value: "hoverColor" },
741 ]}
742 />
743
744 <SpColorPicker
745 label={colorState === "hoverColor" ? "Hover Color" : "Color"}
746 value={popupHeadingColor[colorState]}
747 onChange={(newValue) =>
748 setAttributes({
749 popupHeadingColor: {
750 ...popupHeadingColor,
751 [colorState]: newValue,
752 },
753 })
754 }
755 />
756
757 <SpColorPicker
758 label={colorState === "hoverColor" ? "Hover Close Icon Color" : "Close Icon Color"}
759 value={popupCloseIconColor[colorState]}
760 onChange={(newValue) =>
761 setAttributes({
762 popupCloseIconColor: {
763 ...popupCloseIconColor,
764 [colorState]: newValue,
765 },
766 })
767 }
768 />
769
770 <Background
771 label={colorState === "hoverColor" ? "Hover Canvas Background Type" : "Canvas Background Type"}
772 attributes={popupCanvasBgColor}
773 attributesKey={"popupCanvasBgColor"}
774 setAttributes={setAttributes}
775 colorType={colorState === "hoverColor" ? "hover" : "color"}
776 items={[
777 {
778 label: <TransparentIcon />,
779 value: "transparent",
780 tooltip: "Transparent",
781 },
782 {
783 label: <BgIcon />,
784 value: "bgColor",
785 tooltip: "Solid",
786 },
787 {
788 label: <GradientIcon />,
789 value: "gradient",
790 tooltip: "Gradient",
791 },
792 ]}
793 />
794 {colorState === "color" ? (
795 <>
796 <Border
797 attributes={{
798 border: popupCanvasBorder,
799 borderWidth: popupCanvasBorderWidth,
800 }}
801 attributesKey={{
802 border: "popupCanvasBorder",
803 borderWidth: "popupCanvasBorderWidth",
804 }}
805 setAttributes={setAttributes}
806 btnType={"normal"}
807 />
808 </>
809 ) : (
810 <>
811 <Border
812 attributes={{
813 border: popupCanvasHoverBorder,
814 borderWidth: popupCanvasHoverBorderWidth,
815 }}
816 attributesKey={{
817 border: "popupCanvasHoverBorder",
818 borderWidth: "popupCanvasHoverBorderWidth",
819 }}
820 setAttributes={setAttributes}
821 btnType={"normal"}
822 />
823 </>
824 )}
825 <Spacing
826 label={__("Border Radius", "post-carousel")}
827 attributes={popupCanvasBorderRadius}
828 attributesKey={"popupCanvasBorderRadius"}
829 setAttributes={setAttributes}
830 units={["px", "%", "em"]}
831 defaultValue={{
832 unit: "px",
833 value: {
834 top: "2",
835 right: "2",
836 bottom: "2",
837 left: "2",
838 },
839 }}
840 indicator={"radius"}
841 />
842 <Spacing
843 label={__("Padding", "post-carousel")}
844 attributes={popupCanvasPadding}
845 attributesKey={"popupCanvasPadding"}
846 setAttributes={setAttributes}
847 units={["px", "%", "em"]}
848 defaultValue={{
849 unit: "px",
850 value: {
851 top: "24",
852 right: "24",
853 bottom: "24",
854 left: "24",
855 },
856 }}
857 />
858 <Spacing
859 label={__("Margin", "post-carousel")}
860 attributes={popupCanvasMargin}
861 attributesKey={"popupCanvasMargin"}
862 setAttributes={setAttributes}
863 units={["px", "%", "em"]}
864 defaultValue={{
865 unit: "px",
866 value: {
867 top: "0",
868 right: "0",
869 bottom: "0",
870 left: "0",
871 },
872 }}
873 />
874 <Toggle
875 label={__("Box Shadow", "post-carousel")}
876 attributes={popupCanvasBoxShadowEnable}
877 attributesKey={"popupCanvasBoxShadowEnable"}
878 setAttributes={setAttributes}
879 />
880 {popupCanvasBoxShadowEnable && (
881 <>
882 <BoxShadow
883 attributes={popupCanvasBoxShadowValue}
884 attributesKey={"popupCanvasBoxShadowValue"}
885 setAttributes={setAttributes}
886 />
887 </>
888 )}
889 </>
890 );
891 };
892