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