← All changes | includes/widgets/tabs.php +34 -120 4.2.0 → 3.5.3 View file →

		@@ -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,11 +82,8 @@
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	89	'label' => esc_html__( 'Tabs', 'elementor' ),
		@@ -123,9 +94,9 @@
123	94
124	95	$repeater->add_control(
125	96	'tab_title',
126	97	[
127		- 'label' => esc_html__( 'Title', 'elementor' ),
	98	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
128	99	'type' => Controls_Manager::TEXT,
129	100	'default' => esc_html__( 'Tab Title', 'elementor' ),
130	101	'placeholder' => esc_html__( 'Tab Title', 'elementor' ),
131	102	'label_block' => true,
		@@ -141,24 +112,12 @@
141	112	'label' => esc_html__( 'Content', 'elementor' ),
142	113	'default' => esc_html__( 'Tab Content', 'elementor' ),
143	114	'placeholder' => esc_html__( '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	123	'label' => esc_html__( 'Tabs Items', 'elementor' ),
		@@ -178,24 +137,26 @@
178	137	]
179	138	);
180	139
181	140	$this->add_control(
	141	+ 'view',
	142	+ [
	143	+ 'label' => esc_html__( 'View', 'elementor' ),
	144	+ 'type' => Controls_Manager::HIDDEN,
	145	+ 'default' => 'traditional',
	146	+ ]
	147	+ );
	148	+
	149	+ $this->add_control(
182	150	'type',
183	151	[
184	152	'label' => esc_html__( 'Position', 'elementor' ),
185		- 'type' => Controls_Manager::CHOOSE,
	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' => esc_html__( 'Horizontal', 'elementor' ),
	157	+ 'vertical' => esc_html__( '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	);
		@@ -207,21 +168,21 @@
207	168	'type' => Controls_Manager::CHOOSE,
208	169	'options' => [
209	170	'' => [
210	171	'title' => esc_html__( 'Start', 'elementor' ),
211		- 'icon' => "eicon-align-$start-h",
	172	+ 'icon' => 'eicon-h-align-left',
212	173	],
213	174	'center' => [
214	175	'title' => esc_html__( 'Center', 'elementor' ),
215		- 'icon' => 'eicon-align-center-h',
	176	+ 'icon' => 'eicon-h-align-center',
216	177	],
217	178	'end' => [
218	179	'title' => esc_html__( 'End', 'elementor' ),
219		- 'icon' => "eicon-align-$end-h",
	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' => esc_html__( 'Justified', 'elementor' ),
	184	+ 'icon' => 'eicon-h-align-stretch',
224	185	],
225	186	],
226	187	'prefix_class' => 'elementor-tabs-alignment-',
227	188	'condition' => [
		@@ -237,21 +198,21 @@
237	198	'type' => Controls_Manager::CHOOSE,
238	199	'options' => [
239	200	'' => [
240	201	'title' => esc_html__( 'Start', 'elementor' ),
241		- 'icon' => 'eicon-align-start-v',
	202	+ 'icon' => 'eicon-v-align-top',
242	203	],
243	204	'center' => [
244	205	'title' => esc_html__( 'Center', 'elementor' ),
245		- 'icon' => 'eicon-align-center-v',
	206	+ 'icon' => 'eicon-v-align-middle',
246	207	],
247	208	'end' => [
248	209	'title' => esc_html__( 'End', 'elementor' ),
249		- 'icon' => 'eicon-align-end-v',
	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' => esc_html__( 'Justified', 'elementor' ),
	214	+ 'icon' => 'eicon-v-align-stretch',
254	215	],
255	216	],
256	217	'prefix_class' => 'elementor-tabs-alignment-',
257	218	'condition' => [
		@@ -274,29 +235,16 @@
274	235	'navigation_width',
275	236	[
276	237	'label' => esc_html__( '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	],
		@@ -310,19 +258,16 @@
310	258	'border_width',
311	259	[
312	260	'label' => esc_html__( '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	],
		@@ -422,10 +367,10 @@
422	367	[
423	368	'label' => esc_html__( 'Alignment', 'elementor' ),
424	369	'type' => Controls_Manager::CHOOSE,
425	370	'options' => [
426		- 'start' => [
427		- 'title' => esc_html__( 'Start', 'elementor' ),
	371	+ 'left' => [
	372	+ 'title' => esc_html__( 'Left', 'elementor' ),
428	373	'icon' => 'eicon-text-align-left',
429	374	],
430	375	'center' => [
431	376	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -430,18 +375,13 @@
430	375	'center' => [
431	376	'title' => esc_html__( 'Center', 'elementor' ),
432	377	'icon' => 'eicon-text-align-center',
433	378	],
434		- 'end' => [
435		- 'title' => esc_html__( 'End', 'elementor' ),
	379	+ 'right' => [
	380	+ 'title' => esc_html__( 'Right', 'elementor' ),
436	381	'icon' => 'eicon-text-align-right',
437	382	],
438	383	],
439		- 'classes' => 'elementor-control-start-end',
440		- 'selectors_dictionary' => [
441		- 'left' => is_rtl() ? 'end' : 'start',
442		- 'right' => is_rtl() ? 'start' : 'end',
443		- ],
444	384	'selectors' => [
445	385	'{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
446	386	],
447	387	'condition' => [
		@@ -507,8 +447,10 @@
507	447	$tabs = $this->get_settings_for_display( 'tabs' );
508	448
509	449	$id_int = substr( $this->get_id_int(), 0, 3 );
510	450
	451	+ $a11y_improvements_experiment = Plugin::$instance->experiments->is_feature_active( 'a11y_improvements' );
	452	+
511	453	$this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
512	454
513	455	?>
514	456	<div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
		@@ -516,8 +458,9 @@
516	458	<?php
517	459	foreach ( $tabs as $index => $item ) :
518	460	$tab_count = $index + 1;
519	461	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
	462	+ $tab_title = $a11y_improvements_experiment ? $item['tab_title'] : '<a href="">' . $item['tab_title'] . '</a>';
520	463
521	464	$this->add_render_attribute( $tab_title_setting_key, [
522	465	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
523	466	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
		@@ -530,9 +473,9 @@
530	473	] );
531	474	?>
532	475	<div <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>><?php
533	476	// PHPCS - the main text of a widget should not be escaped.
534		- echo $item['tab_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	477	+ echo $tab_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
535	478	?></div>
536	479	<?php endforeach; ?>
537	480	</div>
538	481	<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
		@@ -585,37 +528,8 @@
585	528	*
586	529	* @since 2.9.0
587	530	* @access protected
588	531	*/
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	532	protected function content_template() {
619	533	?>
620	534	<div class="elementor-tabs" role="tablist" aria-orientation="vertical">
621	535	<# if ( settings.tabs ) {