GutSlider – All in One Slider and Carousel Blocks for Gutenberg / 2.11.0

GutSlider – All in One Slider and Carousel Blocks for Gutenberg v2.11.0

slider-blocks / src / blocks / content-slider / edit.js

edit.js in GutSlider – All in One Slider and Carousel Blocks for Gutenberg 2.11.0, at src/blocks/content-slider/edit.js

952 lines 49.4 KB

Raw Download Zip

1	/* eslint-disable react-hooks/exhaustive-deps */
2	/* eslint-disable import/no-extraneous-dependencies */
3	/* eslint-disable camelcase */
4	/* eslint-disable no-undef */
5	/**
6	* WordPress dependencies
7	*/
8	import { BlockControls, RichText, useBlockProps } from '@wordpress/block-editor';
9	import classnames from 'classnames';
10	import { cloneDeep } from 'lodash';
11	const { Fragment, RawHTML, useEffect, useRef } = wp.element;
12
13	const { ToolbarGroup, ToolbarButton } = wp.components;
14	const { dispatch } = wp.data;
15	const { __ } = wp.i18n;
16
17	// editor style
18	import './editor.scss';
19
20	/**
21	* Internal dependencies
22	*/
23	import * as Constants from './constants';
24	import Inspector from './inspector';
25
26	const { DisplayIcon, generateRangeStyles, SidebarOpener, DynamicTag } = window?.gutSliderModules;
27	const { COLUMNS, COLUMNS_GAP } = Constants;
28	const { CE_STYLES } = window.gutSliderModules.GlobalConstants;
29
30	// import style
31	import Style from './style';
32
33	/**
34	* Edit function
35	*/
36
37	export default function Edit({ attributes, setAttributes, clientId }) {
38	const {
39	uniqueId,
40	preview,
41	//visible elements
42	showImage,
43	showSubTitle,
44	showTitle,
45	showDescription,
46	showButton,
47	sliderType,
48	slideItems,
49	addNewSlide,
50	subtitleTag,
51	titleTag,
52	descriptionTag,
53	titleAnimation,
54	subtitleAnimation,
55	descAnimation,
56	btnAnimation,
57	sbtnAnimation,
58	infiniteLoop,
59	autoplay,
60	autoplayDelay,
61	stopOnLastSlide,
62	reverseDirection,
63	pauseOnHover,
64	speed,
65	centerMode,
66	showNavigation,
67	navContainerPosition,
68	navPosition,
69	customNavIcon,
70	navIconSource,
71	navPrevIcon,
72	navNextIcon,
73	customPrevSVG,
74	customNextSVG,
75	showPagination,
76	paginationType,
77	dynamicBullets,
78	pagColor,
79	activePagColor,
80	keyboardControl,
81	mousewheelControl,
82	slideEffect,
83	carouselEffect,
84	creativeEffectStyle,
85	enableGlobalLink,
86	// custom navigation
87	enableRemoteNav,
88	remotePrevSelector,
89	remoteNextSelector
90	} = attributes;
91
92	// Unique ID
93	useEffect(() => {
94	setAttributes({
95	uniqueId: 'gutslider-' + clientId.slice(0, 8)
96	});
97
98	// add default slide items
99	if (slideItems.length === 0) {
100	setAttributes({
101	slideItems: [
102	{
103	id: 0,
104	panelTitle: 'Gutslider Item',
105	subtitle: 'Gutslider Block',
106	title: '#1 Best Gutenberg Slider Block',
107	description:
108	'Gutslider is a Gutenberg Slider Block that is easy to use and has many features. It is a great alternative to other slider blocks that are not as easy to use and have less features.',
109	bgType: 'classic',
110	bgColor: '#efefef',
111	bgGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
112	bgVideo: {},
113	enableOverlay: false,
114	overlayType: 'classic',
115	overlayColor: '#000000',
116	overlayGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
117	overlayOpacity: 0.5,
118	image: {
119	id: '',
120	url: '',
121	alt: 'Gutslider Logo'
122	},
123
124	photo: {},
125	photoSize: 'thumbnail',
126	focusPoint: { x: 0.5, y: 0.5 },
127	btnLabel: 'Get Gutslider',
128	btnLinks: {
129	url: 'https://gutenbergkits.com',
130	openInNewTab: true,
131	addNoFollow: false,
132	addSponsored: false
133	},
134	showSbtnLinks: false,
135	sbtnLabel: '',
136	sbtnLinks: {
137	url: '',
138	openInNewTab: true,
139	addNoFollow: false,
140	addSponsored: false
141	},
142	// Global link
143	globalLink: {
144	url: '',
145	openInNewTab: false,
146	addNoFollow: false,
147	addSponsored: false
148	},
149	enableResponsiveBg: false,
150	DesktopBg: {
151	url: '',
152	id: '',
153	alt: ''
154	},
155	TabletBg: {
156	url: '',
157	id: '',
158	alt: ''
159	},
160	MobileBg: {
161	url: '',
162	id: '',
163	alt: ''
164	},
165	DesktopFocalPoint: { x: 0.5, y: 0.5 },
166	TabletFocalPoint: { x: 0.5, y: 0.5 },
167	MobileFocalPoint: { x: 0.5, y: 0.5 }
168	},
169	{
170	id: 1,
171	panelTitle: 'Gutslider Item #2',
172	subtitle: 'Custom Content Slider',
173	title: '#2 Easily Build Custom Slider',
174	description:
175	'Gutslider is a Gutenberg Slider Block that is easy to use and has many features. It is a great alternative to other slider blocks that are not as easy to use and have less features.',
176	bgType: 'classic',
177	bgColor: '#efefef',
178	bgGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
179	bgVideo: {},
180	enableOverlay: false,
181	overlayType: 'classic',
182	overlayColor: '#000000',
183	overlayGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
184	overlayOpacity: 0.5,
185	image: {
186	id: '',
187	url: '',
188	alt: 'Gutslider Logo'
189	},
190
191	photo: {},
192	photoSize: 'thumbnail',
193	focusPoint: { x: 0.5, y: 0.5 },
194	btnLabel: 'Get Gutslider',
195	btnLinks: {
196	url: 'https://gutenbergkits.com',
197	openInNewTab: true,
198	addNoFollow: false,
199	addSponsored: false
200	},
201	showSbtnLinks: false,
202	sbtnLabel: '',
203	sbtnLinks: {
204	url: '',
205	openInNewTab: true,
206	addNoFollow: false,
207	addSponsored: false
208	},
209	// Global link
210	globalLink: {
211	url: '',
212	openInNewTab: false,
213	addNoFollow: false,
214	addSponsored: false
215	},
216	enableResponsiveBg: false,
217	DesktopBg: {
218	url: '',
219	id: '',
220	alt: ''
221	},
222	TabletBg: {
223	url: '',
224	id: '',
225	alt: ''
226	},
227	MobileBg: {
228	url: '',
229	id: '',
230	alt: ''
231	},
232	DesktopFocalPoint: { x: 0.5, y: 0.5 },
233	TabletFocalPoint: { x: 0.5, y: 0.5 },
234	MobileFocalPoint: { x: 0.5, y: 0.5 }
235	},
236	{
237	id: 2,
238	panelTitle: 'Gutslider Item #3',
239	subtitle: 'Custom Content Slider',
240	title: '#3 Easily Build Custom Slider',
241	description:
242	'Gutslider is a Gutenberg Slider Block that is easy to use and has many features. It is a great alternative to other slider blocks that are not as easy to use and have less features.',
243	bgType: 'classic',
244	bgColor: '#efefef',
245	bgGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
246	bgVideo: {},
247	enableOverlay: false,
248	overlayType: 'classic',
249	overlayColor: '#000000',
250	overlayGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
251	overlayOpacity: 0.5,
252	image: {
253	id: '',
254	url: '',
255	alt: 'Gutslider Logo'
256	},
257
258	photo: {},
259	photoSize: 'thumbnail',
260	focusPoint: { x: 0.5, y: 0.5 },
261	btnLabel: 'Get Gutslider',
262	btnLinks: {
263	url: 'https://gutenbergkits.com',
264	openInNewTab: true,
265	addNoFollow: false,
266	addSponsored: false
267	},
268	showSbtnLinks: false,
269	sbtnLabel: '',
270	sbtnLinks: {
271	url: '',
272	openInNewTab: true,
273	addNoFollow: false,
274	addSponsored: false
275	},
276	// Global link
277	globalLink: {
278	url: '',
279	openInNewTab: false,
280	addNoFollow: false,
281	addSponsored: false
282	},
283	enableResponsiveBg: false,
284	DesktopBg: {
285	url: '',
286	id: '',
287	alt: ''
288	},
289	TabletBg: {
290	url: '',
291	id: '',
292	alt: ''
293	},
294	MobileBg: {
295	url: '',
296	id: '',
297	alt: ''
298	},
299	DesktopFocalPoint: { x: 0.5, y: 0.5 },
300	TabletFocalPoint: { x: 0.5, y: 0.5 },
301	MobileFocalPoint: { x: 0.5, y: 0.5 }
302	}
303	]
304	});
305	}
306	}, []);
307
308	// block preview
309	if (preview) {
310	return (
311	<div className="gutslider-preview">
312	<img src={gutslider_preview.content} alt="content slider preview" />
313	</div>
314	);
315	}
316
317	// Block Props
318	const blockProps = useBlockProps({
319	className: classnames(uniqueId, navContainerPosition, navPosition)
320	});
321
322	// Slider Columns
323	const {
324	deskStyle: deskSlideColumns,
325	tabStyle: tabSlideColumns,
326	mobStyle: mobSlideColumns
327	} = generateRangeStyles({
328	controlName: COLUMNS,
329	attributes,
330	noProperty: true,
331	noUnits: true
332	});
333
334	const {
335	deskStyle: deskColumnsGap,
336	tabStyle: tabColumnsGap,
337	mobStyle: mobColumnsGap
338	} = generateRangeStyles({
339	controlName: COLUMNS_GAP,
340	attributes,
341	noProperty: true,
342	noUnits: true
343	});
344
345	// Slider breakpoints
346	const breakPoints = {
347	breakpoints: {
348	320: {
349	slidesPerView: mobSlideColumns \|\| 1,
350	spaceBetween: parseInt(mobColumnsGap) \|\| 0
351	},
352	768: {
353	slidesPerView: tabSlideColumns \|\| 2,
354	spaceBetween: parseInt(tabColumnsGap) \|\| 15
355	},
356	1025: {
357	slidesPerView: deskSlideColumns \|\| 2,
358	spaceBetween: parseInt(deskColumnsGap) \|\| 15
359	}
360	}
361	};
362
363	const sliderBreakPoints = sliderType === 'carousel' ? breakPoints : {};
364
365	// swiper initialize
366	const swiperRef = useRef(null);
367
368	if (swiperRef.current) {
369	swiperRef.current.addEventListener('click', function () {
370	dispatch('core/block-editor').selectBlock(clientId);
371	dispatch('core/edit-post')?.openGeneralSidebar('edit-post/block');
372	});
373	}
374
375	// swiper init function
376	const gutSliderInit = function (sliderE, options) {
377	if (sliderE?.swiper) {
378	sliderE?.swiper.destroy();
379	}
380	new Swiper(sliderE, options);
381
382	if (enableRemoteNav && remotePrevSelector && remoteNextSelector) {
383	const remotePrev = document.querySelector(`.${remotePrevSelector}`);
384	const remoteNext = document.querySelector(`.${remoteNextSelector}`);
385
386	if (remotePrev) {
387	remotePrev.addEventListener('click', () => {
388	sliderE.swiper.slidePrev();
389	});
390	}
391
392	if (remoteNext) {
393	remoteNext.addEventListener('click', () => {
394	sliderE.swiper.slideNext();
395	});
396	}
397	}
398	};
399
400	//slider options
401	useEffect(() => {
402	const options = {
403	slidesPerView: 1,
404	spaceBetween: 0,
405	loop: infiniteLoop,
406	autoplay: autoplay
407	? {
408	delay: autoplayDelay * 100 \|\| 10 * 100,
409	pauseOnMouseEnter: pauseOnHover,
410	stopOnLastSlide,
411	reverseDirection
412	}
413	: false,
414	speed: speed * 100 \|\| 8 * 100,
415
416	effect: sliderType === 'carousel' ? carouselEffect : slideEffect,
417	creativeEffect: CE_STYLES[creativeEffectStyle],
418	keyboard: {
419	enabled: keyboardControl
420	},
421	mousewheel: mousewheelControl,
422	...(centerMode && {
423	centeredSlides: true
424	}),
425	...sliderBreakPoints
426	};
427
428	// set options
429	const setOptions = {
430	...options,
431	navigation:
432	showNavigation && !enableRemoteNav
433	? {
434	nextEl: customNavIcon ? `.${uniqueId} .gutslider-next` : `.${uniqueId} .swiper-button-next`,
435	prevEl: customNavIcon ? `.${uniqueId} .gutslider-prev` : `.${uniqueId} .swiper-button-prev`
436	}
437	: false,
438	pagination: showPagination
439	? { el: `.${uniqueId} .swiper-pagination`, type: paginationType, dynamicBullets, clickable: true }
440	: false
441	};
442
443	setAttributes({
444	sliderOptions: setOptions
445	});
446
447	if (!swiperRef.current) {
448	return;
449	}
450
451	// pagination
452	const pagination = swiperRef.current?.querySelector('.swiper-pagination');
453
454	const refPath = navContainerPosition === 'nav_outside' ? swiperRef.current?.parentNode : swiperRef.current;
455
456	// navigation
457	const prevNav = customNavIcon ? refPath?.querySelector('.gutslider-prev') : refPath?.querySelector('.swiper-button-prev');
458	const nextNav = customNavIcon ? refPath?.querySelector('.gutslider-next') : refPath?.querySelector('.swiper-button-next');
459
460	gutSliderInit(swiperRef.current, {
461	...options,
462	navigation:
463	showNavigation && !enableRemoteNav
464	? {
465	nextEl: nextNav,
466	prevEl: prevNav
467	}
468	: false,
469	pagination: showPagination ? { el: pagination, type: paginationType, dynamicBullets, clickable: true } : false
470	});
471	}, [
472	infiniteLoop,
473	autoplay,
474	autoplayDelay,
475	pauseOnHover,
476	stopOnLastSlide,
477	reverseDirection,
478	speed,
479	centerMode,
480	showNavigation,
481	showPagination,
482	paginationType,
483	dynamicBullets,
484	pagColor,
485	activePagColor,
486	slideEffect,
487	carouselEffect,
488	creativeEffectStyle,
489	addNewSlide,
490	sliderType,
491	deskSlideColumns,
492	tabSlideColumns,
493	mobSlideColumns,
494	deskColumnsGap,
495	tabColumnsGap,
496	mobColumnsGap,
497	keyboardControl,
498	mousewheelControl,
499	customNavIcon,
500	navContainerPosition,
501	enableGlobalLink,
502	slideItems,
503	enableRemoteNav,
504	remotePrevSelector,
505	remoteNextSelector,
506	uniqueId
507	]);
508
509	// slider items deep copy
510	const sliderItems = cloneDeep(slideItems);
511
512	return (
513	<Fragment>
514	<Style attributes={attributes} setAttributes={setAttributes} />
515	<Inspector attributes={attributes} setAttributes={setAttributes} />
516	<BlockControls>
517	<ToolbarGroup className="gutslider-toolbar-group">
518	<ToolbarButton
519	className="gutslider-toolbar-button"
520	title={__('Add Slide', 'slider-blocks')}
521	onClick={() => {
522	setAttributes({
523	addNewSlide: !addNewSlide
524	});
525	setAttributes({
526	slideItems: [
527	...slideItems,
528	{
529	id: slideItems.length + 1,
530	panelTitle: 'Gutslider Item',
531	subtitle: 'Gutslider Block',
532	title: '#1 Best Gutenberg Slider Block',
533	description:
534	'Gutslider is a Gutenberg Slider Block that is easy to use and has many features. It is a great alternative to other slider blocks that are not as easy to use and have less features.',
535	bgType: 'classic',
536	bgColor: '#efefef',
537	enableOverlay: false,
538	overlayType: 'classic',
539	overlayColor: '#000000',
540	overlayGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
541	overlayOpacity: 0.5,
542	bgGradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
543	bgVideo: {},
544	image: {
545	id: slideItems.length + 1,
546	url: '',
547	alt: 'Gutslider Logo'
548	},
549
550	photo: {},
551	photoSize: 'thumbnail',
552	btnLabel: 'Get Gutslider',
553	btnLinks: {
554	url: 'https://gutenbergkits.com',
555	openInNewTab: true,
556	addNoFollow: false,
557	addSponsored: false
558	},
559	showSbtnLinks: false,
560	sbtnLabel: '',
561	sbtnLinks: {
562	url: '',
563	openInNewTab: true,
564	addNoFollow: false,
565	addSponsored: false
566	},
567	focusPoint: { x: 0.5, y: 0.5 },
568	// Global link
569	globalLink: {
570	url: '',
571	openInNewTab: false,
572	addNoFollow: false,
573	addSponsored: false
574	},
575	enableResponsiveBg: false,
576	DesktopBg: {
577	url: '',
578	id: '',
579	alt: ''
580	},
581	TabletBg: {
582	url: '',
583	id: '',
584	alt: ''
585	},
586	MobileBg: {
587	url: '',
588	id: '',
589	alt: ''
590	},
591	DesktopFocalPoint: { x: 0.5, y: 0.5 },
592	TabletFocalPoint: { x: 0.5, y: 0.5 },
593	MobileFocalPoint: { x: 0.5, y: 0.5 }
594	}
595	]
596	});
597	}}
598	>
599	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
600	<path
601	d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11H7V13H11V17H13V13H17V11H13V7H11V11Z"
602	fill="rgba(0,124,186,1)"
603	></path>
604	</svg>
605	</ToolbarButton>
606	</ToolbarGroup>
607	</BlockControls>
608	<div {...blockProps}>
609	<SidebarOpener />
610	<div className="swiper" ref={swiperRef}>
611	<div className="swiper-wrapper">
612	{sliderItems &&
613	sliderItems.map((slide, index) => {
614	const bgStyles = {
615	backgroundColor: slide.bgColor ? slide.bgColor : '',
616	...(slide.bgType === 'classic' &&
617	!slide.enableResponsiveBg &&
618	slide.image?.url && {
619	backgroundImage: `url(${slide.image.url})`
620	}),
621	...(slide.bgType === 'gradient' &&
622	slide.bgGradient && {
623	backgroundImage: slide.bgGradient ? slide.bgGradient : ''
624	}),
625	...(slide.enableResponsiveBg &&
626	slide.bgType === 'classic' && {
627	[`--gut-desktop-bg-image`]: `url(${slide.DesktopBg?.url})`,
628	[`--gut-tablet-bg-image`]: `url(${slide.TabletBg?.url})`,
629	[`--gut-mobile-bg-image`]: `url(${slide.MobileBg?.url})`
630	}),
631
632	...(slide.enableResponsiveBg &&
633	slide.bgType === 'classic' &&
634	slide?.DesktopBg?.url &&
635	slide?.DesktopFocalPoint && {
636	[`--gut-desktop-focal-point`]: `${slide?.DesktopFocalPoint?.x * 100}% ${slide?.DesktopFocalPoint?.y * 100}%`
637	}),
638
639	...(slide.enableResponsiveBg &&
640	slide.bgType === 'classic' &&
641	slide?.TabletBg?.url &&
642	slide?.TabletFocalPoint && {
643	[`--gut-tablet-focal-point`]: `${slide?.TabletFocalPoint?.x * 100}% ${slide?.TabletFocalPoint?.y * 100}%`
644	}),
645
646	...(slide.enableResponsiveBg &&
647	slide.bgType === 'classic' &&
648	slide?.MobileBg?.url &&
649	slide?.MobileFocalPoint && {
650	[`--gut-mobile-focal-point`]: `${slide?.MobileFocalPoint?.x * 100}% ${slide?.MobileFocalPoint?.y * 100}%`
651	}),
652
653	...(slide?.focusPoint &&
654	slide.bgType !== 'video' &&
655	!slide.enableResponsiveBg && {
656	backgroundPosition: `${slide?.focusPoint?.x * 100}% ${slide?.focusPoint?.y * 100}%`
657	})
658	};
659	const overlayStyles = {
660	background: slide.overlayType === 'classic' ? slide.overlayColor : slide.overlayGradient,
661	opacity: slide.overlayOpacity ? slide.overlayOpacity : ''
662	};
663	return (
664	<div
665	className={classnames('swiper-slide', {
666	'slide-mode': sliderType === 'slider'
667	})}
668	key={`${uniqueId}-${index}`}
669	>
670	<DynamicTag
671	tagName={enableGlobalLink ? 'a' : 'div'}
672	className={classnames('swiper-container-outer', {
673	'responsive-image': slide.enableResponsiveBg
674	})}
675	style={bgStyles}
676	>
677	{slide.bgType === 'video' && slide.bgVideo?.url && (
678	<div className="gutslider-video-wrapper">
679	<video className="gutslider-video" autoPlay muted playsInline loop preload="metadata">
680	<source src={slide.bgVideo?.url} type="video/mp4" />
681	</video>
682	</div>
683	)}
684	{slide.enableOverlay && (slide.bgType === 'classic' \|\| slide.bgType === 'video') && (
685	<div className="gutslider-overlay" style={overlayStyles}></div>
686	)}
687	<div className="gutslider-content-wrapper">
688	{showImage ? (
689	<div className="gutslider-content-inner">
690	<div className="gutslider-content-position">
691	{slide.photo && slide.photo.url ? (
692	<div className="gutslider-content-image">
693	<img
694	src={slide.photo.sizes[slide.photoSize].url}
695	alt={slide.photo.alt}
696	/>
697	</div>
698	) : null}
699	<div className="gutslider-content">
700	{showSubTitle && (
701	<RichText
702	tagName={subtitleTag}
703	className={`gutslider-subtitle ${
704	subtitleAnimation && subtitleAnimation
705	}`}
706	value={slide.subtitle && slide.subtitle}
707	placeholder={__('subtitle…', 'slider-blocks')}
708	onChange={value => {
709	const newItems = [...sliderItems];
710	newItems[index].subtitle = value;
711	setAttributes({ slideItems: newItems });
712	}}
713	/>
714	)}
715	{showTitle && (
716	<RichText
717	tagName={titleTag}
718	className={`gutslider-title ${titleAnimation && titleAnimation}`}
719	value={slide.title && slide.title}
720	placeholder={__('title…', 'slider-blocks')}
721	onChange={value => {
722	const newItems = [...sliderItems];
723	newItems[index].title = value;
724	setAttributes({ slideItems: newItems });
725	}}
726	/>
727	)}
728
729	{showDescription && (
730	<RichText
731	tagName={descriptionTag}
732	className={`gutslider-description ${
733	descAnimation && descAnimation
734	}`}
735	value={slide.description && slide.description}
736	placeholder={__('description…', 'slider-blocks')}
737	onChange={value => {
738	const newItems = [...sliderItems];
739	newItems[index].description = value;
740	setAttributes({ slideItems: newItems });
741	}}
742	/>
743	)}
744	</div>
745	</div>
746	{showButton && slide?.showSbtnLinks ? (
747	<div className="gutslider-btn-flex">
748	<div
749	className={classnames(`gutslider-cta ${btnAnimation && btnAnimation}`)}
750	>
751	<RichText
752	tagName="span"
753	value={slide.btnLabel && slide.btnLabel}
754	placeholder={__('Button Label', 'slider-blocks')}
755	onChange={value => {
756	const newItems = [...sliderItems];
757	newItems[index].btnLabel = value;
758	setAttributes({ slideItems: newItems });
759	}}
760	/>
761	</div>
762	<div
763	className={classnames(
764	`gutslider-cta-secondary ${sbtnAnimation && sbtnAnimation}`
765	)}
766	>
767	<RichText
768	tagName="span"
769	value={slide.sbtnLabel && slide.sbtnLabel}
770	placeholder={__('Button Label', 'slider-blocks')}
771	onChange={value => {
772	const newItems = [...sliderItems];
773	newItems[index].sbtnLabel = value;
774	setAttributes({ slideItems: newItems });
775	}}
776	/>
777	</div>
778	</div>
779	) : (
780	showButton && (
781	<div
782	className={classnames(`gutslider-cta ${btnAnimation && btnAnimation}`)}
783	>
784	<RichText
785	tagName="span"
786	value={slide.btnLabel && slide.btnLabel}
787	placeholder={__('Button Label', 'slider-blocks')}
788	onChange={value => {
789	const newItems = [...sliderItems];
790	newItems[index].btnLabel = value;
791	setAttributes({ slideItems: newItems });
792	}}
793	/>
794	</div>
795	)
796	)}
797	</div>
798	) : (
799	<div className="gutslider-content-inner">
800	{showSubTitle && (
801	<RichText
802	tagName={subtitleTag}
803	className={`gutslider-subtitle ${subtitleAnimation && subtitleAnimation}`}
804	value={slide.subtitle && slide.subtitle}
805	placeholder={__('subtitle…', 'slider-blocks')}
806	onChange={value => {
807	const newItems = [...sliderItems];
808	newItems[index].subtitle = value;
809	setAttributes({ slideItems: newItems });
810	}}
811	/>
812	)}
813
814	{showTitle && (
815	<RichText
816	tagName={titleTag}
817	className={`gutslider-title ${titleAnimation && titleAnimation}`}
818	value={slide.title && slide.title}
819	placeholder={__('title…', 'slider-blocks')}
820	onChange={value => {
821	const newItems = [...sliderItems];
822	newItems[index].title = value;
823	setAttributes({ slideItems: newItems });
824	}}
825	/>
826	)}
827	{showDescription && (
828	<RichText
829	tagName={descriptionTag}
830	className={`gutslider-description ${descAnimation && descAnimation}`}
831	value={slide.description && slide.description}
832	placeholder={__('description…', 'slider-blocks')}
833	onChange={value => {
834	const newItems = [...sliderItems];
835	newItems[index].description = value;
836	setAttributes({ slideItems: newItems });
837	}}
838	/>
839	)}
840
841	{showButton && slide?.showSbtnLinks ? (
842	<div className="gutslider-btn-flex">
843	<div
844	className={classnames(`gutslider-cta ${btnAnimation && btnAnimation}`)}
845	>
846	<RichText
847	tagName="span"
848	value={slide.btnLabel && slide.btnLabel}
849	placeholder={__('Button Label', 'slider-blocks')}
850	onChange={value => {
851	const newItems = [...sliderItems];
852	newItems[index].btnLabel = value;
853	setAttributes({ slideItems: newItems });
854	}}
855	/>
856	</div>
857	<div
858	className={classnames(
859	`gutslider-cta-secondary ${sbtnAnimation && sbtnAnimation}`
860	)}
861	>
862	<RichText
863	tagName="span"
864	value={slide.sbtnLabel && slide.sbtnLabel}
865	placeholder={__('Button Label', 'slider-blocks')}
866	onChange={value => {
867	const newItems = [...sliderItems];
868	newItems[index].sbtnLabel = value;
869	setAttributes({ slideItems: newItems });
870	}}
871	/>
872	</div>
873	</div>
874	) : (
875	showButton && (
876	<div
877	className={classnames(`gutslider-cta ${btnAnimation && btnAnimation}`)}
878	>
879	<RichText
880	tagName="span"
881	value={slide.btnLabel && slide.btnLabel}
882	placeholder={__('Button Label', 'slider-blocks')}
883	onChange={value => {
884	const newItems = [...sliderItems];
885	newItems[index].btnLabel = value;
886	setAttributes({ slideItems: newItems });
887	}}
888	/>
889	</div>
890	)
891	)}
892	</div>
893	)}
894	</div>
895	</DynamicTag>
896	</div>
897	);
898	})}
899	</div>
900	{showNavigation && navContainerPosition === 'nav_inside' && !enableRemoteNav && (
901	<Fragment>
902	<div className={`gutslider-nav nav_inside ${navPosition}`}>
903	{customNavIcon ? (
904	<Fragment>
905	<div className="gutslider-prev">
906	{navIconSource === 'library' && <DisplayIcon icon={navPrevIcon} />}
907	{navIconSource === 'custom' && <RawHTML>{customPrevSVG}</RawHTML>}
908	</div>
909	<div className="gutslider-next">
910	{navIconSource === 'library' && <DisplayIcon icon={navNextIcon} />}
911	{navIconSource === 'custom' && <RawHTML>{customNextSVG}</RawHTML>}
912	</div>
913	</Fragment>
914	) : (
915	<Fragment>
916	<div className="swiper-button-prev"></div>
917	<div className="swiper-button-next"></div>
918	</Fragment>
919	)}
920	</div>
921	</Fragment>
922	)}
923	{showPagination && <div className="swiper-pagination"></div>}
924	</div>
925	{showNavigation && navContainerPosition === 'nav_outside' && !enableRemoteNav && (
926	<Fragment>
927	<div className={`gutslider-nav nav_outside ${navPosition}`}>
928	{customNavIcon ? (
929	<Fragment>
930	<div className="gutslider-prev">
931	{navIconSource === 'library' && <DisplayIcon icon={navPrevIcon} />}
932	{navIconSource === 'custom' && <RawHTML>{customPrevSVG}</RawHTML>}
933	</div>
934	<div className="gutslider-next">
935	{navIconSource === 'library' && <DisplayIcon icon={navNextIcon} />}
936	{navIconSource === 'custom' && <RawHTML>{customNextSVG}</RawHTML>}
937	</div>
938	</Fragment>
939	) : (
940	<Fragment>
941	<div className="swiper-button-prev"></div>
942	<div className="swiper-button-next"></div>
943	</Fragment>
944	)}
945	</div>
946	</Fragment>
947	)}
948	</div>
949	</Fragment>
950	);
951	}
952