PluginProbe
Elementor Website Builder – more than just a page builder / 3.2.0
Elementor Website Builder – more than just a page builder v3.2.0
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/elements/section.php +265 -308 4.1.0-dev33.2.0 View file →
@@ -74,9 +74,9 @@
74 74 *
75 75 * @return string Section title.
76 76 */
77 77 public function get_title() {
78 - return esc_html__( 'Section', 'elementor' );
78 + return __( 'Section', 'elementor' );
79 79 }
80 80
81 81 /**
82 82 * Get section icon.
@@ -91,12 +91,8 @@
91 91 public function get_icon() {
92 92 return 'eicon-columns';
93 93 }
94 94
95 - protected function is_dynamic_content(): bool {
96 - return false;
97 - }
98 -
99 95 /**
100 96 * Get presets.
101 97 *
102 98 * Retrieve a specific preset columns for a given columns count, or a list
@@ -227,18 +223,18 @@
227 223 protected function register_controls() {
228 224 $this->start_controls_section(
229 225 'section_layout',
230 226 [
231 - 'label' => esc_html__( 'Layout', 'elementor' ),
227 + 'label' => __( 'Layout', 'elementor' ),
232 228 'tab' => Controls_Manager::TAB_LAYOUT,
233 229 ]
234 230 );
235 231
236 - // Element Name for the Navigator.
232 + // Element Name for the Navigator
237 233 $this->add_control(
238 234 '_title',
239 235 [
240 - 'label' => esc_html__( 'Title', 'elementor' ),
236 + 'label' => __( 'Title', 'elementor' ),
241 237 'type' => Controls_Manager::HIDDEN,
242 238 'render_type' => 'none',
243 239 ]
244 240 );
@@ -245,23 +241,23 @@
245 241
246 242 $this->add_control(
247 243 'layout',
248 244 [
249 - 'label' => esc_html__( 'Content Width', 'elementor' ),
245 + 'label' => __( 'Content Width', 'elementor' ),
250 246 'type' => Controls_Manager::SELECT,
251 247 'default' => 'boxed',
252 248 'options' => [
253 - 'boxed' => esc_html__( 'Boxed', 'elementor' ),
254 - 'full_width' => esc_html__( 'Full Width', 'elementor' ),
249 + 'boxed' => __( 'Boxed', 'elementor' ),
250 + 'full_width' => __( 'Full Width', 'elementor' ),
255 251 ],
256 252 'prefix_class' => 'elementor-section-',
257 253 ]
258 254 );
259 255
260 - $this->add_responsive_control(
256 + $this->add_control(
261 257 'content_width',
262 258 [
263 - 'label' => esc_html__( 'Width', 'elementor' ),
259 + 'label' => __( 'Content Width', 'elementor' ),
264 260 'type' => Controls_Manager::SLIDER,
265 261 'range' => [
266 262 'px' => [
267 263 'min' => 500,
@@ -273,8 +269,10 @@
273 269 ],
274 270 'condition' => [
275 271 'layout' => [ 'boxed' ],
276 272 ],
273 + 'show_label' => false,
274 + 'separator' => 'none',
277 275 ]
278 276 );
279 277
280 278 $this->add_control(
@@ -279,19 +277,19 @@
279 277
280 278 $this->add_control(
281 279 'gap',
282 280 [
283 - 'label' => esc_html__( 'Columns Gap', 'elementor' ),
281 + 'label' => __( 'Columns Gap', 'elementor' ),
284 282 'type' => Controls_Manager::SELECT,
285 283 'default' => 'default',
286 284 'options' => [
287 - 'default' => esc_html__( 'Default', 'elementor' ),
288 - 'no' => esc_html__( 'No Gap', 'elementor' ),
289 - 'narrow' => esc_html__( 'Narrow', 'elementor' ),
290 - 'extended' => esc_html__( 'Extended', 'elementor' ),
291 - 'wide' => esc_html__( 'Wide', 'elementor' ),
292 - 'wider' => esc_html__( 'Wider', 'elementor' ),
293 - 'custom' => esc_html__( 'Custom', 'elementor' ),
285 + 'default' => __( 'Default', 'elementor' ),
286 + 'no' => __( 'No Gap', 'elementor' ),
287 + 'narrow' => __( 'Narrow', 'elementor' ),
288 + 'extended' => __( 'Extended', 'elementor' ),
289 + 'wide' => __( 'Wide', 'elementor' ),
290 + 'wider' => __( 'Wider', 'elementor' ),
291 + 'custom' => __( 'Custom', 'elementor' ),
294 292 ],
295 293 ]
296 294 );
297 295
@@ -297,16 +295,29 @@
297 295
298 296 $this->add_responsive_control(
299 297 'gap_columns_custom',
300 298 [
301 - 'label' => esc_html__( 'Custom Columns Gap', 'elementor' ),
299 + 'label' => __( 'Custom Columns Gap', 'elementor' ),
302 300 'type' => Controls_Manager::SLIDER,
303 301 'range' => [
304 302 'px' => [
303 + 'min' => 0,
305 304 'max' => 500,
306 305 ],
306 + '%' => [
307 + 'min' => 0,
308 + 'max' => 100,
309 + ],
310 + 'vh' => [
311 + 'min' => 0,
312 + 'max' => 100,
313 + ],
314 + 'vw' => [
315 + 'min' => 0,
316 + 'max' => 100,
317 + ],
307 318 ],
308 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
319 + 'size_units' => [ 'px', '%', 'vh', 'vw' ],
309 320 'selectors' => [
310 321 '{{WRAPPER}} .elementor-column-gap-custom .elementor-column > .elementor-element-populated' => 'padding: {{SIZE}}{{UNIT}};',
311 322 ],
312 323 'condition' => [
@@ -317,15 +328,15 @@
317 328
318 329 $this->add_control(
319 330 'height',
320 331 [
321 - 'label' => esc_html__( 'Height', 'elementor' ),
332 + 'label' => __( 'Height', 'elementor' ),
322 333 'type' => Controls_Manager::SELECT,
323 334 'default' => 'default',
324 335 'options' => [
325 - 'default' => esc_html__( 'Default', 'elementor' ),
326 - 'full' => esc_html__( 'Fit To Screen', 'elementor' ),
327 - 'min-height' => esc_html__( 'Min Height', 'elementor' ),
336 + 'default' => __( 'Default', 'elementor' ),
337 + 'full' => __( 'Fit To Screen', 'elementor' ),
338 + 'min-height' => __( 'Min Height', 'elementor' ),
328 339 ],
329 340 'prefix_class' => 'elementor-section-height-',
330 341 'hide_in_inner' => true,
331 342 ]
@@ -333,9 +344,9 @@
333 344
334 345 $this->add_responsive_control(
335 346 'custom_height',
336 347 [
337 - 'label' => esc_html__( 'Minimum Height', 'elementor' ),
348 + 'label' => __( 'Minimum Height', 'elementor' ),
338 349 'type' => Controls_Manager::SLIDER,
339 350 'default' => [
340 351 'size' => 400,
341 352 ],
@@ -340,12 +351,21 @@
340 351 'size' => 400,
341 352 ],
342 353 'range' => [
343 354 'px' => [
355 + 'min' => 0,
344 356 'max' => 1440,
345 357 ],
358 + 'vh' => [
359 + 'min' => 0,
360 + 'max' => 100,
361 + ],
362 + 'vw' => [
363 + 'min' => 0,
364 + 'max' => 100,
365 + ],
346 366 ],
347 - 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
367 + 'size_units' => [ 'px', 'vh', 'vw' ],
348 368 'selectors' => [
349 369 '{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};',
350 370 ],
351 371 'condition' => [
@@ -357,15 +377,15 @@
357 377
358 378 $this->add_control(
359 379 'height_inner',
360 380 [
361 - 'label' => esc_html__( 'Height', 'elementor' ),
381 + 'label' => __( 'Height', 'elementor' ),
362 382 'type' => Controls_Manager::SELECT,
363 383 'default' => 'default',
364 384 'options' => [
365 - 'default' => esc_html__( 'Default', 'elementor' ),
366 - 'full' => esc_html__( 'Fit To Screen', 'elementor' ),
367 - 'min-height' => esc_html__( 'Min Height', 'elementor' ),
385 + 'default' => __( 'Default', 'elementor' ),
386 + 'full' => __( 'Fit To Screen', 'elementor' ),
387 + 'min-height' => __( 'Min Height', 'elementor' ),
368 388 ],
369 389 'prefix_class' => 'elementor-section-height-',
370 390 'hide_in_top' => true,
371 391 ]
@@ -373,9 +393,9 @@
373 393
374 394 $this->add_responsive_control(
375 395 'custom_height_inner',
376 396 [
377 - 'label' => esc_html__( 'Minimum Height', 'elementor' ),
397 + 'label' => __( 'Minimum Height', 'elementor' ),
378 398 'type' => Controls_Manager::SLIDER,
379 399 'default' => [
380 400 'size' => 400,
381 401 ],
@@ -380,8 +400,9 @@
380 400 'size' => 400,
381 401 ],
382 402 'range' => [
383 403 'px' => [
404 + 'min' => 0,
384 405 'max' => 1440,
385 406 ],
386 407 ],
387 408 'selectors' => [
@@ -389,9 +410,9 @@
389 410 ],
390 411 'condition' => [
391 412 'height_inner' => [ 'min-height' ],
392 413 ],
393 - 'size_units' => [ 'px', 'em', 'rem', 'vh', 'vw', 'custom' ],
414 + 'size_units' => [ 'px', 'vh', 'vw' ],
394 415 'hide_in_top' => true,
395 416 ]
396 417 );
397 418
@@ -397,16 +418,16 @@
397 418
398 419 $this->add_control(
399 420 'column_position',
400 421 [
401 - 'label' => esc_html__( 'Column Position', 'elementor' ),
422 + 'label' => __( 'Column Position', 'elementor' ),
402 423 'type' => Controls_Manager::SELECT,
403 424 'default' => 'middle',
404 425 'options' => [
405 - 'stretch' => esc_html__( 'Stretch', 'elementor' ),
406 - 'top' => esc_html__( 'Top', 'elementor' ),
407 - 'middle' => esc_html__( 'Middle', 'elementor' ),
408 - 'bottom' => esc_html__( 'Bottom', 'elementor' ),
426 + 'stretch' => __( 'Stretch', 'elementor' ),
427 + 'top' => __( 'Top', 'elementor' ),
428 + 'middle' => __( 'Middle', 'elementor' ),
429 + 'bottom' => __( 'Bottom', 'elementor' ),
409 430 ],
410 431 'prefix_class' => 'elementor-section-items-',
411 432 'condition' => [
412 433 'height' => [ 'full', 'min-height' ],
@@ -413,22 +434,26 @@
413 434 ],
414 435 ]
415 436 );
416 437
438 + $content_position_selector = Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ?
439 + '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' :
440 + '{{WRAPPER}} > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap';
441 +
417 442 $this->add_control(
418 443 'content_position',
419 444 [
420 - 'label' => esc_html__( 'Vertical Align', 'elementor' ),
445 + 'label' => __( 'Vertical Align', 'elementor' ),
421 446 'type' => Controls_Manager::SELECT,
422 447 'default' => '',
423 448 'options' => [
424 - '' => esc_html__( 'Default', 'elementor' ),
425 - 'top' => esc_html__( 'Top', 'elementor' ),
426 - 'middle' => esc_html__( 'Middle', 'elementor' ),
427 - 'bottom' => esc_html__( 'Bottom', 'elementor' ),
428 - 'space-between' => esc_html__( 'Space Between', 'elementor' ),
429 - 'space-around' => esc_html__( 'Space Around', 'elementor' ),
430 - 'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
449 + '' => __( 'Default', 'elementor' ),
450 + 'top' => __( 'Top', 'elementor' ),
451 + 'middle' => __( 'Middle', 'elementor' ),
452 + 'bottom' => __( 'Bottom', 'elementor' ),
453 + 'space-between' => __( 'Space Between', 'elementor' ),
454 + 'space-around' => __( 'Space Around', 'elementor' ),
455 + 'space-evenly' => __( 'Space Evenly', 'elementor' ),
431 456 ],
432 457 'selectors_dictionary' => [
433 458 'top' => 'flex-start',
434 459 'middle' => 'center',
@@ -434,11 +459,11 @@
434 459 'middle' => 'center',
435 460 'bottom' => 'flex-end',
436 461 ],
437 462 'selectors' => [
438 - '{{WRAPPER}} > .elementor-container > .elementor-column > .elementor-widget-wrap' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
463 + $content_position_selector => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
439 464 ],
440 - // TODO: The following line is for BC since 2.7.0.
465 + // TODO: The following line is for BC since 2.7.0
441 466 'prefix_class' => 'elementor-section-content-',
442 467 ]
443 468 );
444 469
@@ -444,14 +469,14 @@
444 469
445 470 $this->add_control(
446 471 'overflow',
447 472 [
448 - 'label' => esc_html__( 'Overflow', 'elementor' ),
473 + 'label' => __( 'Overflow', 'elementor' ),
449 474 'type' => Controls_Manager::SELECT,
450 475 'default' => '',
451 476 'options' => [
452 - '' => esc_html__( 'Default', 'elementor' ),
453 - 'hidden' => esc_html__( 'Hidden', 'elementor' ),
477 + '' => __( 'Default', 'elementor' ),
478 + 'hidden' => __( 'Hidden', 'elementor' ),
454 479 ],
455 480 'selectors' => [
456 481 '{{WRAPPER}}' => 'overflow: {{VALUE}}',
457 482 ],
@@ -460,19 +485,15 @@
460 485
461 486 $this->add_control(
462 487 'stretch_section',
463 488 [
464 - 'label' => esc_html__( 'Stretch Section', 'elementor' ),
489 + 'label' => __( 'Stretch Section', 'elementor' ),
465 490 'type' => Controls_Manager::SWITCHER,
466 491 'default' => '',
467 492 'return_value' => 'section-stretched',
468 493 'prefix_class' => 'elementor-',
469 494 'hide_in_inner' => true,
470 - 'description' => sprintf(
471 - '%1$s <a href="https://go.elementor.com/stretch-section/" target="_blank">%2$s</a>',
472 - esc_html__( 'Stretch the section to the full width of the page using JS.', 'elementor' ),
473 - esc_html__( 'Learn more', 'elementor' )
474 - ),
495 + 'description' => __( 'Stretch the section to the full width of the page using JS.', 'elementor' ) . sprintf( ' <a href="%1$s" target="_blank">%2$s</a>', 'https://go.elementor.com/stretch-section/', __( 'Learn more.', 'elementor' ) ),
475 496 'render_type' => 'none',
476 497 'frontend_available' => true,
477 498 ]
478 499 );
@@ -488,15 +509,15 @@
488 509 'nav',
489 510 ];
490 511
491 512 $options = [
492 - '' => esc_html__( 'Default', 'elementor' ),
513 + '' => __( 'Default', 'elementor' ),
493 514 ] + array_combine( $possible_tags, $possible_tags );
494 515
495 516 $this->add_control(
496 517 'html_tag',
497 518 [
498 - 'label' => esc_html__( 'HTML Tag', 'elementor' ),
519 + 'label' => __( 'HTML Tag', 'elementor' ),
499 520 'type' => Controls_Manager::SELECT,
500 521 'options' => $options,
501 522 'separator' => 'before',
502 523 ]
@@ -503,13 +524,13 @@
503 524 );
504 525
505 526 $this->end_controls_section();
506 527
507 - // Section Structure.
528 + // Section Structure
508 529 $this->start_controls_section(
509 530 'section_structure',
510 531 [
511 - 'label' => esc_html__( 'Structure', 'elementor' ),
532 + 'label' => __( 'Structure', 'elementor' ),
512 533 'tab' => Controls_Manager::TAB_LAYOUT,
513 534 ]
514 535 );
515 536
@@ -515,9 +536,9 @@
515 536
516 537 $this->add_control(
517 538 'structure',
518 539 [
519 - 'label' => esc_html__( 'Structure', 'elementor' ),
540 + 'label' => __( 'Structure', 'elementor' ),
520 541 'type' => Controls_Manager::STRUCTURE,
521 542 'default' => '10',
522 543 'render_type' => 'none',
523 544 'style_transfer' => false,
@@ -525,13 +546,13 @@
525 546 );
526 547
527 548 $this->end_controls_section();
528 549
529 - // Section background.
550 + // Section background
530 551 $this->start_controls_section(
531 552 'section_background',
532 553 [
533 - 'label' => esc_html__( 'Background', 'elementor' ),
554 + 'label' => __( 'Background', 'elementor' ),
534 555 'tab' => Controls_Manager::TAB_STYLE,
535 556 ]
536 557 );
537 558
@@ -539,9 +560,9 @@
539 560
540 561 $this->start_controls_tab(
541 562 'tab_background_normal',
542 563 [
543 - 'label' => esc_html__( 'Normal', 'elementor' ),
564 + 'label' => __( 'Normal', 'elementor' ),
544 565 ]
545 566 );
546 567
547 568 $this->add_group_control(
@@ -556,51 +577,14 @@
556 577 ],
557 578 ]
558 579 );
559 580
560 - $this->add_control(
561 - 'handle_slideshow_asset_loading',
562 - [
563 - 'type' => Controls_Manager::HIDDEN,
564 - 'assets' => [
565 - 'styles' => [
566 - [
567 - 'name' => 'e-swiper',
568 - 'conditions' => [
569 - 'terms' => [
570 - [
571 - 'name' => 'background_background',
572 - 'operator' => '===',
573 - 'value' => 'slideshow',
574 - ],
575 - ],
576 - ],
577 - ],
578 - ],
579 - 'scripts' => [
580 - [
581 - 'name' => 'swiper',
582 - 'conditions' => [
583 - 'terms' => [
584 - [
585 - 'name' => 'background_background',
586 - 'operator' => '===',
587 - 'value' => 'slideshow',
588 - ],
589 - ],
590 - ],
591 - ],
592 - ],
593 - ],
594 - ]
595 - );
596 -
597 581 $this->end_controls_tab();
598 582
599 583 $this->start_controls_tab(
600 584 'tab_background_hover',
601 585 [
602 - 'label' => esc_html__( 'Hover', 'elementor' ),
586 + 'label' => __( 'Hover', 'elementor' ),
603 587 ]
604 588 );
605 589
606 590 $this->add_group_control(
@@ -613,9 +597,9 @@
613 597
614 598 $this->add_control(
615 599 'background_hover_transition',
616 600 [
617 - 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
601 + 'label' => __( 'Transition Duration', 'elementor' ),
618 602 'type' => Controls_Manager::SLIDER,
619 603 'default' => [
620 604 'size' => 0.3,
621 605 ],
@@ -620,9 +604,8 @@
620 604 'size' => 0.3,
621 605 ],
622 606 'range' => [
623 607 'px' => [
624 - 'min' => 0,
625 608 'max' => 3,
626 609 'step' => 0.1,
627 610 ],
628 611 ],
@@ -636,13 +619,13 @@
636 619 $this->end_controls_tabs();
637 620
638 621 $this->end_controls_section();
639 622
640 - // Background Overlay.
623 + // Background Overlay
641 624 $this->start_controls_section(
642 625 'section_background_overlay',
643 626 [
644 - 'label' => esc_html__( 'Background Overlay', 'elementor' ),
627 + 'label' => __( 'Background Overlay', 'elementor' ),
645 628 'tab' => Controls_Manager::TAB_STYLE,
646 629 ]
647 630 );
648 631
@@ -650,9 +633,9 @@
650 633
651 634 $this->start_controls_tab(
652 635 'tab_background_overlay_normal',
653 636 [
654 - 'label' => esc_html__( 'Normal', 'elementor' ),
637 + 'label' => __( 'Normal', 'elementor' ),
655 638 ]
656 639 );
657 640
658 641 $this->add_group_control(
@@ -662,12 +645,12 @@
662 645 'selector' => '{{WRAPPER}} > .elementor-background-overlay',
663 646 ]
664 647 );
665 648
666 - $this->add_responsive_control(
649 + $this->add_control(
667 650 'background_overlay_opacity',
668 651 [
669 - 'label' => esc_html__( 'Opacity', 'elementor' ),
652 + 'label' => __( 'Opacity', 'elementor' ),
670 653 'type' => Controls_Manager::SLIDER,
671 654 'default' => [
672 655 'size' => .5,
673 656 ],
@@ -711,24 +694,21 @@
711 694
712 695 $this->add_control(
713 696 'overlay_blend_mode',
714 697 [
715 - 'label' => esc_html__( 'Blend Mode', 'elementor' ),
698 + 'label' => __( 'Blend Mode', 'elementor' ),
716 699 'type' => Controls_Manager::SELECT,
717 700 'options' => [
718 - '' => esc_html__( 'Normal', 'elementor' ),
719 - 'multiply' => esc_html__( 'Multiply', 'elementor' ),
720 - 'screen' => esc_html__( 'Screen', 'elementor' ),
721 - 'overlay' => esc_html__( 'Overlay', 'elementor' ),
722 - 'darken' => esc_html__( 'Darken', 'elementor' ),
723 - 'lighten' => esc_html__( 'Lighten', 'elementor' ),
724 - 'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
725 - 'saturation' => esc_html__( 'Saturation', 'elementor' ),
726 - 'color' => esc_html__( 'Color', 'elementor' ),
727 - 'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
728 - 'difference' => esc_html__( 'Difference', 'elementor' ),
729 - 'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
730 - 'hue' => esc_html__( 'Hue', 'elementor' ),
701 + '' => __( 'Normal', 'elementor' ),
702 + 'multiply' => 'Multiply',
703 + 'screen' => 'Screen',
704 + 'overlay' => 'Overlay',
705 + 'darken' => 'Darken',
706 + 'lighten' => 'Lighten',
707 + 'color-dodge' => 'Color Dodge',
708 + 'saturation' => 'Saturation',
709 + 'color' => 'Color',
710 + 'luminosity' => 'Luminosity',
731 711 ],
732 712 'selectors' => [
733 713 '{{WRAPPER}} > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
734 714 ],
@@ -754,9 +734,9 @@
754 734
755 735 $this->start_controls_tab(
756 736 'tab_background_overlay_hover',
757 737 [
758 - 'label' => esc_html__( 'Hover', 'elementor' ),
738 + 'label' => __( 'Hover', 'elementor' ),
759 739 ]
760 740 );
761 741
762 742 $this->add_group_control(
@@ -766,12 +746,12 @@
766 746 'selector' => '{{WRAPPER}}:hover > .elementor-background-overlay',
767 747 ]
768 748 );
769 749
770 - $this->add_responsive_control(
750 + $this->add_control(
771 751 'background_overlay_hover_opacity',
772 752 [
773 - 'label' => esc_html__( 'Opacity', 'elementor' ),
753 + 'label' => __( 'Opacity', 'elementor' ),
774 754 'type' => Controls_Manager::SLIDER,
775 755 'default' => [
776 756 'size' => .5,
777 757 ],
@@ -800,9 +780,9 @@
800 780
801 781 $this->add_control(
802 782 'background_overlay_hover_transition',
803 783 [
804 - 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
784 + 'label' => __( 'Transition Duration', 'elementor' ),
805 785 'type' => Controls_Manager::SLIDER,
806 786 'default' => [
807 787 'size' => 0.3,
808 788 ],
@@ -807,9 +787,8 @@
807 787 'size' => 0.3,
808 788 ],
809 789 'range' => [
810 790 'px' => [
811 - 'min' => 0,
812 791 'max' => 3,
813 792 'step' => 0.1,
814 793 ],
815 794 ],
@@ -823,13 +802,13 @@
823 802 $this->end_controls_tabs();
824 803
825 804 $this->end_controls_section();
826 805
827 - // Section border.
806 + // Section border
828 807 $this->start_controls_section(
829 808 'section_border',
830 809 [
831 - 'label' => esc_html__( 'Border', 'elementor' ),
810 + 'label' => __( 'Border', 'elementor' ),
832 811 'tab' => Controls_Manager::TAB_STYLE,
833 812 ]
834 813 );
835 814
@@ -837,9 +816,9 @@
837 816
838 817 $this->start_controls_tab(
839 818 'tab_border_normal',
840 819 [
841 - 'label' => esc_html__( 'Normal', 'elementor' ),
820 + 'label' => __( 'Normal', 'elementor' ),
842 821 ]
843 822 );
844 823
845 824 $this->add_group_control(
@@ -851,11 +830,11 @@
851 830
852 831 $this->add_responsive_control(
853 832 'border_radius',
854 833 [
855 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
834 + 'label' => __( 'Border Radius', 'elementor' ),
856 835 'type' => Controls_Manager::DIMENSIONS,
857 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
836 + 'size_units' => [ 'px', '%' ],
858 837 'selectors' => [
859 838 '{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860 839 ],
861 840 ]
@@ -872,9 +851,9 @@
872 851
873 852 $this->start_controls_tab(
874 853 'tab_border_hover',
875 854 [
876 - 'label' => esc_html__( 'Hover', 'elementor' ),
855 + 'label' => __( 'Hover', 'elementor' ),
877 856 ]
878 857 );
879 858
880 859 $this->add_group_control(
@@ -887,11 +866,11 @@
887 866
888 867 $this->add_responsive_control(
889 868 'border_radius_hover',
890 869 [
891 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
870 + 'label' => __( 'Border Radius', 'elementor' ),
892 871 'type' => Controls_Manager::DIMENSIONS,
893 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
872 + 'size_units' => [ 'px', '%' ],
894 873 'selectors' => [
895 874 '{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896 875 ],
897 876 ]
@@ -907,9 +886,9 @@
907 886
908 887 $this->add_control(
909 888 'border_hover_transition',
910 889 [
911 - 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
890 + 'label' => __( 'Transition Duration', 'elementor' ),
912 891 'type' => Controls_Manager::SLIDER,
913 892 'separator' => 'before',
914 893 'default' => [
915 894 'size' => 0.3,
@@ -915,9 +894,8 @@
915 894 'size' => 0.3,
916 895 ],
917 896 'range' => [
918 897 'px' => [
919 - 'min' => 0,
920 898 'max' => 3,
921 899 'step' => 0.1,
922 900 ],
923 901 ],
@@ -929,9 +907,9 @@
929 907 'operator' => '!==',
930 908 'value' => '',
931 909 ],
932 910 [
933 - 'name' => 'border_hover_border',
911 + 'name' => 'border_border',
934 912 'operator' => '!==',
935 913 'value' => '',
936 914 ],
937 915 ],
@@ -948,13 +926,13 @@
948 926 $this->end_controls_tabs();
949 927
950 928 $this->end_controls_section();
951 929
952 - // Section Shape Divider.
930 + // Section Shape Divider
953 931 $this->start_controls_section(
954 932 'section_shape_divider',
955 933 [
956 - 'label' => esc_html__( 'Shape Divider', 'elementor' ),
934 + 'label' => __( 'Shape Divider', 'elementor' ),
957 935 'tab' => Controls_Manager::TAB_STYLE,
958 936 ]
959 937 );
960 938
@@ -959,11 +937,19 @@
959 937 );
960 938
961 939 $this->start_controls_tabs( 'tabs_shape_dividers' );
962 940
941 + $shapes_options = [
942 + '' => __( 'None', 'elementor' ),
943 + ];
944 +
945 + foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
946 + $shapes_options[ $shape_name ] = $shape_props['title'];
947 + }
948 +
963 949 foreach ( [
964 - 'top' => esc_html__( 'Top', 'elementor' ),
965 - 'bottom' => esc_html__( 'Bottom', 'elementor' ),
950 + 'top' => __( 'Top', 'elementor' ),
951 + 'bottom' => __( 'Bottom', 'elementor' ),
966 952 ] as $side => $side_label ) {
967 953 $base_control_key = "shape_divider_$side";
968 954
969 955 $this->start_controls_tab(
@@ -975,31 +961,13 @@
975 961
976 962 $this->add_control(
977 963 $base_control_key,
978 964 [
979 - 'label' => esc_html__( 'Type', 'elementor' ),
980 - 'type' => Controls_Manager::VISUAL_CHOICE,
981 - 'label_block' => true,
982 - 'columns' => 2,
983 - 'options' => Shapes::get_shapes(),
965 + 'label' => __( 'Type', 'elementor' ),
966 + 'type' => Controls_Manager::SELECT,
967 + 'options' => $shapes_options,
984 968 'render_type' => 'none',
985 969 'frontend_available' => true,
986 - 'assets' => [
987 - 'styles' => [
988 - [
989 - 'name' => 'e-shapes',
990 - 'conditions' => [
991 - 'terms' => [
992 - [
993 - 'name' => $base_control_key,
994 - 'operator' => '!==',
995 - 'value' => '',
996 - ],
997 - ],
998 - ],
999 - ],
1000 - ],
1001 - ],
1002 970 ]
1003 971 );
1004 972
1005 973 $this->add_control(
@@ -1004,9 +972,9 @@
1004 972
1005 973 $this->add_control(
1006 974 $base_control_key . '_color',
1007 975 [
1008 - 'label' => esc_html__( 'Color', 'elementor' ),
976 + 'label' => __( 'Color', 'elementor' ),
1009 977 'type' => Controls_Manager::COLOR,
1010 978 'condition' => [
1011 979 "shape_divider_$side!" => '',
1012 980 ],
@@ -1018,11 +986,10 @@
1018 986
1019 987 $this->add_responsive_control(
1020 988 $base_control_key . '_width',
1021 989 [
1022 - 'label' => esc_html__( 'Width', 'elementor' ),
990 + 'label' => __( 'Width', 'elementor' ),
1023 991 'type' => Controls_Manager::SLIDER,
1024 - 'size_units' => [ '%', 'vw', 'custom' ],
1025 992 'default' => [
1026 993 'unit' => '%',
1027 994 ],
1028 995 'tablet_default' => [
@@ -1035,12 +1002,8 @@
1035 1002 '%' => [
1036 1003 'min' => 100,
1037 1004 'max' => 300,
1038 1005 ],
1039 - 'vw' => [
1040 - 'min' => 100,
1041 - 'max' => 300,
1042 - ],
1043 1006 ],
1044 1007 'condition' => [
1045 1008 "shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1046 1009 ],
@@ -1052,21 +1015,14 @@
1052 1015
1053 1016 $this->add_responsive_control(
1054 1017 $base_control_key . '_height',
1055 1018 [
1056 - 'label' => esc_html__( 'Height', 'elementor' ),
1019 + 'label' => __( 'Height', 'elementor' ),
1057 1020 'type' => Controls_Manager::SLIDER,
1058 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1059 1021 'range' => [
1060 1022 'px' => [
1061 1023 'max' => 500,
1062 1024 ],
1063 - 'em' => [
1064 - 'max' => 50,
1065 - ],
1066 - 'rem' => [
1067 - 'max' => 50,
1068 - ],
1069 1025 ],
1070 1026 'condition' => [
1071 1027 "shape_divider_$side!" => '',
1072 1028 ],
@@ -1078,9 +1034,9 @@
1078 1034
1079 1035 $this->add_control(
1080 1036 $base_control_key . '_flip',
1081 1037 [
1082 - 'label' => esc_html__( 'Flip', 'elementor' ),
1038 + 'label' => __( 'Flip', 'elementor' ),
1083 1039 'type' => Controls_Manager::SWITCHER,
1084 1040 'condition' => [
1085 1041 "shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_flip' ) ),
1086 1042 ],
@@ -1092,9 +1048,9 @@
1092 1048
1093 1049 $this->add_control(
1094 1050 $base_control_key . '_negative',
1095 1051 [
1096 - 'label' => esc_html__( 'Invert', 'elementor' ),
1052 + 'label' => __( 'Invert', 'elementor' ),
1097 1053 'type' => Controls_Manager::SWITCHER,
1098 1054 'frontend_available' => true,
1099 1055 'condition' => [
1100 1056 "shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_negative' ) ),
@@ -1105,9 +1061,9 @@
1105 1061
1106 1062 $this->add_control(
1107 1063 $base_control_key . '_above_content',
1108 1064 [
1109 - 'label' => esc_html__( 'Bring to Front', 'elementor' ),
1065 + 'label' => __( 'Bring to Front', 'elementor' ),
1110 1066 'type' => Controls_Manager::SWITCHER,
1111 1067 'selectors' => [
1112 1068 "{{WRAPPER}} > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
1113 1069 ],
@@ -1123,13 +1079,13 @@
1123 1079 $this->end_controls_tabs();
1124 1080
1125 1081 $this->end_controls_section();
1126 1082
1127 - // Section Typography.
1083 + // Section Typography
1128 1084 $this->start_controls_section(
1129 1085 'section_typo',
1130 1086 [
1131 - 'label' => esc_html__( 'Typography', 'elementor' ),
1087 + 'label' => __( 'Typography', 'elementor' ),
1132 1088 'tab' => Controls_Manager::TAB_STYLE,
1133 1089 ]
1134 1090 );
1135 1091
@@ -1135,14 +1091,15 @@
1135 1091
1136 1092 $this->add_control(
1137 1093 'heading_color',
1138 1094 [
1139 - 'label' => esc_html__( 'Heading Color', 'elementor' ),
1095 + 'label' => __( 'Heading Color', 'elementor' ),
1140 1096 'type' => Controls_Manager::COLOR,
1141 1097 'default' => '',
1142 1098 'selectors' => [
1143 1099 '{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
1144 1100 ],
1101 + 'separator' => 'none',
1145 1102 ]
1146 1103 );
1147 1104
1148 1105 $this->add_control(
@@ -1147,9 +1104,9 @@
1147 1104
1148 1105 $this->add_control(
1149 1106 'color_text',
1150 1107 [
1151 - 'label' => esc_html__( 'Text Color', 'elementor' ),
1108 + 'label' => __( 'Text Color', 'elementor' ),
1152 1109 'type' => Controls_Manager::COLOR,
1153 1110 'default' => '',
1154 1111 'selectors' => [
1155 1112 '{{WRAPPER}}' => 'color: {{VALUE}};',
@@ -1159,9 +1116,9 @@
1159 1116
1160 1117 $this->add_control(
1161 1118 'color_link',
1162 1119 [
1163 - 'label' => esc_html__( 'Link Color', 'elementor' ),
1120 + 'label' => __( 'Link Color', 'elementor' ),
1164 1121 'type' => Controls_Manager::COLOR,
1165 1122 'default' => '',
1166 1123 'selectors' => [
1167 1124 '{{WRAPPER}} a' => 'color: {{VALUE}};',
@@ -1171,9 +1128,9 @@
1171 1128
1172 1129 $this->add_control(
1173 1130 'color_link_hover',
1174 1131 [
1175 - 'label' => esc_html__( 'Link Hover Color', 'elementor' ),
1132 + 'label' => __( 'Link Hover Color', 'elementor' ),
1176 1133 'type' => Controls_Manager::COLOR,
1177 1134 'default' => '',
1178 1135 'selectors' => [
1179 1136 '{{WRAPPER}} a:hover' => 'color: {{VALUE}};',
@@ -1180,36 +1137,27 @@
1180 1137 ],
1181 1138 ]
1182 1139 );
1183 1140
1184 - $this->add_responsive_control(
1141 + $this->add_control(
1185 1142 'text_align',
1186 1143 [
1187 - 'label' => esc_html__( 'Text Align', 'elementor' ),
1144 + 'label' => __( 'Text Align', 'elementor' ),
1188 1145 'type' => Controls_Manager::CHOOSE,
1189 1146 'options' => [
1190 - 'start' => [
1191 - 'title' => esc_html__( 'Start', 'elementor' ),
1147 + 'left' => [
1148 + 'title' => __( 'Left', 'elementor' ),
1192 1149 'icon' => 'eicon-text-align-left',
1193 1150 ],
1194 1151 'center' => [
1195 - 'title' => esc_html__( 'Center', 'elementor' ),
1152 + 'title' => __( 'Center', 'elementor' ),
1196 1153 'icon' => 'eicon-text-align-center',
1197 1154 ],
1198 - 'end' => [
1199 - 'title' => esc_html__( 'End', 'elementor' ),
1155 + 'right' => [
1156 + 'title' => __( 'Right', 'elementor' ),
1200 1157 'icon' => 'eicon-text-align-right',
1201 1158 ],
1202 - 'justify' => [
1203 - 'title' => esc_html__( 'Justified', 'elementor' ),
1204 - 'icon' => 'eicon-text-align-justify',
1205 - ],
1206 1159 ],
1207 - 'classes' => 'elementor-control-start-end',
1208 - 'selectors_dictionary' => [
1209 - 'left' => is_rtl() ? 'end' : 'start',
1210 - 'right' => is_rtl() ? 'start' : 'end',
1211 - ],
1212 1160 'selectors' => [
1213 1161 '{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
1214 1162 ],
1215 1163 ]
@@ -1216,13 +1164,13 @@
1216 1164 );
1217 1165
1218 1166 $this->end_controls_section();
1219 1167
1220 - // Section Advanced.
1168 + // Section Advanced
1221 1169 $this->start_controls_section(
1222 1170 'section_advanced',
1223 1171 [
1224 - 'label' => esc_html__( 'Advanced', 'elementor' ),
1172 + 'label' => __( 'Advanced', 'elementor' ),
1225 1173 'tab' => Controls_Manager::TAB_ADVANCED,
1226 1174 ]
1227 1175 );
1228 1176
@@ -1228,11 +1176,11 @@
1228 1176
1229 1177 $this->add_responsive_control(
1230 1178 'margin',
1231 1179 [
1232 - 'label' => esc_html__( 'Margin', 'elementor' ),
1180 + 'label' => __( 'Margin', 'elementor' ),
1233 1181 'type' => Controls_Manager::DIMENSIONS,
1234 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1182 + 'size_units' => [ 'px', 'em', '%', 'rem' ],
1235 1183 'allowed_dimensions' => 'vertical',
1236 1184 'placeholder' => [
1237 1185 'top' => '',
1238 1186 'right' => 'auto',
@@ -1247,11 +1195,11 @@
1247 1195
1248 1196 $this->add_responsive_control(
1249 1197 'padding',
1250 1198 [
1251 - 'label' => esc_html__( 'Padding', 'elementor' ),
1199 + 'label' => __( 'Padding', 'elementor' ),
1252 1200 'type' => Controls_Manager::DIMENSIONS,
1253 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1201 + 'size_units' => [ 'px', 'em', '%', 'rem' ],
1254 1202 'selectors' => [
1255 1203 '{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256 1204 ],
1257 1205 ]
@@ -1259,9 +1207,9 @@
1259 1207
1260 1208 $this->add_responsive_control(
1261 1209 'z_index',
1262 1210 [
1263 - 'label' => esc_html__( 'Z-Index', 'elementor' ),
1211 + 'label' => __( 'Z-Index', 'elementor' ),
1264 1212 'type' => Controls_Manager::NUMBER,
1265 1213 'min' => 0,
1266 1214 'selectors' => [
1267 1215 '{{WRAPPER}}' => 'z-index: {{VALUE}};',
@@ -1271,18 +1219,15 @@
1271 1219
1272 1220 $this->add_control(
1273 1221 '_element_id',
1274 1222 [
1275 - 'label' => esc_html__( 'CSS ID', 'elementor' ),
1223 + 'label' => __( 'CSS ID', 'elementor' ),
1276 1224 'type' => Controls_Manager::TEXT,
1277 1225 'default' => '',
1278 - 'ai' => [
1279 - 'active' => false,
1280 - ],
1281 1226 'dynamic' => [
1282 1227 'active' => true,
1283 1228 ],
1284 - 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1229 + 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1285 1230 'style_transfer' => false,
1286 1231 'classes' => 'elementor-control-direction-ltr',
1287 1232 ]
1288 1233 );
@@ -1289,41 +1234,34 @@
1289 1234
1290 1235 $this->add_control(
1291 1236 'css_classes',
1292 1237 [
1293 - 'label' => esc_html__( 'CSS Classes', 'elementor' ),
1238 + 'label' => __( 'CSS Classes', 'elementor' ),
1294 1239 'type' => Controls_Manager::TEXT,
1295 1240 'default' => '',
1296 - 'ai' => [
1297 - 'active' => false,
1298 - ],
1299 1241 'dynamic' => [
1300 1242 'active' => true,
1301 1243 ],
1302 1244 'prefix_class' => '',
1303 - 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1245 + 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1304 1246 'classes' => 'elementor-control-direction-ltr',
1305 1247 ]
1306 1248 );
1307 1249
1308 - Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1309 -
1310 1250 $this->end_controls_section();
1311 1251
1312 1252 $this->start_controls_section(
1313 1253 'section_effects',
1314 1254 [
1315 - 'label' => esc_html__( 'Motion Effects', 'elementor' ),
1255 + 'label' => __( 'Motion Effects', 'elementor' ),
1316 1256 'tab' => Controls_Manager::TAB_ADVANCED,
1317 1257 ]
1318 1258 );
1319 1259
1320 - Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1321 -
1322 1260 $this->add_responsive_control(
1323 1261 'animation',
1324 1262 [
1325 - 'label' => esc_html__( 'Entrance Animation', 'elementor' ),
1263 + 'label' => __( 'Entrance Animation', 'elementor' ),
1326 1264 'type' => Controls_Manager::ANIMATION,
1327 1265 'frontend_available' => true,
1328 1266 ]
1329 1267 );
@@ -1330,15 +1268,15 @@
1330 1268
1331 1269 $this->add_control(
1332 1270 'animation_duration',
1333 1271 [
1334 - 'label' => esc_html__( 'Animation Duration', 'elementor' ),
1272 + 'label' => __( 'Animation Duration', 'elementor' ),
1335 1273 'type' => Controls_Manager::SELECT,
1336 1274 'default' => '',
1337 1275 'options' => [
1338 - 'slow' => esc_html__( 'Slow', 'elementor' ),
1339 - '' => esc_html__( 'Normal', 'elementor' ),
1340 - 'fast' => esc_html__( 'Fast', 'elementor' ),
1276 + 'slow' => __( 'Slow', 'elementor' ),
1277 + '' => __( 'Normal', 'elementor' ),
1278 + 'fast' => __( 'Fast', 'elementor' ),
1341 1279 ],
1342 1280 'prefix_class' => 'animated-',
1343 1281 'condition' => [
1344 1282 'animation!' => '',
@@ -1348,9 +1286,9 @@
1348 1286
1349 1287 $this->add_control(
1350 1288 'animation_delay',
1351 1289 [
1352 - 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
1290 + 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
1353 1291 'type' => Controls_Manager::NUMBER,
1354 1292 'default' => '',
1355 1293 'min' => 0,
1356 1294 'step' => 100,
@@ -1363,37 +1301,43 @@
1363 1301 );
1364 1302
1365 1303 $this->end_controls_section();
1366 1304
1367 - // Section Responsive.
1305 + // Section Responsive
1368 1306 $this->start_controls_section(
1369 1307 '_section_responsive',
1370 1308 [
1371 - 'label' => esc_html__( 'Responsive', 'elementor' ),
1309 + 'label' => __( 'Responsive', 'elementor' ),
1372 1310 'tab' => Controls_Manager::TAB_ADVANCED,
1373 1311 ]
1374 1312 );
1375 1313
1376 - // The controls should be displayed from largest to smallest breakpoint, so we reverse the array.
1377 - $active_breakpoints = array_reverse( Plugin::$instance->breakpoints->get_active_breakpoints() );
1314 + $this->add_control(
1315 + 'reverse_order_tablet',
1316 + [
1317 + 'label' => __( 'Reverse Columns', 'elementor' ) . ' (' . __( 'Tablet', 'elementor' ) . ')',
1318 + 'type' => Controls_Manager::SWITCHER,
1319 + 'default' => '',
1320 + 'prefix_class' => 'elementor-',
1321 + 'return_value' => 'reverse-tablet',
1322 + ]
1323 + );
1378 1324
1379 - foreach ( $active_breakpoints as $breakpoint_key => $breakpoint ) {
1380 - $this->add_control(
1381 - 'reverse_order_' . $breakpoint_key,
1382 - [
1383 - 'label' => esc_html__( 'Reverse Columns', 'elementor' ) . ' (' . $breakpoint->get_label() . ')',
1384 - 'type' => Controls_Manager::SWITCHER,
1385 - 'default' => '',
1386 - 'prefix_class' => 'elementor-',
1387 - 'return_value' => 'reverse-' . $breakpoint_key,
1388 - ]
1389 - );
1390 - }
1325 + $this->add_control(
1326 + 'reverse_order_mobile',
1327 + [
1328 + 'label' => __( 'Reverse Columns', 'elementor' ) . ' (' . __( 'Mobile', 'elementor' ) . ')',
1329 + 'type' => Controls_Manager::SWITCHER,
1330 + 'default' => '',
1331 + 'prefix_class' => 'elementor-',
1332 + 'return_value' => 'reverse-mobile',
1333 + ]
1334 + );
1391 1335
1392 1336 $this->add_control(
1393 1337 'heading_visibility',
1394 1338 [
1395 - 'label' => esc_html__( 'Visibility', 'elementor' ),
1339 + 'label' => __( 'Visibility', 'elementor' ),
1396 1340 'type' => Controls_Manager::HEADING,
1397 1341 'separator' => 'before',
1398 1342 ]
1399 1343 );
@@ -1400,21 +1344,53 @@
1400 1344
1401 1345 $this->add_control(
1402 1346 'responsive_description',
1403 1347 [
1404 - 'raw' => sprintf(
1405 - /* translators: 1: Link open tag, 2: Link close tag. */
1406 - esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
1407 - '<a href="javascript: $e.run( \'panel/close\' )">',
1408 - '</a>'
1409 - ),
1348 + 'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1410 1349 'type' => Controls_Manager::RAW_HTML,
1411 1350 'content_classes' => 'elementor-descriptor',
1412 1351 ]
1413 1352 );
1414 1353
1415 - $this->add_hidden_device_controls();
1354 + $this->add_control(
1355 + 'hide_desktop',
1356 + [
1357 + 'label' => __( 'Hide On Desktop', 'elementor' ),
1358 + 'type' => Controls_Manager::SWITCHER,
1359 + 'default' => '',
1360 + 'prefix_class' => 'elementor-',
1361 + 'label_on' => __( 'Hide', 'elementor' ),
1362 + 'label_off' => __( 'Show', 'elementor' ),
1363 + 'return_value' => 'hidden-desktop',
1364 + ]
1365 + );
1416 1366
1367 + $this->add_control(
1368 + 'hide_tablet',
1369 + [
1370 + 'label' => __( 'Hide On Tablet', 'elementor' ),
1371 + 'type' => Controls_Manager::SWITCHER,
1372 + 'default' => '',
1373 + 'prefix_class' => 'elementor-',
1374 + 'label_on' => __( 'Hide', 'elementor' ),
1375 + 'label_off' => __( 'Show', 'elementor' ),
1376 + 'return_value' => 'hidden-tablet',
1377 + ]
1378 + );
1379 +
1380 + $this->add_control(
1381 + 'hide_mobile',
1382 + [
1383 + 'label' => __( 'Hide On Mobile', 'elementor' ),
1384 + 'type' => Controls_Manager::SWITCHER,
1385 + 'default' => '',
1386 + 'prefix_class' => 'elementor-',
1387 + 'label_on' => __( 'Hide', 'elementor' ),
1388 + 'label_off' => __( 'Show', 'elementor' ),
1389 + 'return_value' => 'hidden-phone',
1390 + ]
1391 + );
1392 +
1417 1393 $this->end_controls_section();
1418 1394
1419 1395 Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1420 1396
@@ -1438,28 +1414,27 @@
1438 1414 if ( ! settings.background_play_once ) {
1439 1415 videoAttributes += ' loop';
1440 1416 }
1441 1417
1442 - view.addRenderAttribute(
1443 - 'background-video-container',
1444 - {
1445 - 'class': 'elementor-background-video-container',
1446 - }
1447 - );
1418 + view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1448 1419
1449 1420 if ( ! settings.background_play_on_mobile ) {
1450 - view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1421 + view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1451 1422 }
1452 1423 #>
1453 1424 <div {{{ view.getRenderAttributeString( 'background-video-container' ) }}}>
1454 - <div class="elementor-background-video-embed" role="presentation"></div>
1455 - <video class="elementor-background-video-hosted" role="presentation" {{ videoAttributes }}></video>
1425 + <div class="elementor-background-video-embed"></div>
1426 + <video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
1456 1427 </div>
1457 1428 <# } #>
1458 1429 <div class="elementor-background-overlay"></div>
1459 - <div class="elementor-shape elementor-shape-top" aria-hidden="true"></div>
1460 - <div class="elementor-shape elementor-shape-bottom" aria-hidden="true"></div>
1461 - <div class="elementor-container elementor-column-gap-{{ settings.gap }}"></div>
1430 + <div class="elementor-shape elementor-shape-top"></div>
1431 + <div class="elementor-shape elementor-shape-bottom"></div>
1432 + <div class="elementor-container elementor-column-gap-{{ settings.gap }}">
1433 + <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
1434 + <div class="elementor-row"></div>
1435 + <?php } ?>
1436 + </div>
1462 1437 <?php
1463 1438 }
1464 1439
1465 1440 /**
@@ -1472,31 +1447,23 @@
1472 1447 */
1473 1448 public function before_render() {
1474 1449 $settings = $this->get_settings_for_display();
1475 1450 ?>
1476 - <<?php
1477 - // PHPCS - the method get_html_tag is safe.
1478 - echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1479 - ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1451 + <<?php echo $this->get_html_tag(); ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1480 1452 <?php
1481 1453 if ( 'video' === $settings['background_background'] ) :
1482 1454 if ( $settings['background_video_link'] ) :
1483 1455 $video_properties = Embed::get_video_properties( $settings['background_video_link'] );
1484 1456
1485 - $this->add_render_attribute(
1486 - 'background-video-container',
1487 - [
1488 - 'class' => 'elementor-background-video-container',
1489 - ]
1490 - );
1457 + $this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
1491 1458
1492 1459 if ( ! $settings['background_play_on_mobile'] ) {
1493 - $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-mobile' );
1460 + $this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
1494 1461 }
1495 1462 ?>
1496 - <div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
1463 + <div <?php echo $this->get_render_attribute_string( 'background-video-container' ); ?>>
1497 1464 <?php if ( $video_properties ) : ?>
1498 - <div class="elementor-background-video-embed" role="presentation"></div>
1465 + <div class="elementor-background-video-embed"></div>
1499 1466 <?php
1500 1467 else :
1501 1468 $video_tag_attributes = 'autoplay muted playsinline';
1502 1469 if ( 'yes' !== $settings['background_play_once'] ) :
@@ -1502,12 +1469,9 @@
1502 1469 if ( 'yes' !== $settings['background_play_once'] ) :
1503 1470 $video_tag_attributes .= ' loop';
1504 1471 endif;
1505 1472 ?>
1506 - <video class="elementor-background-video-hosted" role="presentation" <?php
1507 - // PHPCS - the variable $video_tag_attributes is a plain string.
1508 - echo $video_tag_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1509 - ?>></video>
1473 + <video class="elementor-background-video-hosted elementor-html5-video" <?php echo $video_tag_attributes; ?>></video>
1510 1474 <?php endif; ?>
1511 1475 </div>
1512 1476 <?php
1513 1477 endif;
@@ -1512,14 +1476,11 @@
1512 1476 <?php
1513 1477 endif;
1514 1478 endif;
1515 1479
1516 - $overlay_background = $settings['background_overlay_background'] ?? '';
1517 - $overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
1480 + $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
1481 + in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
1518 1482
1519 - $has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) ||
1520 - in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
1521 -
1522 1483 if ( $has_background_overlay ) :
1523 1484 ?>
1524 1485 <div class="elementor-background-overlay"></div>
1525 1486 <?php
@@ -1533,9 +1494,11 @@
1533 1494 $this->print_shape_divider( 'bottom' );
1534 1495 }
1535 1496 ?>
1536 1497 <div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
1537 - <?php
1498 + <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
1499 + <div class="elementor-row">
1500 + <?php }
1538 1501 }
1539 1502
1540 1503 /**
1541 1504 * After section rendering.
@@ -1546,13 +1509,13 @@
1546 1509 * @access public
1547 1510 */
1548 1511 public function after_render() {
1549 1512 ?>
1513 + <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
1514 + </div>
1515 + <?php } ?>
1550 1516 </div>
1551 - </<?php
1552 - // PHPCS - the method get_html_tag is safe.
1553 - echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1554 - ?>>
1517 + </<?php echo $this->get_html_tag(); ?>>
1555 1518 <?php
1556 1519 }
1557 1520
1558 1521 /**
@@ -1602,9 +1565,9 @@
1602 1565 * @access private
1603 1566 *
1604 1567 * @return string Section HTML tag.
1605 1568 */
1606 - protected function get_html_tag() {
1569 + private function get_html_tag() {
1607 1570 $html_tag = $this->get_settings( 'html_tag' );
1608 1571
1609 1572 if ( empty( $html_tag ) ) {
1610 1573 $html_tag = 'section';
@@ -1622,9 +1585,9 @@
1622 1585 * @access private
1623 1586 *
1624 1587 * @param string $side Shape divider side, used to set the shape key.
1625 1588 */
1626 - protected function print_shape_divider( $side ) {
1589 + private function print_shape_divider( $side ) {
1627 1590 $settings = $this->get_active_settings();
1628 1591 $base_setting_key = "shape_divider_$side";
1629 1592 $negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
1630 1593 $shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
@@ -1630,17 +1593,11 @@
1630 1593 $shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
1631 1594 if ( ! is_file( $shape_path ) || ! is_readable( $shape_path ) ) {
1632 1595 return;
1633 1596 }
1634 -
1635 1597 ?>
1636 - <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" aria-hidden="true" data-negative="<?php
1637 - Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
1638 - ?>">
1639 - <?php
1640 - // PHPCS - The file content is being read from a strict file path structure.
1641 - echo Utils::file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1642 - ?>
1598 + <div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php echo var_export( $negative ); ?>">
1599 + <?php echo file_get_contents( $shape_path ); ?>
1643 1600 </div>
1644 1601 <?php
1645 1602 }
1646 1603 }