PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.2
Elementor Website Builder – more than just a page builder v3.0.2
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | includes/widgets/tabs.php +70 -297 4.2.23.0.2 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,50 +73,21 @@
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 - * @since 3.1.0
82 + * @since 1.0.0
109 83 * @access protected
110 84 */
111 - protected function register_controls() {
112 - $start = is_rtl() ? 'end' : 'start';
113 - $end = is_rtl() ? 'start' : 'end';
114 -
85 + protected function _register_controls() {
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,16 +94,13 @@
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 - 'dynamic' => [
133 - 'active' => true,
134 - ],
135 103 ]
136 104 );
137 105
138 106 $repeater->add_control(
@@ -137,42 +105,33 @@
137 105
138 106 $repeater->add_control(
139 107 'tab_content',
140 108 [
141 - 'label' => esc_html__( 'Content', 'elementor' ),
142 - 'default' => esc_html__( 'Tab Content', 'elementor' ),
143 - 'placeholder' => esc_html__( 'Tab Content', 'elementor' ),
109 + 'label' => __( 'Content', 'elementor' ),
110 + 'default' => __( 'Tab Content', 'elementor' ),
111 + 'placeholder' => __( 'Tab Content', 'elementor' ),
144 112 'type' => Controls_Manager::WYSIWYG,
113 + 'show_label' => false,
114 + 'dynamic' => [
115 + 'active' => false,
116 + ],
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,95 +137,37 @@
178 137 ]
179 138 );
180 139
181 140 $this->add_control(
182 - 'type',
141 + 'view',
183 142 [
184 - 'label' => esc_html__( 'Position', 'elementor' ),
185 - 'type' => Controls_Manager::CHOOSE,
186 - 'default' => 'horizontal',
187 - '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 - ],
196 - ],
197 - 'classes' => 'elementor-control-start-end',
198 - 'prefix_class' => 'elementor-tabs-view-',
199 - 'separator' => 'before',
143 + 'label' => __( 'View', 'elementor' ),
144 + 'type' => Controls_Manager::HIDDEN,
145 + 'default' => 'traditional',
200 146 ]
201 147 );
202 148
203 149 $this->add_control(
204 - 'tabs_align_horizontal',
150 + 'type',
205 151 [
206 - 'label' => esc_html__( 'Alignment', 'elementor' ),
207 - 'type' => Controls_Manager::CHOOSE,
152 + 'label' => __( 'Type', 'elementor' ),
153 + 'type' => Controls_Manager::SELECT,
154 + 'default' => 'horizontal',
208 155 'options' => [
209 - '' => [
210 - 'title' => esc_html__( 'Start', 'elementor' ),
211 - 'icon' => "eicon-align-$start-h",
212 - ],
213 - 'center' => [
214 - 'title' => esc_html__( 'Center', 'elementor' ),
215 - 'icon' => 'eicon-align-center-h',
216 - ],
217 - 'end' => [
218 - 'title' => esc_html__( 'End', 'elementor' ),
219 - 'icon' => "eicon-align-$end-h",
220 - ],
221 - 'stretch' => [
222 - 'title' => esc_html__( 'Stretch', 'elementor' ),
223 - 'icon' => 'eicon-align-stretch-h',
224 - ],
156 + 'horizontal' => __( 'Horizontal', 'elementor' ),
157 + 'vertical' => __( 'Vertical', 'elementor' ),
225 158 ],
226 - 'prefix_class' => 'elementor-tabs-alignment-',
227 - 'condition' => [
228 - 'type' => 'horizontal',
229 - ],
159 + 'prefix_class' => 'elementor-tabs-view-',
160 + 'separator' => 'before',
230 161 ]
231 162 );
232 163
233 - $this->add_control(
234 - 'tabs_align_vertical',
235 - [
236 - 'label' => esc_html__( 'Alignment', 'elementor' ),
237 - 'type' => Controls_Manager::CHOOSE,
238 - 'options' => [
239 - '' => [
240 - 'title' => esc_html__( 'Start', 'elementor' ),
241 - 'icon' => 'eicon-align-start-v',
242 - ],
243 - 'center' => [
244 - 'title' => esc_html__( 'Center', 'elementor' ),
245 - 'icon' => 'eicon-align-center-v',
246 - ],
247 - 'end' => [
248 - 'title' => esc_html__( 'End', 'elementor' ),
249 - 'icon' => 'eicon-align-end-v',
250 - ],
251 - 'stretch' => [
252 - 'title' => esc_html__( 'Stretch', 'elementor' ),
253 - 'icon' => 'eicon-align-stretch-v',
254 - ],
255 - ],
256 - 'prefix_class' => 'elementor-tabs-alignment-',
257 - 'condition' => [
258 - 'type' => 'vertical',
259 - ],
260 - ]
261 - );
262 -
263 164 $this->end_controls_section();
264 165
265 166 $this->start_controls_section(
266 167 'section_tabs_style',
267 168 [
268 - 'label' => esc_html__( 'Tabs', 'elementor' ),
169 + 'label' => __( 'Tabs', 'elementor' ),
269 170 'tab' => Controls_Manager::TAB_STYLE,
270 171 ]
271 172 );
272 173
@@ -272,31 +173,18 @@
272 173
273 174 $this->add_control(
274 175 'navigation_width',
275 176 [
276 - 'label' => esc_html__( 'Navigation Width', 'elementor' ),
177 + 'label' => __( 'Navigation Width', 'elementor' ),
277 178 'type' => Controls_Manager::SLIDER,
278 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
279 179 'default' => [
280 180 'unit' => '%',
281 181 ],
282 182 'range' => [
283 - 'px' => [
284 - 'min' => 10,
285 - 'max' => 500,
286 - ],
287 183 '%' => [
288 184 'min' => 10,
289 185 'max' => 50,
290 186 ],
291 - 'em' => [
292 - 'min' => 1,
293 - 'max' => 50,
294 - ],
295 - 'rem' => [
296 - 'min' => 1,
297 - 'max' => 50,
298 - ],
299 187 ],
300 188 'selectors' => [
301 189 '{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
302 190 ],
@@ -308,21 +196,18 @@
308 196
309 197 $this->add_control(
310 198 'border_width',
311 199 [
312 - 'label' => esc_html__( 'Border Width', 'elementor' ),
200 + 'label' => __( 'Border Width', 'elementor' ),
313 201 'type' => Controls_Manager::SLIDER,
314 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
315 202 'default' => [
316 203 'size' => 1,
317 204 ],
318 205 'range' => [
319 206 'px' => [
320 - 'max' => 20,
207 + 'min' => 0,
208 + 'max' => 10,
321 209 ],
322 - 'em' => [
323 - 'max' => 2,
324 - ],
325 210 ],
326 211 'selectors' => [
327 212 '{{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 213 ],
@@ -331,9 +216,9 @@
331 216
332 217 $this->add_control(
333 218 'border_color',
334 219 [
335 - 'label' => esc_html__( 'Border Color', 'elementor' ),
220 + 'label' => __( 'Border Color', 'elementor' ),
336 221 'type' => Controls_Manager::COLOR,
337 222 'selectors' => [
338 223 '{{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 224 ],
@@ -342,9 +227,9 @@
342 227
343 228 $this->add_control(
344 229 'background_color',
345 230 [
346 - 'label' => esc_html__( 'Background Color', 'elementor' ),
231 + 'label' => __( 'Background Color', 'elementor' ),
347 232 'type' => Controls_Manager::COLOR,
348 233 'selectors' => [
349 234 '{{WRAPPER}} .elementor-tab-desktop-title.elementor-active' => 'background-color: {{VALUE}};',
350 235 '{{WRAPPER}} .elementor-tabs-content-wrapper' => 'background-color: {{VALUE}};',
@@ -354,9 +239,9 @@
354 239
355 240 $this->add_control(
356 241 'heading_title',
357 242 [
358 - 'label' => esc_html__( 'Title', 'elementor' ),
243 + 'label' => __( 'Title', 'elementor' ),
359 244 'type' => Controls_Manager::HEADING,
360 245 'separator' => 'before',
361 246 ]
362 247 );
@@ -363,12 +248,12 @@
363 248
364 249 $this->add_control(
365 250 'tab_color',
366 251 [
367 - 'label' => esc_html__( 'Color', 'elementor' ),
252 + 'label' => __( 'Color', 'elementor' ),
368 253 'type' => Controls_Manager::COLOR,
369 254 'selectors' => [
370 - '{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}}',
255 + '{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}};',
371 256 ],
372 257 'global' => [
373 258 'default' => Global_Colors::COLOR_PRIMARY,
374 259 ],
@@ -377,13 +262,12 @@
377 262
378 263 $this->add_control(
379 264 'tab_active_color',
380 265 [
381 - 'label' => esc_html__( 'Active Color', 'elementor' ),
266 + 'label' => __( 'Active Color', 'elementor' ),
382 267 'type' => Controls_Manager::COLOR,
383 268 'selectors' => [
384 - '{{WRAPPER}} .elementor-tab-title.elementor-active,
385 - {{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}}',
269 + '{{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}};',
386 270 ],
387 271 'global' => [
388 272 'default' => Global_Colors::COLOR_ACCENT,
389 273 ],
@@ -400,61 +284,12 @@
400 284 ],
401 285 ]
402 286 );
403 287
404 - $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 - Group_Control_Text_Shadow::get_type(),
414 - [
415 - 'name' => 'title_shadow',
416 - 'selector' => '{{WRAPPER}} .elementor-tab-title',
417 - ]
418 - );
419 -
420 288 $this->add_control(
421 - 'title_align',
422 - [
423 - 'label' => esc_html__( 'Alignment', 'elementor' ),
424 - 'type' => Controls_Manager::CHOOSE,
425 - 'options' => [
426 - 'start' => [
427 - 'title' => esc_html__( 'Start', 'elementor' ),
428 - 'icon' => 'eicon-text-align-left',
429 - ],
430 - 'center' => [
431 - 'title' => esc_html__( 'Center', 'elementor' ),
432 - 'icon' => 'eicon-text-align-center',
433 - ],
434 - 'end' => [
435 - 'title' => esc_html__( 'End', 'elementor' ),
436 - 'icon' => 'eicon-text-align-right',
437 - ],
438 - ],
439 - 'classes' => 'elementor-control-start-end',
440 - 'selectors_dictionary' => [
441 - 'left' => is_rtl() ? 'end' : 'start',
442 - 'right' => is_rtl() ? 'start' : 'end',
443 - ],
444 - 'selectors' => [
445 - '{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
446 - ],
447 - 'condition' => [
448 - 'tabs_align' => 'stretch',
449 - ],
450 - ]
451 - );
452 -
453 - $this->add_control(
454 289 'heading_content',
455 290 [
456 - 'label' => esc_html__( 'Content', 'elementor' ),
291 + 'label' => __( 'Content', 'elementor' ),
457 292 'type' => Controls_Manager::HEADING,
458 293 'separator' => 'before',
459 294 ]
460 295 );
@@ -461,9 +296,9 @@
461 296
462 297 $this->add_control(
463 298 'content_color',
464 299 [
465 - 'label' => esc_html__( 'Color', 'elementor' ),
300 + 'label' => __( 'Color', 'elementor' ),
466 301 'type' => Controls_Manager::COLOR,
467 302 'selectors' => [
468 303 '{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
469 304 ],
@@ -483,16 +318,8 @@
483 318 ],
484 319 ]
485 320 );
486 321
487 - $this->add_group_control(
488 - Group_Control_Text_Shadow::get_type(),
489 - [
490 - 'name' => 'content_shadow',
491 - 'selector' => '{{WRAPPER}} .elementor-tab-content',
492 - ]
493 - );
494 -
495 322 $this->end_controls_section();
496 323 }
497 324
498 325 /**
@@ -506,41 +333,33 @@
506 333 protected function render() {
507 334 $tabs = $this->get_settings_for_display( 'tabs' );
508 335
509 336 $id_int = substr( $this->get_id_int(), 0, 3 );
510 -
511 - $this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
512 -
513 337 ?>
514 - <div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
515 - <div class="elementor-tabs-wrapper" role="tablist" >
338 + <div class="elementor-tabs" role="tablist">
339 + <div class="elementor-tabs-wrapper">
516 340 <?php
517 341 foreach ( $tabs as $index => $item ) :
518 342 $tab_count = $index + 1;
343 +
519 344 $tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
520 345
521 346 $this->add_render_attribute( $tab_title_setting_key, [
522 347 'id' => 'elementor-tab-title-' . $id_int . $tab_count,
523 348 'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
524 - 'aria-selected' => 1 === $tab_count ? 'true' : 'false',
525 349 'data-tab' => $tab_count,
526 350 'role' => 'tab',
527 - 'tabindex' => 1 === $tab_count ? '0' : '-1',
528 351 'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
529 - 'aria-expanded' => 'false',
530 352 ] );
531 353 ?>
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>
354 + <div <?php echo $this->get_render_attribute_string( $tab_title_setting_key ); ?>><a href=""><?php echo $item['tab_title']; ?></a></div>
536 355 <?php endforeach; ?>
537 356 </div>
538 - <div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
357 + <div class="elementor-tabs-content-wrapper">
539 358 <?php
540 359 foreach ( $tabs as $index => $item ) :
541 360 $tab_count = $index + 1;
542 - $hidden = 1 === $tab_count ? 'false' : 'hidden';
361 +
543 362 $tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
544 363
545 364 $tab_title_mobile_setting_key = $this->get_repeater_setting_key( 'tab_title_mobile', 'tabs', $tab_count );
546 365
@@ -549,30 +368,20 @@
549 368 'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
550 369 'data-tab' => $tab_count,
551 370 'role' => 'tabpanel',
552 371 'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
553 - 'tabindex' => '0',
554 - 'hidden' => $hidden,
555 372 ] );
556 373
557 374 $this->add_render_attribute( $tab_title_mobile_setting_key, [
558 375 'class' => [ 'elementor-tab-title', 'elementor-tab-mobile-title' ],
559 - 'aria-selected' => 1 === $tab_count ? 'true' : 'false',
560 376 'data-tab' => $tab_count,
561 377 'role' => 'tab',
562 - 'tabindex' => 1 === $tab_count ? '0' : '-1',
563 - 'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
564 - 'aria-expanded' => 'false',
565 378 ] );
566 379
567 380 $this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
568 381 ?>
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>
382 + <div <?php echo $this->get_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php echo $item['tab_title']; ?></div>
383 + <div <?php echo $this->get_render_attribute_string( $tab_content_setting_key ); ?>><?php echo $this->parse_text_editor( $item['tab_content'] ); ?></div>
575 384 <?php endforeach; ?>
576 385 </div>
577 386 </div>
578 387 <?php
@@ -585,75 +394,39 @@
585 394 *
586 395 * @since 2.9.0
587 396 * @access protected
588 397 */
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 398 protected function content_template() {
619 399 ?>
620 - <div class="elementor-tabs" role="tablist" aria-orientation="vertical">
621 - <# if ( settings.tabs ) {
622 - var elementUid = view.getIDInt().toString().substr( 0, 3 ); #>
623 - <div class="elementor-tabs-wrapper" role="tablist">
624 - <# _.each( settings.tabs, function( item, index ) {
625 - var tabCount = index + 1,
626 - tabUid = elementUid + tabCount,
627 - tabTitleKey = 'tab-title-' + tabUid;
628 -
629 - view.addRenderAttribute( tabTitleKey, {
630 - 'id': 'elementor-tab-title-' + tabUid,
631 - 'class': [ 'elementor-tab-title','elementor-tab-desktop-title' ],
632 - 'data-tab': tabCount,
633 - 'role': 'tab',
634 - 'tabindex': 1 === tabCount ? '0' : '-1',
635 - 'aria-controls': 'elementor-tab-content-' + tabUid,
636 - 'aria-expanded': 'false',
637 - } );
638 - #>
639 - <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>{{{ item.tab_title }}}</div>
400 + <div class="elementor-tabs" role="tablist">
401 + <#
402 + if ( settings.tabs ) {
403 + var tabindex = view.getIDInt().toString().substr( 0, 3 );
404 + #>
405 + <div class="elementor-tabs-wrapper">
406 + <#
407 + _.each( settings.tabs, function( item, index ) {
408 + var tabCount = index + 1;
409 + #>
410 + <div id="elementor-tab-title-{{ tabindex + tabCount }}" class="elementor-tab-title elementor-tab-desktop-title" data-tab="{{ tabCount }}" role="tab" aria-controls="elementor-tab-content-{{ tabindex + tabCount }}"><a href="">{{{ item.tab_title }}}</a></div>
640 411 <# } ); #>
641 412 </div>
642 413 <div class="elementor-tabs-content-wrapper">
643 - <# _.each( settings.tabs, function( item, index ) {
414 + <#
415 + _.each( settings.tabs, function( item, index ) {
644 416 var tabCount = index + 1,
645 417 tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs',index );
646 418
647 419 view.addRenderAttribute( tabContentKey, {
648 - 'id': 'elementor-tab-content-' + elementUid + tabCount,
420 + 'id': 'elementor-tab-content-' + tabindex + tabCount,
649 421 'class': [ 'elementor-tab-content', 'elementor-clearfix', 'elementor-repeater-item-' + item._id ],
650 422 'data-tab': tabCount,
651 423 'role' : 'tabpanel',
652 - 'aria-labelledby' : 'elementor-tab-title-' + elementUid + tabCount
424 + 'aria-labelledby' : 'elementor-tab-title-' + tabindex + tabCount
653 425 } );
654 426
655 - view.addInlineEditingAttributes( tabContentKey, 'advanced' ); #>
427 + view.addInlineEditingAttributes( tabContentKey, 'advanced' );
428 + #>
656 429 <div class="elementor-tab-title elementor-tab-mobile-title" data-tab="{{ tabCount }}" role="tab">{{{ item.tab_title }}}</div>
657 430 <div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
658 431 <# } ); #>
659 432 </div>