← All changes | includes/widgets/image-carousel.php +55 -198 4.2.3 → 3.11.2 View file →

		@@ -5,9 +5,8 @@
5	5	exit; // Exit if accessed directly.
6	6	}
7	7
8	8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9		-use Elementor\Modules\Promotions\Controls\Promotion_Control;
10	9
11	10	/**
12	11	* Elementor image carousel widget.
13	12	*
		@@ -73,66 +72,9 @@
73	72	public function get_keywords() {
74	73	return [ 'image', 'photo', 'visual', 'carousel', 'slider' ];
75	74	}
76	75
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	76	/**
82		- * Get style dependencies.
83		- *
84		- * Retrieve the list of style dependencies the widget requires.
85		- *
86		- * @since 3.24.0
87		- * @access public
88		- *
89		- * @return array Widget style dependencies.
90		- */
91		- public function get_style_depends(): array {
92		- return [ 'e-swiper', 'widget-image-carousel' ];
93		- }
94		-
95		- /**
96		- * Get script dependencies.
97		- *
98		- * Retrieve the list of script dependencies the widget requires.
99		- *
100		- * @since 3.27.0
101		- * @access public
102		- *
103		- * @return array Widget script dependencies.
104		- */
105		- public function get_script_depends(): array {
106		- return [ 'swiper' ];
107		- }
108		-
109		- public function has_widget_inner_wrapper(): bool {
110		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
111		- }
112		-
113		- /**
114		- * Get widget upsale data.
115		- *
116		- * Retrieve the widget promotion data.
117		- *
118		- * @since 3.18.0
119		- * @access protected
120		- *
121		- * @return array Widget promotion data.
122		- */
123		- protected function get_upsale_data() {
124		- return [
125		- 'condition' => ! Utils::has_pro(),
126		- 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
127		- 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
128		- 'description' => esc_html__( 'Gain complete freedom to design every slide with Elementor"s Pro Carousel.', 'elementor' ),
129		- 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-image-carousel-widget/' ),
130		- 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
131		- ];
132		- }
133		-
134		- /**
135	77	* Register image carousel widget controls.
136	78	*
137	79	* Adds different input fields to allow the user to change and customize the widget settings.
138	80	*
		@@ -147,17 +89,8 @@
147	89	]
148	90	);
149	91
150	92	$this->add_control(
151		- 'carousel_name',
152		- [
153		- 'label' => esc_html__( 'Carousel Name', 'elementor' ),
154		- 'type' => Controls_Manager::TEXT,
155		- 'default' => esc_html__( 'Image Carousel', 'elementor' ),
156		- ]
157		- );
158		-
159		- $this->add_control(
160	93	'carousel',
161	94	[
162	95	'label' => esc_html__( 'Add Images', 'elementor' ),
163	96	'type' => Controls_Manager::GALLERY,
		@@ -172,8 +105,9 @@
172	105	$this->add_group_control(
173	106	Group_Control_Image_Size::get_type(),
174	107	[
175	108	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
	109	+ 'separator' => 'none',
176	110	]
177	111	);
178	112
179	113	$slides_to_show = range( 1, 10 );
		@@ -191,9 +125,8 @@
191	125	'render_type' => 'template',
192	126	'selectors' => [
193	127	'{{WRAPPER}}' => '--e-image-carousel-slides-to-show: {{VALUE}}',
194	128	],
195		- 'content_classes' => 'elementor-control-field-select-small',
196	129	]
197	130	);
198	131
199	132	$this->add_responsive_control(
		@@ -208,9 +141,8 @@
208	141	'condition' => [
209	142	'slides_to_show!' => '1',
210	143	],
211	144	'frontend_available' => true,
212		- 'content_classes' => 'elementor-control-field-select-small',
213	145	]
214	146	);
215	147
216	148	$this->add_control(
		@@ -370,8 +302,9 @@
370	302	'link',
371	303	[
372	304	'label' => esc_html__( 'Link', 'elementor' ),
373	305	'type' => Controls_Manager::URL,
	306	+ 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
374	307	'condition' => [
375	308	'link_to' => 'custom',
376	309	],
377	310	'show_label' => false,
		@@ -385,14 +318,8 @@
385	318	'open_lightbox',
386	319	[
387	320	'label' => esc_html__( 'Lightbox', 'elementor' ),
388	321	'type' => Controls_Manager::SELECT,
389		- 'description' => sprintf(
390		- /* translators: 1: Link open tag, 2: Link close tag. */
391		- esc_html__( 'Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'elementor' ),
392		- '<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
393		- '</a>'
394		- ),
395	322	'default' => 'default',
396	323	'options' => [
397	324	'default' => esc_html__( 'Default', 'elementor' ),
398	325	'yes' => esc_html__( 'Yes', 'elementor' ),
		@@ -418,8 +345,17 @@
418	345	],
419	346	]
420	347	);
421	348
	349	+ $this->add_control(
	350	+ 'view',
	351	+ [
	352	+ 'label' => esc_html__( 'View', 'elementor' ),
	353	+ 'type' => Controls_Manager::HIDDEN,
	354	+ 'default' => 'traditional',
	355	+ ]
	356	+ );
	357	+
