← All changes | includes/widgets/tabs.php +70 -171 4.2.0-dev2 → 3.2.4 View file →

		@@ -42,9 +42,9 @@
42	42	*
43	43	* @return string Widget title.
44	44	*/
45	45	public function get_title() {
46		- return esc_html__( 'Tabs', 'elementor' );
	46	+ return __( 'Tabs', 'elementor' );
47	47	}
48	48
49	49	/**
50	50	* Get widget icon.
		@@ -73,35 +73,9 @@
73	73	public function get_keywords() {
74	74	return [ 'tabs', 'accordion', 'toggle' ];
75	75	}
76	76
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	77	/**
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 [ 'widget-tabs' ];
93		- }
94		-
95		- public function show_in_panel(): bool {
96		- return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
97		- }
98		-
99		- public function has_widget_inner_wrapper(): bool {
100		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
101		- }
102		-
103		- /**
104	78	* Register tabs widget controls.
105	79	*
106	80	* Adds different input fields to allow the user to change and customize the widget settings.
107	81	*
		@@ -108,15 +82,12 @@
108	82	* @since 3.1.0
109	83	* @access protected
110	84	*/
111	85	protected function register_controls() {
112		- $start = is_rtl() ? 'end' : 'start';
113		- $end = is_rtl() ? 'start' : 'end';
114		-
115	86	$this->start_controls_section(
116	87	'section_tabs',
117	88	[
118		- 'label' => esc_html__( 'Tabs', 'elementor' ),
	89	+ 'label' => __( 'Tabs', 'elementor' ),
119	90	]
120	91	);
121	92
122	93	$repeater = new Repeater();
		@@ -123,12 +94,12 @@
123	94
124	95	$repeater->add_control(
125	96	'tab_title',
126	97	[
127		- 'label' => esc_html__( 'Title', 'elementor' ),
	98	+ 'label' => __( 'Title & Description', 'elementor' ),
128	99	'type' => Controls_Manager::TEXT,
129		- 'default' => esc_html__( 'Tab Title', 'elementor' ),
130		- 'placeholder' => esc_html__( 'Tab Title', 'elementor' ),
	100	+ 'default' => __( 'Tab Title', 'elementor' ),
	101	+ 'placeholder' => __( 'Tab Title', 'elementor' ),
131	102	'label_block' => true,
132	103	'dynamic' => [
133	104	'active' => true,
134	105	],
		@@ -137,42 +108,30 @@
137	108
138	109	$repeater->add_control(
139	110	'tab_content',
140	111	[
141		- 'label' => esc_html__( 'Content', 'elementor' ),
142		- 'default' => esc_html__( 'Tab Content', 'elementor' ),
143		- 'placeholder' => esc_html__( 'Tab Content', 'elementor' ),
	112	+ 'label' => __( 'Content', 'elementor' ),
	113	+ 'default' => __( 'Tab Content', 'elementor' ),
	114	+ 'placeholder' => __( 'Tab Content', 'elementor' ),
144	115	'type' => Controls_Manager::WYSIWYG,
	116	+ 'show_label' => false,
145	117	]
146	118	);
147	119
148		- $is_nested_tabs_active = Plugin::$instance->widgets_manager->get_widget_types( 'nested-tabs' );
149		-
150		- if ( $is_nested_tabs_active ) {
151		- $this->add_deprecation_message(
152		- '3.8.0',
153		- esc_html__(
154		- 'You are currently editing a Tabs Widget in its old version. Any new tabs widget dragged into the canvas will be the new Tab widget, with the improved Nested capabilities.',
155		- 'elementor'
156		- ),
157		- 'nested-tabs'
158		- );
159		- }
160		-
161	120	$this->add_control(
162	121	'tabs',
163	122	[
164		- 'label' => esc_html__( 'Tabs Items', 'elementor' ),
	123	+ 'label' => __( 'Tabs Items', 'elementor' ),
165	124	'type' => Controls_Manager::REPEATER,
166	125	'fields' => $repeater->get_controls(),
167	126	'default' => [
168	127	[
169		- 'tab_title' => esc_html__( 'Tab #1', 'elementor' ),
170		- 'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
	128	+ 'tab_title' => __( 'Tab #1', 'elementor' ),
	129	+ 'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
171	130	],
172	131	[
173		- 'tab_title' => esc_html__( 'Tab #2', 'elementor' ),
174		- 'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
	132	+ 'tab_title' => __( 'Tab #2', 'elementor' ),
	133	+ 'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
175	134	],
176	135	],
177	136	'title_field' => '{{{ tab_title }}}',
178	137	]
		@@ -178,24 +137,26 @@
178	137	]
179	138	);
180	139
181	140	$this->add_control(
	141	+ 'view',
	142	+ [
	143	+ 'label' => __( 'View', 'elementor' ),
	144	+ 'type' => Controls_Manager::HIDDEN,
	145	+ 'default' => 'traditional',
	146	+ ]
	147	+ );
	148	+
	149	+ $this->add_control(
182	150	'type',
183	151	[
184		- 'label' => esc_html__( 'Position', 'elementor' ),
185		- 'type' => Controls_Manager::CHOOSE,
	152	+ 'label' => __( 'Position', 'elementor' ),
	153	+ 'type' => Controls_Manager::SELECT,
186	154	'default' => 'horizontal',
187	155	'options' => [
188		- 'vertical' => [
189		- 'title' => esc_html__( 'Vertical', 'elementor' ),
190		- 'icon' => 'eicon-h-align-left',
191		- ],
192		- 'horizontal' => [
193		- 'title' => esc_html__( 'Horizontal', 'elementor' ),
194		- 'icon' => 'eicon-v-align-top',
195		- ],
	156	+ 'horizontal' => __( 'Horizontal', 'elementor' ),
	157	+ 'vertical' => __( 'Vertical', 'elementor' ),
196	158	],
197		- 'classes' => 'elementor-control-start-end',
198	159	'prefix_class' => 'elementor-tabs-view-',
199	160	'separator' => 'before',
200	161	]
201	162	);
		@@ -202,26 +163,26 @@
202	163
203	164	$this->add_control(
204	165	'tabs_align_horizontal',
205	166	[
206		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	167	+ 'label' => __( 'Alignment', 'elementor' ),
207	168	'type' => Controls_Manager::CHOOSE,
208	169	'options' => [
209	170	'' => [
210		- 'title' => esc_html__( 'Start', 'elementor' ),
211		- 'icon' => "eicon-align-$start-h",
	171	+ 'title' => __( 'Start', 'elementor' ),
	172	+ 'icon' => 'eicon-h-align-left',
212	173	],
213	174	'center' => [
214		- 'title' => esc_html__( 'Center', 'elementor' ),
215		- 'icon' => 'eicon-align-center-h',
	175	+ 'title' => __( 'Center', 'elementor' ),
	176	+ 'icon' => 'eicon-h-align-center',
216	177	],
217	178	'end' => [
218		- 'title' => esc_html__( 'End', 'elementor' ),
219		- 'icon' => "eicon-align-$end-h",
	179	+ 'title' => __( 'End', 'elementor' ),
	180	+ 'icon' => 'eicon-h-align-right',
220	181	],
221	182	'stretch' => [
222		- 'title' => esc_html__( 'Stretch', 'elementor' ),
223		- 'icon' => 'eicon-align-stretch-h',
	183	+ 'title' => __( 'Justified', 'elementor' ),
	184	+ 'icon' => 'eicon-h-align-stretch',
224	185	],
225	186	],
226	187	'prefix_class' => 'elementor-tabs-alignment-',
227	188	'condition' => [
		@@ -232,26 +193,26 @@
232	193
233	194	$this->add_control(
234	195	'tabs_align_vertical',
235	196	[
236		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	197	+ 'label' => __( 'Alignment', 'elementor' ),
237	198	'type' => Controls_Manager::CHOOSE,
238	199	'options' => [
239	200	'' => [
240		- 'title' => esc_html__( 'Start', 'elementor' ),
241		- 'icon' => 'eicon-align-start-v',
	201	+ 'title' => __( 'Start', 'elementor' ),
	202	+ 'icon' => 'eicon-v-align-top',
242	203	],
243	204	'center' => [
244		- 'title' => esc_html__( 'Center', 'elementor' ),
245		- 'icon' => 'eicon-align-center-v',
	205	+ 'title' => __( 'Center', 'elementor' ),
	206	+ 'icon' => 'eicon-v-align-middle',
246	207	],
247	208	'end' => [
248		- 'title' => esc_html__( 'End', 'elementor' ),
249		- 'icon' => 'eicon-align-end-v',
	209	+ 'title' => __( 'End', 'elementor' ),
	210	+ 'icon' => 'eicon-v-align-bottom',
250	211	],
251	212	'stretch' => [
252		- 'title' => esc_html__( 'Stretch', 'elementor' ),
253		- 'icon' => 'eicon-align-stretch-v',
	213	+ 'title' => __( 'Justified', 'elementor' ),
	214	+ 'icon' => 'eicon-v-align-stretch',
254	215	],
255	216	],
256	217	'prefix_class' => 'elementor-tabs-alignment-',
257	218	'condition' => [
		@@ -264,9 +225,9 @@
264	225
265	226	$this->start_controls_section(
266	227	'section_tabs_style',
267	228	[
268		- 'label' => esc_html__( 'Tabs', 'elementor' ),
	229	+ 'label' => __( 'Tabs', 'elementor' ),
269	230	'tab' => Controls_Manager::TAB_STYLE,
270	231	]
271	232	);
272	233
		@@ -272,31 +233,18 @@
272	233
273	234	$this->add_control(
274	235	'navigation_width',
275	236	[
276		- 'label' => esc_html__( 'Navigation Width', 'elementor' ),
	237	+ 'label' => __( 'Navigation Width', 'elementor' ),
277	238	'type' => Controls_Manager::SLIDER,
278		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
279	239	'default' => [
280	240	'unit' => '%',
281	241	],
282	242	'range' => [
283		- 'px' => [
284		- 'min' => 10,
285		- 'max' => 500,
286		- ],
287	243	'%' => [
288	244	'min' => 10,
289	245	'max' => 50,
290	246	],
291		- 'em' => [
292		- 'min' => 1,
293		- 'max' => 50,
294		- ],
295		- 'rem' => [
296		- 'min' => 1,
297		- 'max' => 50,
298		- ],
299	247	],
300	248	'selectors' => [
301	249	'{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
302	250	],
		@@ -308,21 +256,18 @@
308	256
309	257	$this->add_control(
310	258	'border_width',
311	259	[
312		- 'label' => esc_html__( 'Border Width', 'elementor' ),
	260	+ 'label' => __( 'Border Width', 'elementor' ),
313	261	'type' => Controls_Manager::SLIDER,
314		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
315	262	'default' => [
316	263	'size' => 1,
317	264	],
318	265	'range' => [
319	266	'px' => [
320		- 'max' => 20,
	267	+ 'min' => 0,
	268	+ 'max' => 10,
321	269	],
322		- 'em' => [
323		- 'max' => 2,
324		- ],
325	270	],
326	271	'selectors' => [
327	272	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title:before, {{WRAPPER}} .elementor-tab-title:after, {{WRAPPER}} .elementor-tab-content, {{WRAPPER}} .elementor-tabs-content-wrapper' => 'border-width: {{SIZE}}{{UNIT}};',
328	273	],
		@@ -331,9 +276,9 @@
331	276
332	277	$this->add_control(
333	278	'border_color',
334	279	[
335		- 'label' => esc_html__( 'Border Color', 'elementor' ),
	280	+ 'label' => __( 'Border Color', 'elementor' ),
336	281	'type' => Controls_Manager::COLOR,
337	282	'selectors' => [
338	283	'{{WRAPPER}} .elementor-tab-mobile-title, {{WRAPPER}} .elementor-tab-desktop-title.elementor-active, {{WRAPPER}} .elementor-tab-title:before, {{WRAPPER}} .elementor-tab-title:after, {{WRAPPER}} .elementor-tab-content, {{WRAPPER}} .elementor-tabs-content-wrapper' => 'border-color: {{VALUE}};',
339	284	],
		@@ -342,9 +287,9 @@
342	287
343	288	$this->add_control(
344	289	'background_color',
345	290	[
346		- 'label' => esc_html__( 'Background Color', 'elementor' ),
	291	+ 'label' => __( 'Background Color', 'elementor' ),
347	292	'type' => Controls_Manager::COLOR,
348	293	'selectors' => [
349	294	'{{WRAPPER}} .elementor-tab-desktop-title.elementor-active' => 'background-color: {{VALUE}};',
350	295	'{{WRAPPER}} .elementor-tabs-content-wrapper' => 'background-color: {{VALUE}};',
		@@ -354,9 +299,9 @@
354	299
355	300	$this->add_control(
356	301	'heading_title',
357	302	[
358		- 'label' => esc_html__( 'Title', 'elementor' ),
	303	+ 'label' => __( 'Title', 'elementor' ),
359	304	'type' => Controls_Manager::HEADING,
360	305	'separator' => 'before',
361	306	]
362	307	);
		@@ -363,9 +308,9 @@
363	308
364	309	$this->add_control(
365	310	'tab_color',
366	311	[
367		- 'label' => esc_html__( 'Color', 'elementor' ),
	312	+ 'label' => __( 'Color', 'elementor' ),
368	313	'type' => Controls_Manager::COLOR,
369	314	'selectors' => [
370	315	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}}',
371	316	],
		@@ -377,9 +322,9 @@
377	322
378	323	$this->add_control(
379	324	'tab_active_color',
380	325	[
381		- 'label' => esc_html__( 'Active Color', 'elementor' ),
	326	+ 'label' => __( 'Active Color', 'elementor' ),
382	327	'type' => Controls_Manager::COLOR,
383	328	'selectors' => [
384	329	'{{WRAPPER}} .elementor-tab-title.elementor-active,
385	330	{{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}}',
		@@ -401,16 +346,8 @@
401	346	]
402	347	);
403	348
404	349	$this->add_group_control(
405		- Group_Control_Text_Stroke::get_type(),
406		- [
407		- 'name' => 'text_stroke',
408		- 'selector' => '{{WRAPPER}} .elementor-tab-title',
409		- ]
410		- );
411		-
412		- $this->add_group_control(
413	350	Group_Control_Text_Shadow::get_type(),
414	351	[
415	352	'name' => 'title_shadow',
416	353	'selector' => '{{WRAPPER}} .elementor-tab-title',
		@@ -419,29 +356,24 @@
419	356
420	357	$this->add_control(
421	358	'title_align',
422	359	[
423		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	360	+ 'label' => __( 'Alignment', 'elementor' ),
424	361	'type' => Controls_Manager::CHOOSE,
425	362	'options' => [
426		- 'start' => [
427		- 'title' => esc_html__( 'Start', 'elementor' ),
	363	+ 'left' => [
	364	+ 'title' => __( 'Left', 'elementor' ),
428	365	'icon' => 'eicon-text-align-left',
429	366	],
430	367	'center' => [
431		- 'title' => esc_html__( 'Center', 'elementor' ),
	368	+ 'title' => __( 'Center', 'elementor' ),
432	369	'icon' => 'eicon-text-align-center',
433	370	],
434		- 'end' => [
435		- 'title' => esc_html__( 'End', 'elementor' ),
	371	+ 'right' => [
	372	+ 'title' => __( 'Right', 'elementor' ),
436	373	'icon' => 'eicon-text-align-right',
437	374	],
438	375	],
439		- 'classes' => 'elementor-control-start-end',
440		- 'selectors_dictionary' => [
441		- 'left' => is_rtl() ? 'end' : 'start',
442		- 'right' => is_rtl() ? 'start' : 'end',
443		- ],
444	376	'selectors' => [
445	377	'{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
446	378	],
447	379	'condition' => [
		@@ -452,9 +384,9 @@
452	384
453	385	$this->add_control(
454	386	'heading_content',
455	387	[
456		- 'label' => esc_html__( 'Content', 'elementor' ),
	388	+ 'label' => __( 'Content', 'elementor' ),
457	389	'type' => Controls_Manager::HEADING,
458	390	'separator' => 'before',
459	391	]
460	392	);
		@@ -461,9 +393,9 @@
461	393
462	394	$this->add_control(
463	395	'content_color',
464	396	[
465		- 'label' => esc_html__( 'Color', 'elementor' ),
	397	+ 'label' => __( 'Color', 'elementor' ),
466	398	'type' => Controls_Manager::COLOR,
467	399	'selectors' => [
468	400	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
469	401	],
		@@ -507,17 +439,20 @@
507	439	$tabs = $this->get_settings_for_display( 'tabs' );
508	440
509	441	$id_int = substr( $this->get_id_int(), 0, 3 );
510	442
	443	+ $a11y_improvements_experiment = Plugin::$instance->experiments->is_feature_active( 'a11y_improvements' );
	444	+
511	445	$this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
512	446
513	447	?>
514		- <div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
	448	+ <div <?php echo $this->get_render_attribute_string( 'elementor-tabs' ); ?>>
515	449	<div class="elementor-tabs-wrapper" role="tablist" >
516	450	<?php
517	451	foreach ( $tabs as $index => $item ) :
518	452	$tab_count = $index + 1;
519	453	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
	454	+ $tab_title = $a11y_improvements_experiment ? $item['tab_title'] : '<a href="">' . $item['tab_title'] . '</a>';
520	455
521	456	$this->add_render_attribute( $tab_title_setting_key, [
522	457	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
523	458	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
		@@ -528,12 +463,9 @@
528	463	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
529	464	'aria-expanded' => 'false',
530	465	] );
531	466	?>
532		- <div <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>><?php
533		- // PHPCS - the main text of a widget should not be escaped.
534		- echo $item['tab_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
535		- ?></div>
	467	+ <div <?php echo $this->get_render_attribute_string( $tab_title_setting_key ); ?>><?php echo $tab_title; ?></div>
536	468	<?php endforeach; ?>
537	469	</div>
538	470	<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
539	471	<?php
		@@ -565,14 +497,10 @@
565	497	] );
566	498
567	499	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
568	500	?>
569		- <div <?php $this->print_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php
570		- $this->print_unescaped_setting( 'tab_title', 'tabs', $index );
571		- ?></div>
572		- <div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
573		- $this->print_text_editor( $item['tab_content'] );
574		- ?></div>
	501	+ <div <?php echo $this->get_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php echo $item['tab_title']; ?></div>
	502	+ <div <?php echo $this->get_render_attribute_string( $tab_content_setting_key ); ?>><?php echo $this->parse_text_editor( $item['tab_content'] ); ?></div>
575	503	<?php endforeach; ?>
576	504	</div>
577	505	</div>
578	506	<?php
		@@ -585,37 +513,8 @@
585	513	*
586	514	* @since 2.9.0
587	515	* @access protected
588	516	*/
589		- public function render_markdown(): string {
590		- $tabs = $this->get_settings_for_display( 'tabs' );
591		-
592		- if ( empty( $tabs ) ) {
593		- return '';
594		- }
595		-
596		- $sections = [];
597		-
598		- foreach ( $tabs as $item ) {
599		- $title = Utils::html_to_plain_text( $item['tab_title'] ?? '' );
600		- $content = \Elementor\Modules\MarkdownRender\Html_To_Markdown::convert( $item['tab_content'] ?? '' );
601		-
602		- if ( empty( $title ) && empty( $content ) ) {
603		- continue;
604		- }
605		-
606		- $section = '### ' . $title;
607		-
608		- if ( ! empty( $content ) ) {
609		- $section .= "\n\n" . $content;
610		- }
611		-
612		- $sections[] = $section;
613		- }
614		-
615		- return implode( "\n\n", $sections );
616		- }
617		-
618	517	protected function content_template() {
619	518	?>
620	519	<div class="elementor-tabs" role="tablist" aria-orientation="vertical">
621	520	<# if ( settings.tabs ) {