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