422	358	$this->end_controls_section();
423	359
424	360	$this->start_controls_section(
425	361	'section_additional_options',
		@@ -440,13 +376,14 @@
440	376	$this->add_control(
441	377	'autoplay',
442	378	[
443	379	'label' => esc_html__( 'Autoplay', 'elementor' ),
444		- 'type' => Controls_Manager::SWITCHER,
445		- 'label_on' => esc_html__( 'Yes', 'elementor' ),
446		- 'label_off' => esc_html__( 'No', 'elementor' ),
447		- 'return_value' => 'yes',
	380	+ 'type' => Controls_Manager::SELECT,
448	381	'default' => 'yes',
	382	+ 'options' => [
	383	+ 'yes' => esc_html__( 'Yes', 'elementor' ),
	384	+ 'no' => esc_html__( 'No', 'elementor' ),
	385	+ ],
449	386	'frontend_available' => true,
450	387	]
451	388	);
452	389
		@@ -453,13 +390,14 @@
453	390	$this->add_control(
454	391	'pause_on_hover',
455	392	[
456	393	'label' => esc_html__( 'Pause on Hover', 'elementor' ),
457		- 'type' => Controls_Manager::SWITCHER,
458		- 'label_on' => esc_html__( 'Yes', 'elementor' ),
459		- 'label_off' => esc_html__( 'No', 'elementor' ),
460		- 'return_value' => 'yes',
	394	+ 'type' => Controls_Manager::SELECT,
461	395	'default' => 'yes',
	396	+ 'options' => [
	397	+ 'yes' => esc_html__( 'Yes', 'elementor' ),
	398	+ 'no' => esc_html__( 'No', 'elementor' ),
	399	+ ],
462	400	'condition' => [
463	401	'autoplay' => 'yes',
464	402	],
465	403	'render_type' => 'none',
		@@ -470,13 +408,14 @@
470	408	$this->add_control(
471	409	'pause_on_interaction',
472	410	[
473	411	'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
474		- 'type' => Controls_Manager::SWITCHER,
475		- 'label_on' => esc_html__( 'Yes', 'elementor' ),
476		- 'label_off' => esc_html__( 'No', 'elementor' ),
477		- 'return_value' => 'yes',
	412	+ 'type' => Controls_Manager::SELECT,
478	413	'default' => 'yes',
	414	+ 'options' => [
	415	+ 'yes' => esc_html__( 'Yes', 'elementor' ),
	416	+ 'no' => esc_html__( 'No', 'elementor' ),
	417	+ ],
479	418	'condition' => [
480	419	'autoplay' => 'yes',
481	420	],
482	421	'frontend_available' => true,
		@@ -501,13 +440,14 @@
501	440	$this->add_control(
502	441	'infinite',
503	442	[
504	443	'label' => esc_html__( 'Infinite Loop', 'elementor' ),
505		- 'type' => Controls_Manager::SWITCHER,
506		- 'label_on' => esc_html__( 'Yes', 'elementor' ),
507		- 'label_off' => esc_html__( 'No', 'elementor' ),
508		- 'return_value' => 'yes',
	444	+ 'type' => Controls_Manager::SELECT,
509	445	'default' => 'yes',
	446	+ 'options' => [
	447	+ 'yes' => esc_html__( 'Yes', 'elementor' ),
	448	+ 'no' => esc_html__( 'No', 'elementor' ),
	449	+ ],
510	450	'frontend_available' => true,
511	451	]
512	452	);
513	453
		@@ -593,17 +533,17 @@
593	533	],
594	534	]
595	535	);
596	536
597		- $this->add_responsive_control(
	537	+ $this->add_control(
598	538	'arrows_size',
599	539	[
600	540	'label' => esc_html__( 'Size', 'elementor' ),
601	541	'type' => Controls_Manager::SLIDER,
602		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
603	542	'range' => [
604	543	'px' => [
605		- 'max' => 100,
	544	+ 'min' => 20,
	545	+ 'max' => 60,
606	546	],
607	547	],
608	548	'selectors' => [
609	549	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
		@@ -657,37 +597,17 @@
657	597	],
658	598	]
659	599	);
660	600
661		- $this->add_responsive_control(
662		- 'dots_gap',
663		- [
664		- 'label' => esc_html__( 'Space Between Dots', 'elementor' ),
665		- 'type' => Controls_Manager::SLIDER,
666		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
667		- 'range' => [
668		- 'px' => [
669		- 'max' => 20,
670		- ],
671		- ],
672		- 'selectors' => [
673		- '{{WRAPPER}} .swiper-pagination-bullet' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}{{UNIT}}; --swiper-pagination-bullet-vertical-gap: {{SIZE}}{{UNIT}};',
674		- ],
675		- 'condition' => [
676		- 'navigation' => [ 'dots', 'both' ],
677		- ],
678		- ]
679		- );
680		-
681		- $this->add_responsive_control(
	601	+ $this->add_control(
682	602	'dots_size',
683	603	[
684	604	'label' => esc_html__( 'Size', 'elementor' ),
685	605	'type' => Controls_Manager::SLIDER,
686		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
687	606	'range' => [
688	607	'px' => [
689		- 'max' => 20,
	608	+ 'min' => 5,
	609	+ 'max' => 10,
690	610	],
691	611	],
692	612	'selectors' => [
693	613	'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		@@ -785,9 +705,8 @@
785	705	'image_spacing_custom',
786	706	[
787	707	'label' => esc_html__( 'Image Spacing', 'elementor' ),
788	708	'type' => Controls_Manager::SLIDER,
789		- 'size_units' => [ 'px' ],
790	709	'range' => [
791	710	'px' => [
792	711	'max' => 100,
793	712	],
		@@ -817,9 +736,9 @@
817	736	'image_border_radius',
818	737	[
819	738	'label' => esc_html__( 'Border Radius', 'elementor' ),
820	739	'type' => Controls_Manager::DIMENSIONS,
821		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	740	+ 'size_units' => [ 'px', '%', 'em' ],
822	741	'selectors' => [
823	742	'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824	743	],
825	744	]
		@@ -843,10 +762,10 @@
843	762	[
844	763	'label' => esc_html__( 'Alignment', 'elementor' ),
845	764	'type' => Controls_Manager::CHOOSE,
846	765	'options' => [
847		- 'start' => [
848		- 'title' => esc_html__( 'Start', 'elementor' ),
	766	+ 'left' => [
	767	+ 'title' => esc_html__( 'Left', 'elementor' ),
849	768	'icon' => 'eicon-text-align-left',
850	769	],
851	770	'center' => [
852	771	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -851,10 +770,10 @@
851	770	'center' => [
852	771	'title' => esc_html__( 'Center', 'elementor' ),
853	772	'icon' => 'eicon-text-align-center',
854	773	],
855		- 'end' => [
856		- 'title' => esc_html__( 'End', 'elementor' ),
	774	+ 'right' => [
	775	+ 'title' => esc_html__( 'Right', 'elementor' ),
857	776	'icon' => 'eicon-text-align-right',
858	777	],
859	778	'justify' => [
860	779	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -860,13 +779,8 @@
860	779	'title' => esc_html__( 'Justified', 'elementor' ),
861	780	'icon' => 'eicon-text-align-justify',
862	781	],
863	782	],
864		- 'classes' => 'elementor-control-start-end',
865		- 'selectors_dictionary' => [
866		- 'left' => is_rtl() ? 'end' : 'start',
867		- 'right' => is_rtl() ? 'start' : 'end',
868		- ],
869	783	'default' => 'center',
870	784	'selectors' => [
871	785	'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
872	786	],
		@@ -903,21 +817,10 @@
903	817	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
904	818	]
905	819	);
906	820
907		- $this->add_responsive_control(
908		- 'caption_space',
909		- [
910		- 'label' => esc_html__( 'Spacing', 'elementor' ),
911		- 'type' => Controls_Manager::SLIDER,
912		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
913		- 'selectors' => [
914		- '{{WRAPPER}} .elementor-image-carousel-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
915		- ],
916		- ]
917		- );
	821	+ $this->end_controls_section();
918	822
919		- $this->end_controls_section();
920	823	}
921	824
922	825	/**
923	826	* Render image carousel widget output on the frontend.
		@@ -972,25 +875,10 @@
972	875	}
973	876
974	877	$image_caption = $this->get_image_caption( $attachment );
975	878
976		- $slide_count = $index + 1;
977		- $slide_setting_key = 'swiper_slide_' . $index;
	879	+ $slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
978	880
979		- $this->add_render_attribute( $slide_setting_key, [
980		- 'class' => 'swiper-slide',
981		- 'role' => 'group',
982		- 'aria-roledescription' => 'slide',
983		- 'aria-label' => sprintf(
984		- /* translators: 1: Slide count, 2: Total slides count. */
985		- esc_html__( '%1$s of %2$s', 'elementor' ),
986		- $slide_count,
987		- count( $settings['carousel'] )
988		- ),
989		- ] );
990		-
991		- $slide_html = '<div ' . $this->get_render_attribute_string( $slide_setting_key ) . '>' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
992		-
993	881	if ( $lazyload ) {
994	882	$slide_html .= '<div class="swiper-lazy-preloader"></div>';
995	883	}
996	884
		@@ -1013,21 +901,16 @@
1013	901	if ( empty( $slides ) ) {
1014	902	return;
1015	903	}
1016	904
1017		- $swiper_class = 'swiper';
1018		- $has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
	905	+ $swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';
1019	906
1020	907	$this->add_render_attribute( [
1021	908	'carousel' => [
1022	909	'class' => 'elementor-image-carousel swiper-wrapper',
1023		- 'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
1024	910	],
1025	911	'carousel-wrapper' => [
1026	912	'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
1027		- 'role' => 'region',
1028		- 'aria-roledescription' => 'carousel',
1029		- 'aria-label' => $settings['carousel_name'],
1030	913	'dir' => $settings['direction'],
1031	914	],
1032	915	] );
1033	916
		@@ -1038,27 +921,29 @@
1038	921	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
1039	922	}
1040	923
1041	924	$slides_count = count( $settings['carousel'] );
	925	+
1042	926	?>
1043	927	<div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
1044	928	<div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
1045		- <?php // PHPCS - $slides contains the slides content, all the relevant content is escaped above. ?>
	929	+ <?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
1046	930	<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1047	931	</div>
1048	932	<?php if ( 1 < $slides_count ) : ?>
	933	+ <?php if ( $show_dots ) : ?>
	934	+ <div class="swiper-pagination"></div>
	935	+ <?php endif; ?>
1049	936	<?php if ( $show_arrows ) : ?>
1050		- <div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
	937	+ <div class="elementor-swiper-button elementor-swiper-button-prev">
1051	938	<?php $this->render_swiper_button( 'previous' ); ?>
	939	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span>
1052	940	</div>
1053		- <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
	941	+ <div class="elementor-swiper-button elementor-swiper-button-next">
1054	942	<?php $this->render_swiper_button( 'next' ); ?>
	943	+ <span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span>
1055	944	</div>
1056	945	<?php endif; ?>
1057		-
1058		- <?php if ( $show_dots ) : ?>
1059		- <div class="swiper-pagination"></div>
1060		- <?php endif; ?>
1061	946	<?php endif; ?>
1062	947	</div>
1063	948	<?php
1064	949	}
		@@ -1068,9 +953,9 @@
1068	953	*
1069	954	* @since 1.0.0
1070	955	* @access private
1071	956	*
1072		- * @param array $attachment
	957	+ * @param array $attachment
1073	958	* @param object $instance
1074	959	*
1075	960	* @return array|string|false An array/string containing the attachment URL, or false if no link.
1076	961	*/
		@@ -1110,12 +995,8 @@
1110	995	}
1111	996
1112	997	$attachment_post = get_post( $attachment['id'] );
1113	998
1114		- if ( Utils::has_invalid_post_permissions( $attachment_post ) ) {
1115		- return '';
1116		- }
1117		-
1118	999	if ( 'caption' === $caption_type ) {
1119	1000	return $attachment_post->post_excerpt;
1120	1001	}
1121	1002
		@@ -1122,12 +1003,8 @@
1122	1003	if ( 'title' === $caption_type ) {
1123	1004	return $attachment_post->post_title;
1124	1005	}
1125	1006
1126		- if ( empty( $attachment_post->post_content ) ) {
1127		- return '';
1128		- }
1129		-
1130	1007	return $attachment_post->post_content;
1131	1008	}
1132	1009
1133	1010	private function render_swiper_button( $type ) {
		@@ -1141,26 +1018,6 @@
1141	1018	];
1142	1019	}
1143	1020
1144	1021	Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1145		- }
1146		-
1147		- public function render_markdown(): string {
1148		- $settings = $this->get_settings_for_display();
1149		- if ( empty( $settings['carousel'] ) ) {
1150		- return '';
1151		- }
1152		- $images = [];
1153		- foreach ( $settings['carousel'] as $item ) {
1154		- $url = $item['url'] ?? '';
1155		- if ( empty( $url ) ) {
1156		- continue;
1157		- }
1158		- $alt = '';
1159		- if ( ! empty( $item['id'] ) ) {
1160		- $alt = get_post_meta( $item['id'], '_wp_attachment_image_alt', true );
1161		- }
1162		- $images[] = ' . ')';
1163		- }
1164		- return implode( "\n\n", $images );
1165	1022	}
1166	1023	}