← All changes | includes/widgets/tabs.php +35 -100 4.1.0-dev2 → 3.11.2 View file →

		@@ -73,34 +73,12 @@
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		- /**
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	77	public function show_in_panel(): bool {
96		- return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
	78	+ return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements' );
97	79	}
98	80
99		- public function has_widget_inner_wrapper(): bool {
100		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
101		- }
102		-
103	81	/**
104	82	* Register tabs widget controls.
105	83	*
106	84	* Adds different input fields to allow the user to change and customize the widget settings.
		@@ -108,11 +86,8 @@
108	86	* @since 3.1.0
109	87	* @access protected
110	88	*/
111	89	protected function register_controls() {
112		- $start = is_rtl() ? 'end' : 'start';
113		- $end = is_rtl() ? 'start' : 'end';
114		-
115	90	$this->start_controls_section(
116	91	'section_tabs',
117	92	[
118	93	'label' => esc_html__( 'Tabs', 'elementor' ),
		@@ -123,9 +98,9 @@
123	98
124	99	$repeater->add_control(
125	100	'tab_title',
126	101	[
127		- 'label' => esc_html__( 'Title', 'elementor' ),
	102	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
128	103	'type' => Controls_Manager::TEXT,
129	104	'default' => esc_html__( 'Tab Title', 'elementor' ),
130	105	'placeholder' => esc_html__( 'Tab Title', 'elementor' ),
131	106	'label_block' => true,
		@@ -141,8 +116,9 @@
141	116	'label' => esc_html__( 'Content', 'elementor' ),
142	117	'default' => esc_html__( 'Tab Content', 'elementor' ),
143	118	'placeholder' => esc_html__( 'Tab Content', 'elementor' ),
144	119	'type' => Controls_Manager::WYSIWYG,
	120	+ 'show_label' => false,
145	121	]
146	122	);
147	123
148	124	$is_nested_tabs_active = Plugin::$instance->widgets_manager->get_widget_types( 'nested-tabs' );
		@@ -178,24 +154,26 @@
178	154	]
179	155	);
180	156
181	157	$this->add_control(
	158	+ 'view',
	159	+ [
	160	+ 'label' => esc_html__( 'View', 'elementor' ),
	161	+ 'type' => Controls_Manager::HIDDEN,
	162	+ 'default' => 'traditional',
	163	+ ]
	164	+ );
	165	+
	166	+ $this->add_control(
182	167	'type',
183	168	[
184	169	'label' => esc_html__( 'Position', 'elementor' ),
185		- 'type' => Controls_Manager::CHOOSE,
	170	+ 'type' => Controls_Manager::SELECT,
186	171	'default' => 'horizontal',
187	172	'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		- ],
	173	+ 'horizontal' => esc_html__( 'Horizontal', 'elementor' ),
	174	+ 'vertical' => esc_html__( 'Vertical', 'elementor' ),
196	175	],
197		- 'classes' => 'elementor-control-start-end',
198	176	'prefix_class' => 'elementor-tabs-view-',
199	177	'separator' => 'before',
200	178	]
201	179	);
		@@ -207,21 +185,21 @@
