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 / save.js

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

620 lines 17.2 KB

Raw Download Zip

1	import { useBlockProps, RichText } from "@wordpress/block-editor";
2
3	const Icon = ({ iconEnable, iconSource, iconSourceCustom, iconOverlayEnable, iconHoverEffects, currentIcon }) => {
4	if (!iconEnable \|\| (iconSource === "library" && !currentIcon) \|\| (iconSource === "custom" && !iconSourceCustom)) {
5	return null;
6	}
7
8	return (
9	<div className="sp-smart-post-info-box-icon-container ">
10	{iconSource === "library" ? (
11	<span
12	className={`sp-smart-post-info-box-icon ${
13	iconOverlayEnable ? "icon-img-overlay" : ""
14	} ${iconHoverEffects}`}
15	>
16	<svg width={currentIcon?.width} height={currentIcon?.height} viewBox={currentIcon?.viewBox}>
17	<path d={currentIcon?.path} />
18	</svg>
19	</span>
20	) : (
21	<div
22	className={`sp-smart-post-info-box-img ${
23	iconOverlayEnable ? "icon-img-overlay" : ""
24	} ${iconHoverEffects}`}
25	>
26	<img src={iconSourceCustom?.url} alt={iconSourceCustom?.alt \|\| "Custom icon"} />
27	</div>
28	)}
29	</div>
30	);
31	};
32	const Title = ({
33	titleTag,
34	titleText,
35	titleHoverEffects,
36	subTitleEnable,
37	subTitleTag,
38	subTitleText,
39	titleEnable,
40	titleGlobalTypography,
41	subTitleGlobalTypography,
42	}) => {
43	if (!titleEnable) {
44	return null;
45	}
46	return (
47	<div className="sp-smart-post-info-box-title-container">
48	<RichText.Content
49	tagName={titleTag}
50	value={titleText}
51	className={`sp-smart-post-info-box-title title-hover-${titleHoverEffects} ${titleGlobalTypography?.class ? titleGlobalTypography?.class : ""}`}
52	/>
53
54	{subTitleEnable && (
55	<RichText.Content
56	tagName={subTitleTag}
57	value={subTitleText}
58	className={`sp-smart-post-info-box-sub-title ${subTitleGlobalTypography?.class ? subTitleGlobalTypography?.class : ""}`}
59	/>
60	)}
61	</div>
62	);
63	};
64	const Description = ({ descText, dropCapsEnable, descriptionEnable, desGlobalTypography }) => {
65	if (!descriptionEnable) {
66	return null;
67	}
68
69	return (
70	<RichText.Content
71	tagName="p"
72	value={descText}
73	className={`sp-smart-post-info-box-desc ${
74	dropCapsEnable ? "drop-caps" : ""
75	} ${desGlobalTypography?.class ? desGlobalTypography?.class : ""}`}
76	/>
77	);
78	};
79	const Rating = ({
80	iconsNum,
81	ratingIconSource,
82	ratingIconSourceLibrary,
83	ratingValueEnable,
84	scale,
85	ratingEnable,
86	ratingGlobalTypography,
87	currentRatingIconSourceLibrary,
88	}) => {
89	if (!ratingEnable) {
90	return null;
91	}
92
93	const ratingIcons = Array(iconsNum).fill(null);
94
95	return (
96	<div
97	className={`sp-smart-post-info-box-rating-wrapper ${ratingGlobalTypography?.class ? ratingGlobalTypography?.class : ""}`}
98	>
99	<div className={`sp-smart-post-info-box-rating-container ${ratingIconSource}`}>
100	<span className="sp-smart-post-info-box-rating-icons-background">
101	{ratingIcons.map((_, index) => (
102	<svg
103	key={index}
104	width={currentRatingIconSourceLibrary?.width}
105	height={currentRatingIconSourceLibrary?.height}
106	viewBox={currentRatingIconSourceLibrary?.viewBox}
107	className={ratingIconSourceLibrary}
108	>
109	<path d={currentRatingIconSourceLibrary?.path} />
110	</svg>
111	))}
112	</span>
113
114	<span className="sp-smart-post-info-box-rating-icons-foreground">
115	{ratingIcons.map((_, index) => (
116	<svg
117	key={index}
118	width={currentRatingIconSourceLibrary?.width}
119	height={currentRatingIconSourceLibrary?.height}
120	viewBox={currentRatingIconSourceLibrary?.viewBox}
121	className={ratingIconSourceLibrary}
122	>
123	<path d={currentRatingIconSourceLibrary?.path} />
124	</svg>
125	))}
126	</span>
127	</div>
128	{ratingValueEnable && <span className="sp-smart-post-info-box-rating-label">{scale}/5</span>}
129	</div>
130	);
131	};
132
133	const Separator = ({ separatorEnable }) => {
134	if (!separatorEnable) {
135	return null;
136	}
137
138	return <div className="sp-smart-post-info-box-separator-container"></div>;
139	};
140
141	const CallToActionIcon = ({
142	buttonIconEnable,
143	cAIconSource,
144	cAIconSourceLibrary,
145	cAIconSourceCustom,
146	currentCAIcon,
147	}) => {
148	if (!buttonIconEnable) {
149	return null;
150	}
151
152	if (cAIconSource === "library" && cAIconSourceLibrary) {
153	return (
154	<span className={`sp-smart-post-info-box-cta-icon ${cAIconSource}`}>
155	<svg width={currentCAIcon?.width} height={currentCAIcon?.height} viewBox={currentCAIcon?.viewBox}>
156	<path d={currentCAIcon?.path} />
157	</svg>
158	</span>
159	);
160	}
161
162	// Custom image icon rendering
163	if (cAIconSource === "custom" && cAIconSourceCustom?.url) {
164	return (
165	<div className={`sp-smart-post-info-box-cta-icon ${cAIconSource}`}>
166	<img src={cAIconSourceCustom.url} alt={cAIconSourceCustom.alt \|\| "CTA Icon"} />
167	<div className="overlay"></div>
168	</div>
169	);
170	}
171
172	return null;
173	};
174
175	const CallToActionText = ({ caButtonText }) => {
176	const buttonTextWithDefault = caButtonText?.trim() \|\| "Learn More";
177	return (
178	<RichText.Content tagName="span" value={buttonTextWithDefault} className="sp-smart-post-info-box-cta-label" />
179	);
180	};
181
182	const CallToActionButton = ({
183	linkingType = "button",
184	caButtonText,
185	buttonIconEnable,
186	cAIconSource,
187	cAIconSourceLibrary,
188	cAIconSourceCustom,
189	buttonLink,
190	openNewTab,
191	callActionGlobalTypography,
192	callActionEnable,
193	currentCAIcon,
194	}) => {
195	if (!callActionEnable) {
196	return null;
197	}
198	if (linkingType === "fullBox") {
199	return null;
200	}
201
202	return (
203	<a
204	href={buttonLink}
205	target={`${openNewTab ? "_blank" : ""}`}
206	className={`sp-smart-post-info-box-cta linking-type-${linkingType} sp-smart-post-info-box-cta-link ${callActionGlobalTypography?.class ? callActionGlobalTypography?.class : ""}`}
207	>
208	<CallToActionText caButtonText={caButtonText} />
209
210	<CallToActionIcon
211	buttonIconEnable={buttonIconEnable}
212	cAIconSource={cAIconSource}
213	cAIconSourceLibrary={cAIconSourceLibrary}
214	cAIconSourceCustom={cAIconSourceCustom}
215	currentCAIcon={currentCAIcon}
216	/>
217	</a>
218	);
219	};
220
221	const Badge = ({ badgeEnable, badgeLabel, badgePosition, badgeGlobalTypography }) => {
222	if (!badgeEnable \|\| !badgeLabel) {
223	return null;
224	}
225	return (
226	<div
227	className={`sp-smart-post-info-box-badge editor-selector-hover ${badgePosition} ${badgeGlobalTypography?.class ? badgeGlobalTypography?.class : ""}`}
228	>
229	<span className="sp-smart-post-info-box-badge-label">{badgeLabel}</span>
230	</div>
231	);
232	};
233
234	const Overlay = ({ infoBoxBg, imageOverlayEnable, imageOverlayHoverEnable }) => {
235	const shouldShowOverlay =
236	(infoBoxBg.color.style === "image" \|\| infoBoxBg.hover.style === "image") &&
237	(imageOverlayEnable \|\| imageOverlayHoverEnable);
238
239	if (!shouldShowOverlay) {
240	return null;
241	}
242
243	return <div className="sp-smart-post-info-box-overlay"></div>;
244	};
245
246	const SmartInfoBoxSave = ({ attributes, clientId, name }) => {
247	const {
248	uniqueId,
249	infoBoxLayout,
250	iconEnable,
251	iconSource,
252	iconSourceLibrary,
253	iconHoverEffects,
254	iconSourceCustom,
255	iconOverlayEnable,
256	titleTag,
257	titleText,
258	subTitleTag,
259	subTitleText,
260	subTitleEnable,
261	separatorEnable,
262	titleHoverEffects,
263	caButtonText,
264	infoBoxBg,
265	descText,
266	descriptionEnable,
267	dropCapsEnable,
268	badgeEnable,
269	badgeLabel,
270	badgePosition,
271	ratingEnable,
272	ratingIconSourceLibrary,
273	ratingIconSource,
274	cAIconSourceCustom,
275	scale,
276	linkingType,
277	titleEnable,
278	buttonIconEnable,
279	cAIconSource,
280	cAIconSourceLibrary,
281	overlayOnHover,
282	externalLinkIcon,
283	callActionEnable,
284	ratingValueEnable,
285	imageOverlayEnable,
286	imageOverlayHoverEnable,
287	advancedAdditionalClass,
288	iconName,
289	buttonLink,
290	openNewTab,
291	additionalCssClass,
292	titleGlobalTypography,
293	subTitleGlobalTypography,
294	desGlobalTypography,
295	callToActionGlobalTypography,
296	ratingGlobalTypography,
297	badgeGlobalTypography,
298	currentIcon,
299	currentCAIcon,
300	currentRatingIconSourceLibrary,
301	} = attributes;
302
303	const blockProps = useBlockProps.save({
304	className: additionalCssClass,
305	});
306	const iconsNum = 5;
307
308	const layoutOne = () => {
309	return (
310	<>
311	<Badge
312	badgeEnable={badgeEnable}
313	badgeLabel={badgeLabel}
314	badgePosition={badgePosition}
315	badgeGlobalTypography={badgeGlobalTypography}
316	/>
317
318	<Overlay
319	infoBoxBg={infoBoxBg}
320	imageOverlayEnable={imageOverlayEnable}
321	imageOverlayHoverEnable={imageOverlayHoverEnable}
322	/>
323	<Icon
324	iconEnable={iconEnable}
325	iconSource={iconSource}
326	iconSourceCustom={iconSourceCustom}
327	iconOverlayEnable={iconOverlayEnable}
328	iconHoverEffects={iconHoverEffects}
329	currentIcon={currentIcon}
330	/>
331
332	<Title
333	titleTag={titleTag}
334	titleText={titleText}
335	titleHoverEffects={titleHoverEffects}
336	subTitleEnable={subTitleEnable}
337	subTitleTag={subTitleTag}
338	subTitleText={subTitleText}
339	titleEnable={titleEnable}
340	titleGlobalTypography={titleGlobalTypography}
341	subTitleGlobalTypography={subTitleGlobalTypography}
342	/>
343
344	<Separator separatorEnable={separatorEnable} />
345
346	<Description
347	descText={descText}
348	dropCapsEnable={dropCapsEnable}
349	descriptionEnable={descriptionEnable}
350	desGlobalTypography={desGlobalTypography}
351	/>
352
353	<Rating
354	iconsNum={iconsNum}
355	ratingIconSource={ratingIconSource}
356	ratingIconSourceLibrary={ratingIconSourceLibrary}
357	ratingValueEnable={ratingValueEnable}
358	scale={scale}
359	ratingEnable={ratingEnable}
360	ratingGlobalTypography={ratingGlobalTypography}
361	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
362	/>
363
364	<CallToActionButton
365	linkingType={linkingType}
366	caButtonText={caButtonText}
367	buttonIconEnable={buttonIconEnable}
368	cAIconSource={cAIconSource}
369	cAIconSourceLibrary={cAIconSourceLibrary}
370	cAIconSourceCustom={cAIconSourceCustom}
371	buttonLink={buttonLink}
372	openNewTab={openNewTab}
373	callActionEnable={callActionEnable}
374	callActionGlobalTypography={callToActionGlobalTypography}
375	currentCAIcon={currentCAIcon}
376	/>
377	</>
378	);
379	};
380
381	const layoutTwo = () => {
382	return (
383	<>
384	<Badge
385	badgeEnable={badgeEnable}
386	badgeLabel={badgeLabel}
387	badgePosition={badgePosition}
388	badgeGlobalTypography={badgeGlobalTypography}
389	/>
390
391	<Overlay
392	infoBoxBg={infoBoxBg}
393	imageOverlayEnable={imageOverlayEnable}
394	imageOverlayHoverEnable={imageOverlayHoverEnable}
395	/>
396	<div className="sp-smart-post-info-box-layout-two-top">
397	<Icon
398	iconEnable={iconEnable}
399	iconSource={iconSource}
400	iconSourceCustom={iconSourceCustom}
401	iconOverlayEnable={iconOverlayEnable}
402	iconHoverEffects={iconHoverEffects}
403	currentIcon={currentIcon}
404	/>
405	{infoBoxLayout === "smart-info-box-layout-two" && (
406	<Title
407	titleTag={titleTag}
408	titleText={titleText}
409	titleHoverEffects={titleHoverEffects}
410	subTitleEnable={subTitleEnable}
411	subTitleTag={subTitleTag}
412	subTitleText={subTitleText}
413	titleEnable={titleEnable}
414	titleGlobalTypography={titleGlobalTypography}
415	subTitleGlobalTypography={subTitleGlobalTypography}
416	/>
417	)}
418	{infoBoxLayout === "smart-info-box-layout-four" && (
419	<CallToActionButton
420	linkingType={linkingType}
421	caButtonText={caButtonText}
422	buttonIconEnable={buttonIconEnable}
423	cAIconSource={cAIconSource}
424	cAIconSourceLibrary={cAIconSourceLibrary}
425	cAIconSourceCustom={cAIconSourceCustom}
426	buttonLink={buttonLink}
427	openNewTab={openNewTab}
428	callActionEnable={callActionEnable}
429	callActionGlobalTypography={callToActionGlobalTypography}
430	currentCAIcon={currentCAIcon}
431	/>
432	)}
433	</div>
434	<Separator separatorEnable={separatorEnable} />
435	<Description
436	descText={descText}
437	dropCapsEnable={dropCapsEnable}
438	descriptionEnable={descriptionEnable}
439	desGlobalTypography={desGlobalTypography}
440	/>
441	<Rating
442	iconsNum={iconsNum}
443	ratingIconSource={ratingIconSource}
444	ratingIconSourceLibrary={ratingIconSourceLibrary}
445	ratingValueEnable={ratingValueEnable}
446	scale={scale}
447	ratingEnable={ratingEnable}
448	ratingGlobalTypography={ratingGlobalTypography}
449	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
450	/>
451	{infoBoxLayout === "smart-info-box-layout-two" && (
452	<CallToActionButton
453	linkingType={linkingType}
454	caButtonText={caButtonText}
455	buttonIconEnable={buttonIconEnable}
456	cAIconSource={cAIconSource}
457	cAIconSourceLibrary={cAIconSourceLibrary}
458	cAIconSourceCustom={cAIconSourceCustom}
459	buttonLink={buttonLink}
460	openNewTab={openNewTab}
461	callActionEnable={callActionEnable}
462	callActionGlobalTypography={callToActionGlobalTypography}
463	currentCAIcon={currentCAIcon}
464	/>
465	)}
466	{infoBoxLayout === "smart-info-box-layout-four" && (
467	<Title
468	titleTag={titleTag}
469	titleText={titleText}
470	titleHoverEffects={titleHoverEffects}
471	subTitleEnable={subTitleEnable}
472	subTitleTag={subTitleTag}
473	subTitleText={subTitleText}
474	titleEnable={titleEnable}
475	titleGlobalTypography={titleGlobalTypography}
476	subTitleGlobalTypography={subTitleGlobalTypography}
477	/>
478	)}
479	</>
480	);
481	};
482
483	const layoutThree = () => {
484	return (
485	<>
486	<div className="sp-smart-post-info-box-icon-wrapper">
487	<Icon
488	iconEnable={iconEnable}
489	iconSource={iconSource}
490	iconSourceCustom={iconSourceCustom}
491	iconOverlayEnable={iconOverlayEnable}
492	iconHoverEffects={iconHoverEffects}
493	currentIcon={currentIcon}
494	/>
495	</div>
496	<article className="sp-smart-post-info-box-content-wrapper">
497	<Badge
498	badgeEnable={badgeEnable}
499	badgeLabel={badgeLabel}
500	badgePosition={badgePosition}
501	badgeGlobalTypography={badgeGlobalTypography}
502	/>
503
504	<Overlay
505	infoBoxBg={infoBoxBg}
506	imageOverlayEnable={imageOverlayEnable}
507	imageOverlayHoverEnable={imageOverlayHoverEnable}
508	/>
509	<Title
510	titleTag={titleTag}
511	titleText={titleText}
512	titleHoverEffects={titleHoverEffects}
513	subTitleEnable={subTitleEnable}
514	subTitleTag={subTitleTag}
515	subTitleText={subTitleText}
516	titleEnable={titleEnable}
517	titleGlobalTypography={titleGlobalTypography}
518	subTitleGlobalTypography={subTitleGlobalTypography}
519	/>
520	<Separator separatorEnable={separatorEnable} />
521	<Description
522	descText={descText}
523	dropCapsEnable={dropCapsEnable}
524	descriptionEnable={descriptionEnable}
525	desGlobalTypography={desGlobalTypography}
526	/>
527	<Rating
528	iconsNum={iconsNum}
529	ratingIconSource={ratingIconSource}
530	ratingIconSourceLibrary={ratingIconSourceLibrary}
531	ratingValueEnable={ratingValueEnable}
532	scale={scale}
533	ratingEnable={ratingEnable}
534	ratingGlobalTypography={ratingGlobalTypography}
535	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
536	/>
537	<CallToActionButton
538	linkingType={linkingType}
539	caButtonText={caButtonText}
540	buttonIconEnable={buttonIconEnable}
541	cAIconSource={cAIconSource}
542	cAIconSourceLibrary={cAIconSourceLibrary}
543	cAIconSourceCustom={cAIconSourceCustom}
544	buttonLink={buttonLink}
545	openNewTab={openNewTab}
546	callActionEnable={callActionEnable}
547	callActionGlobalTypography={callToActionGlobalTypography}
548	currentCAIcon={currentCAIcon}
549	/>
550	</article>
551	</>
552	);
553	};
554
555	return (
556	<div {...blockProps}>
557	<div
558	className={`sp-smart-post-wrapper sp-smart-post-info-box-wrapper sp-smart-post-info-box-front-page ${advancedAdditionalClass}`}
559	id={uniqueId}
560	>
561	{callActionEnable && linkingType === "fullBox" ? (
562	<a
563	className="sp-smart-post-info-box-fullbox-link"
564	href={buttonLink}
565	target={`${openNewTab ? "_blank" : ""}`}
566	>
567	<section className={`sp-smart-post-info-box ${infoBoxLayout}`}>
568	{overlayOnHover && (
569	<div className="sp-smart-post-info-button-fullbox-overlay">
570	{externalLinkIcon && (
571	<span>
572	<svg
573	className="sp-smart-post-info-button-fullbox-overlay-svg"
574	xmlns="http://www.w3.org/2000/svg"
575	width="40"
576	height="40"
577	viewBox="0 0 40 40"
578	fill="none"
579	>
580	<path
581	d="M32.5001 7.5H20.8334V10H28.2323L18.2829 19.9494L20.0506 21.7172L30.0001 11.7678V19.1667H32.5001V7.5Z"
582	fill="white"
583	/>
584	<path
585	d="M10.8333 9.16667C8.99238 9.16667 7.5 10.6591 7.5 12.5V29.1667C7.5 31.0076 8.99238 32.5 10.8333 32.5H27.5C29.3409 32.5 30.8333 31.0076 30.8333 29.1667V24.1667H28.3333V29.1667C28.3333 29.6269 27.9602 30 27.5 30H10.8333C10.3731 30 10 29.6269 10 29.1667V12.5C10 12.0398 10.3731 11.6667 10.8333 11.6667H15.8333V9.16667H10.8333Z"
586	fill="white"
587	/>
588	</svg>
589	</span>
590	)}
591	</div>
592	)}
593
594	{(infoBoxLayout === "smart-info-box-layout-one" \|\|
595	infoBoxLayout === "smart-info-box-layout-five") &&
596	layoutOne()}
597	{(infoBoxLayout === "smart-info-box-layout-two" \|\|
598	infoBoxLayout === "smart-info-box-layout-four") &&
599	layoutTwo()}
600	{infoBoxLayout === "smart-info-box-layout-three" && layoutThree()}
601	</section>
602	</a>
603	) : (
604	<section className={`sp-smart-post-info-box ${infoBoxLayout}`}>
605	{(infoBoxLayout === "smart-info-box-layout-one" \|\|
606	infoBoxLayout === "smart-info-box-layout-five") &&
607	layoutOne()}
608	{(infoBoxLayout === "smart-info-box-layout-two" \|\|
609	infoBoxLayout === "smart-info-box-layout-four") &&
610	layoutTwo()}
611	{infoBoxLayout === "smart-info-box-layout-three" && layoutThree()}
612	</section>
613	)}
614	</div>
615	</div>
616	);
617	};
618
619	export default SmartInfoBoxSave;
620