207	185	'type' => Controls_Manager::CHOOSE,
208	186	'options' => [
209	187	'' => [
210	188	'title' => esc_html__( 'Start', 'elementor' ),
211		- 'icon' => "eicon-align-$start-h",
	189	+ 'icon' => 'eicon-h-align-left',
212	190	],
213	191	'center' => [
214	192	'title' => esc_html__( 'Center', 'elementor' ),
215		- 'icon' => 'eicon-align-center-h',
	193	+ 'icon' => 'eicon-h-align-center',
216	194	],
217	195	'end' => [
218	196	'title' => esc_html__( 'End', 'elementor' ),
219		- 'icon' => "eicon-align-$end-h",
	197	+ 'icon' => 'eicon-h-align-right',
220	198	],
221	199	'stretch' => [
222		- 'title' => esc_html__( 'Stretch', 'elementor' ),
223		- 'icon' => 'eicon-align-stretch-h',
	200	+ 'title' => esc_html__( 'Justified', 'elementor' ),
	201	+ 'icon' => 'eicon-h-align-stretch',
224	202	],
225	203	],
226	204	'prefix_class' => 'elementor-tabs-alignment-',
227	205	'condition' => [
		@@ -237,21 +215,21 @@
237	215	'type' => Controls_Manager::CHOOSE,
238	216	'options' => [
239	217	'' => [
240	218	'title' => esc_html__( 'Start', 'elementor' ),
241		- 'icon' => 'eicon-align-start-v',
	219	+ 'icon' => 'eicon-v-align-top',
242	220	],
243	221	'center' => [
244	222	'title' => esc_html__( 'Center', 'elementor' ),
245		- 'icon' => 'eicon-align-center-v',
	223	+ 'icon' => 'eicon-v-align-middle',
246	224	],
247	225	'end' => [
248	226	'title' => esc_html__( 'End', 'elementor' ),
249		- 'icon' => 'eicon-align-end-v',
	227	+ 'icon' => 'eicon-v-align-bottom',
250	228	],
251	229	'stretch' => [
252		- 'title' => esc_html__( 'Stretch', 'elementor' ),
253		- 'icon' => 'eicon-align-stretch-v',
	230	+ 'title' => esc_html__( 'Justified', 'elementor' ),
	231	+ 'icon' => 'eicon-v-align-stretch',
254	232	],
255	233	],
256	234	'prefix_class' => 'elementor-tabs-alignment-',
257	235	'condition' => [
		@@ -274,29 +252,16 @@
274	252	'navigation_width',
275	253	[
276	254	'label' => esc_html__( 'Navigation Width', 'elementor' ),
277	255	'type' => Controls_Manager::SLIDER,
278		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
279	256	'default' => [
280	257	'unit' => '%',
281	258	],
282	259	'range' => [
283		- 'px' => [
284		- 'min' => 10,
285		- 'max' => 500,
286		- ],
287	260	'%' => [
288	261	'min' => 10,
289	262	'max' => 50,
290	263	],
291		- 'em' => [
292		- 'min' => 1,
293		- 'max' => 50,
294		- ],
295		- 'rem' => [
296		- 'min' => 1,
297		- 'max' => 50,
298		- ],
299	264	],
300	265	'selectors' => [
301	266	'{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
302	267	],
		@@ -310,10 +275,11 @@
310	275	'border_width',
311	276	[
312	277	'label' => esc_html__( 'Border Width', 'elementor' ),
313	278	'type' => Controls_Manager::SLIDER,
314		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	279	+ 'size_units' => [ 'px', '%', 'em' ],
315	280	'default' => [
	281	+ 'unit' => 'px',
316	282	'size' => 1,
317	283	],
318	284	'range' => [
319	285	'px' => [
		@@ -422,10 +388,10 @@
422	388	[
423	389	'label' => esc_html__( 'Alignment', 'elementor' ),
424	390	'type' => Controls_Manager::CHOOSE,
425	391	'options' => [
426		- 'start' => [
427		- 'title' => esc_html__( 'Start', 'elementor' ),
	392	+ 'left' => [
	393	+ 'title' => esc_html__( 'Left', 'elementor' ),
428	394	'icon' => 'eicon-text-align-left',
429	395	],
430	396	'center' => [
431	397	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -430,18 +396,13 @@
430	396	'center' => [
431	397	'title' => esc_html__( 'Center', 'elementor' ),
432	398	'icon' => 'eicon-text-align-center',
433	399	],
434		- 'end' => [
435		- 'title' => esc_html__( 'End', 'elementor' ),
	400	+ 'right' => [
	401	+ 'title' => esc_html__( 'Right', 'elementor' ),
436	402	'icon' => 'eicon-text-align-right',
437	403	],
438	404	],
439		- 'classes' => 'elementor-control-start-end',
440		- 'selectors_dictionary' => [
441		- 'left' => is_rtl() ? 'end' : 'start',
442		- 'right' => is_rtl() ? 'start' : 'end',
443		- ],
444	405	'selectors' => [
445	406	'{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
446	407	],
447	408	'condition' => [
		@@ -507,8 +468,10 @@
507	468	$tabs = $this->get_settings_for_display( 'tabs' );
508	469
509	470	$id_int = substr( $this->get_id_int(), 0, 3 );
510	471
	472	+ $a11y_improvements_experiment = Plugin::$instance->experiments->is_feature_active( 'a11y_improvements' );
	473	+
511	474	$this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
512	475
513	476	?>
514	477	<div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
		@@ -516,8 +479,9 @@
516	479	<?php
517	480	foreach ( $tabs as $index => $item ) :
518	481	$tab_count = $index + 1;
519	482	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
	483	+ $tab_title = $a11y_improvements_experiment ? $item['tab_title'] : '<a href="">' . $item['tab_title'] . '</a>';
520	484
521	485	$this->add_render_attribute( $tab_title_setting_key, [
522	486	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
523	487	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
		@@ -530,9 +494,9 @@
530	494	] );
531	495	?>
532	496	<div <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>><?php
533	497	// PHPCS - the main text of a widget should not be escaped.
534		- echo $item['tab_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	498	+ echo $tab_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
535	499	?></div>
536	500	<?php endforeach; ?>
537	501	</div>
538	502	<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
		@@ -585,37 +549,8 @@
585	549	*
586	550	* @since 2.9.0
587	551	* @access protected
588	552	*/
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	553	protected function content_template() {
619	554	?>
620	555	<div class="elementor-tabs" role="tablist" aria-orientation="vertical">
621	556	<# if ( settings.tabs ) {