← All changes
|
modules/nested-accordion/widgets/nested-accordion.php
+26
-121
4.3.1
→
3.20.2
View file →
| @@ -14,9 +14,9 @@ | ||
| 14 | 14 | use Elementor\Utils; |
| 15 | 15 | use Elementor\Group_Control_Text_Stroke; |
| 16 | 16 | |
| 17 | 17 | if ( ! defined( 'ABSPATH' ) ) { |
| 18 | - exit; // Exit if accessed directly. | |
| 18 | + exit; // Exit if accessed directly | |
| 19 | 19 | } |
| 20 | 20 | |
| 21 | 21 | /** |
| 22 | 22 | * Elementor Nested Accordion widget. |
| @@ -27,15 +27,8 @@ | ||
| 27 | 27 | * @since 3.15.0 |
| 28 | 28 | */ |
| 29 | 29 | class Nested_Accordion extends Widget_Nested_Base { |
| 30 | 30 | |
| 31 | - private $optimized_markup = null; | |
| 32 | - private $widget_container_selector = ''; | |
| 33 | - | |
| 34 | - protected function is_dynamic_content(): bool { | |
| 35 | - return true; | |
| 36 | - } | |
| 37 | - | |
| 38 | 31 | public function get_name() { |
| 39 | 32 | return 'nested-accordion'; |
| 40 | 33 | } |
| 41 | 34 | |
| @@ -50,29 +43,17 @@ | ||
| 50 | 43 | public function get_keywords() { |
| 51 | 44 | return [ 'nested', 'tabs', 'accordion', 'toggle' ]; |
| 52 | 45 | } |
| 53 | 46 | |
| 54 | - public function get_style_depends(): array { | |
| 55 | - return [ 'widget-nested-accordion' ]; | |
| 56 | - } | |
| 57 | - | |
| 58 | 47 | public function show_in_panel(): bool { |
| 59 | - return Plugin::$instance->experiments->is_feature_active( 'container' ); | |
| 48 | + return Plugin::$instance->experiments->is_feature_active( 'nested-elements' ); | |
| 60 | 49 | } |
| 61 | 50 | |
| 62 | - public function has_widget_inner_wrapper(): bool { | |
| 63 | - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ); | |
| 64 | - } | |
| 65 | - | |
| 66 | 51 | protected function item_content_container( int $index ) { |
| 67 | 52 | return [ |
| 68 | 53 | 'elType' => 'container', |
| 69 | 54 | 'settings' => [ |
| 70 | - '_title' => sprintf( | |
| 71 | - /* translators: %d: Item index. */ | |
| 72 | - __( 'item #%d', 'elementor' ), | |
| 73 | - $index | |
| 74 | - ), | |
| 55 | + '_title' => sprintf( __( 'item #%s', 'elementor' ), $index ), | |
| 75 | 56 | 'content_width' => 'full', |
| 76 | 57 | ], |
| 77 | 58 | ]; |
| 78 | 59 | } |
| @@ -89,9 +70,8 @@ | ||
| 89 | 70 | return 'item_title'; |
| 90 | 71 | } |
| 91 | 72 | |
| 92 | 73 | protected function get_default_children_title() { |
| 93 | - /* translators: %d: Item index. */ | |
| 94 | 74 | return esc_html__( 'Item #%d', 'elementor' ); |
| 95 | 75 | } |
| 96 | 76 | |
| 97 | 77 | protected function get_default_children_placeholder_selector() { |
| @@ -97,22 +77,13 @@ | ||
| 97 | 77 | protected function get_default_children_placeholder_selector() { |
| 98 | 78 | return '.e-n-accordion'; |
| 99 | 79 | } |
| 100 | 80 | |
| 101 | - protected function get_default_children_container_placeholder_selector() { | |
| 102 | - return '.e-n-accordion-item'; | |
| 103 | - } | |
| 104 | - | |
| 105 | 81 | protected function get_html_wrapper_class() { |
| 106 | 82 | return 'elementor-widget-n-accordion'; |
| 107 | 83 | } |
| 108 | 84 | |
| 109 | 85 | protected function register_controls() { |
| 110 | - if ( null === $this->optimized_markup ) { | |
| 111 | - $this->optimized_markup = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ) && ! $this->has_widget_inner_wrapper(); | |
| 112 | - $this->widget_container_selector = $this->optimized_markup ? '' : ' > .elementor-widget-container'; | |
| 113 | - } | |
| 114 | - | |
| 115 | 86 | $this->start_controls_section( 'section_items', [ |
| 116 | 87 | 'label' => esc_html__( 'Layout', 'elementor' ), |
| 117 | 88 | ] ); |
| 118 | 89 | |
| @@ -166,9 +137,9 @@ | ||
| 166 | 137 | 'item_title' => esc_html__( 'Item #3', 'elementor' ), |
| 167 | 138 | ], |
| 168 | 139 | ], |
| 169 | 140 | 'title_field' => '{{{ item_title }}}', |
| 170 | - 'button_text' => esc_html__( 'Add Item', 'elementor' ), | |
| 141 | + 'button_text' => 'Add Item', | |
| 171 | 142 | ] |
| 172 | 143 | ); |
| 173 | 144 | |
| 174 | 145 | $this->add_responsive_control( |
| @@ -325,9 +296,9 @@ | ||
| 325 | 296 | 'faq_schema_message', |
| 326 | 297 | [ |
| 327 | 298 | 'type' => Controls_Manager::ALERT, |
| 328 | 299 | 'alert_type' => 'info', |
| 329 | - 'content' => esc_html__( 'Google no longer supports the FAQ schema; however, it may still hold secondary value for AI and LLMs.', 'elementor' ), | |
| 300 | + 'content' => esc_html__( 'Let Google know that this section contains an FAQ. Make sure to only use it only once per page', 'elementor' ), | |
| 330 | 301 | 'condition' => [ |
| 331 | 302 | 'faq_schema[value]' => 'yes', |
| 332 | 303 | ], |
| 333 | 304 | ] |
| @@ -492,10 +463,11 @@ | ||
| 492 | 463 | $this->end_controls_section(); |
| 493 | 464 | } |
| 494 | 465 | |
| 495 | 466 | private function add_content_style_section() { |
| 496 | - $low_specificity_accordion_item_selector = ":where( {{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item ) > .e-con"; | |
| 497 | 467 | |
| 468 | + $low_specificity_accordion_item_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con'; | |
| 469 | + | |
| 498 | 470 | $this->start_controls_section( |
| 499 | 471 | 'section_content_style', |
| 500 | 472 | [ |
| 501 | 473 | 'label' => esc_html__( 'Content', 'elementor' ), |
| @@ -535,13 +507,16 @@ | ||
| 535 | 507 | 'label' => esc_html__( 'Border Radius', 'elementor' ), |
| 536 | 508 | 'type' => Controls_Manager::DIMENSIONS, |
| 537 | 509 | 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], |
| 538 | 510 | 'selectors' => [ |
| 539 | - $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 511 | + $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', | |
| 540 | 512 | ], |
| 541 | 513 | ] |
| 542 | 514 | ); |
| 543 | 515 | |
| 516 | + $logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}'; | |
| 517 | + $logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}'; | |
| 518 | + | |
| 544 | 519 | $this->add_responsive_control( |
| 545 | 520 | 'content_padding', |
| 546 | 521 | [ |
| 547 | 522 | 'label' => esc_html__( 'Padding', 'elementor' ), |
| @@ -547,9 +522,9 @@ | ||
| 547 | 522 | 'label' => esc_html__( 'Padding', 'elementor' ), |
| 548 | 523 | 'type' => Controls_Manager::DIMENSIONS, |
| 549 | 524 | 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], |
| 550 | 525 | 'selectors' => [ |
| 551 | - $low_specificity_accordion_item_selector => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};', | |
| 526 | + $low_specificity_accordion_item_selector => "--padding-block-start: {{TOP}}{{UNIT}}; --padding-inline-end: $logical_dimensions_inline_end; --padding-block-end: {{BOTTOM}}{{UNIT}}; --padding-inline-start: $logical_dimensions_inline_start;", | |
| 552 | 527 | ], |
| 553 | 528 | ] |
| 554 | 529 | ); |
| 555 | 530 | |
| @@ -577,9 +552,9 @@ | ||
| 577 | 552 | $this->add_group_control( |
| 578 | 553 | Group_Control_Typography::get_type(), |
| 579 | 554 | [ |
| 580 | 555 | 'name' => 'title_typography', |
| 581 | - 'selector' => ":where( {{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text", | |
| 556 | + 'selector' => ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text', | |
| 582 | 557 | 'fields_options' => [ |
| 583 | 558 | 'font_size' => [ |
| 584 | 559 | 'selectors' => [ |
| 585 | 560 | '{{WRAPPER}}' => '--n-accordion-title-font-size: {{SIZE}}{{UNIT}}', |
| @@ -669,17 +644,17 @@ | ||
| 669 | 644 | |
| 670 | 645 | switch ( $state ) { |
| 671 | 646 | case 'hover': |
| 672 | 647 | $translated_tab_text = esc_html__( 'Hover', 'elementor' ); |
| 673 | - $translated_tab_css_selector = ":where( {{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:hover > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text"; | |
| 648 | + $translated_tab_css_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:hover > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text'; | |
| 674 | 649 | break; |
| 675 | 650 | case 'active': |
| 676 | 651 | $translated_tab_text = esc_html__( 'Active', 'elementor' ); |
| 677 | - $translated_tab_css_selector = ":where( {{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text"; | |
| 652 | + $translated_tab_css_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text'; | |
| 678 | 653 | break; |
| 679 | 654 | default: |
| 680 | 655 | $translated_tab_text = esc_html__( 'Normal', 'elementor' ); |
| 681 | - $translated_tab_css_selector = ":where( {{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:not(hover) > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text"; | |
| 656 | + $translated_tab_css_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:not(hover) > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text'; | |
| 682 | 657 | break; |
| 683 | 658 | } |
| 684 | 659 | |
| 685 | 660 | $this->start_controls_tab( |
| @@ -705,8 +680,13 @@ | ||
| 705 | 680 | Group_Control_Text_Shadow::get_type(), |
| 706 | 681 | [ |
| 707 | 682 | 'name' => $context . '_' . $state . '_text_shadow', |
| 708 | 683 | 'selector' => '{{WRAPPER}} ' . $translated_tab_css_selector, |
| 684 | + 'fields_options' => [ | |
| 685 | + 'text_shadow_type' => [ | |
| 686 | + 'label' => esc_html__( 'Shadow', 'elementor' ), | |
| 687 | + ], | |
| 688 | + ], | |
| 709 | 689 | ] |
| 710 | 690 | ); |
| 711 | 691 | |
| 712 | 692 | $this->add_group_control( |
| @@ -724,10 +704,9 @@ | ||
| 724 | 704 | /** |
| 725 | 705 | * @string $state |
| 726 | 706 | */ |
| 727 | 707 | private function add_border_and_radius_style( $state ) { |
| 728 | - $selector = "{{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title"; | |
| 729 | - | |
| 708 | + $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title'; | |
| 730 | 709 | $translated_tab_text = esc_html__( 'Normal', 'elementor' ); |
| 731 | 710 | |
| 732 | 711 | switch ( $state ) { |
| 733 | 712 | case 'hover': |
| @@ -734,9 +713,9 @@ | ||
| 734 | 713 | $selector .= ':hover'; |
| 735 | 714 | $translated_tab_text = esc_html__( 'Hover', 'elementor' ); |
| 736 | 715 | break; |
| 737 | 716 | case 'active': |
| 738 | - $selector = "{{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title"; | |
| 717 | + $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title'; | |
| 739 | 718 | $translated_tab_text = esc_html__( 'Active', 'elementor' ); |
| 740 | 719 | break; |
| 741 | 720 | } |
| 742 | 721 | |
| @@ -772,9 +751,9 @@ | ||
| 772 | 751 | |
| 773 | 752 | $this->end_controls_tab(); |
| 774 | 753 | } |
| 775 | 754 | |
| 776 | - private function is_active_icon_exist( $settings ): bool { | |
| 755 | + private function is_active_icon_exist( $settings ):bool { | |
| 777 | 756 | return array_key_exists( 'accordion_item_title_icon_active', $settings ) && ! empty( $settings['accordion_item_title_icon_active'] ) && ! empty( $settings['accordion_item_title_icon_active']['value'] ); |
| 778 | 757 | } |
| 779 | 758 | |
| 780 | 759 | private function render_accordion_icons( $settings ) { |
| @@ -908,72 +887,8 @@ | ||
| 908 | 887 | 'aria-labelledby' => $item_id, |
| 909 | 888 | ] ); |
| 910 | 889 | } |
| 911 | 890 | |
| 912 | - protected function get_initial_config(): array { | |
| 913 | - return array_merge( parent::get_initial_config(), [ | |
| 914 | - 'support_improved_repeaters' => true, | |
| 915 | - 'target_container' => [ '.e-n-accordion' ], | |
| 916 | - 'node' => 'details', | |
| 917 | - 'is_interlaced' => true, | |
| 918 | - ] ); | |
| 919 | - } | |
| 920 | - | |
| 921 | - protected function content_template_single_repeater_item() { | |
| 922 | - ?> | |
| 923 | - <# | |
| 924 | - const elementUid = view.getIDInt().toString().substring( 0, 3 ) + view.collection.length; | |
| 925 | - | |
| 926 | - const itemWrapperAttributes = { | |
| 927 | - 'id': 'e-n-accordion-item-' + elementUid, | |
| 928 | - 'class': [ 'e-n-accordion-item', 'e-normal' ], | |
| 929 | - }; | |
| 930 | - | |
| 931 | - const itemTitleAttributes = { | |
| 932 | - 'class': [ 'e-n-accordion-item-title' ], | |
| 933 | - 'data-accordion-index': view.collection.length + 1, | |
| 934 | - 'tabindex': -1, | |
| 935 | - 'aria-expanded': 'false', | |
| 936 | - 'aria-controls': 'e-n-accordion-item-' + elementUid, | |
| 937 | - }; | |
| 938 | - | |
| 939 | - const itemTitleTextAttributes = { | |
| 940 | - 'class': [ 'e-n-accordion-item-title-text' ], | |
| 941 | - 'data-binding-index': view.collection.length + 1, | |
| 942 | - 'data-binding-type': 'repeater-item', | |
| 943 | - 'data-binding-repeater-name': 'items', | |
| 944 | - 'data-binding-setting': ['item_title', 'element_css_id'], | |
| 945 | - 'data-binding-config': JSON.stringify({ | |
| 946 | - 'element_css_id': { | |
| 947 | - editType: 'attribute', | |
| 948 | - attr: 'id', | |
| 949 | - selector: 'details' | |
| 950 | - }, | |
| 951 | - 'item_title': { | |
| 952 | - editType: 'text' | |
| 953 | - } | |
| 954 | - }), | |
| 955 | - }; | |
| 956 | - | |
| 957 | - view.addRenderAttribute( 'details-container', itemWrapperAttributes, null, true ); | |
| 958 | - view.addRenderAttribute( 'summary-container', itemTitleAttributes, null, true ); | |
| 959 | - view.addRenderAttribute( 'text-container', itemTitleTextAttributes, null, true ); | |
| 960 | - #> | |
| 961 | - | |
| 962 | - <details {{{ view.getRenderAttributeString( 'details-container' ) }}}> | |
| 963 | - <summary {{{ view.getRenderAttributeString( 'summary-container' ) }}}> | |
| 964 | - <span class="e-n-accordion-item-title-header"> | |
| 965 | - <div {{{ view.getRenderAttributeString( 'text-container' ) }}}>{{{ data.item_title }}}</div> | |
| 966 | - </span> | |
| 967 | - <span class="e-n-accordion-item-title-icon"> | |
| 968 | - <span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span> | |
| 969 | - <span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span> | |
| 970 | - </span> | |
| 971 | - </summary> | |
| 972 | - </details> | |
| 973 | - <?php | |
| 974 | - } | |
| 975 | - | |
| 976 | 891 | protected function content_template() { |
| 977 | 892 | ?> |
| 978 | 893 | <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> |
| 979 | 894 | <# if ( settings['items'] ) { |
| @@ -1020,22 +935,12 @@ | ||
| 1020 | 935 | }); |
| 1021 | 936 | |
| 1022 | 937 | view.addRenderAttribute( itemTitleTextKey, { |
| 1023 | 938 | 'class': ['e-n-accordion-item-title-text'], |
| 1024 | - 'data-binding-index': itemCount, | |
| 1025 | 939 | 'data-binding-type': 'repeater-item', |
| 1026 | 940 | 'data-binding-repeater-name': 'items', |
| 1027 | - 'data-binding-setting': ['item_title', 'element_css_id'], | |
| 1028 | - 'data-binding-config': JSON.stringify({ | |
| 1029 | - 'element_css_id': { | |
| 1030 | - editType: 'attribute', | |
| 1031 | - attr: 'id', | |
| 1032 | - selector: 'details' | |
| 1033 | - }, | |
| 1034 | - 'item_title': { | |
| 1035 | - editType: 'text' | |
| 1036 | - } | |
| 1037 | - }), | |
| 941 | + 'data-binding-setting': ['item_title'], | |
| 942 | + 'data-binding-index': itemCount, | |
| 1038 | 943 | }); |
| 1039 | 944 | #> |
| 1040 | 945 | |
| 1041 | 946 | <details {{{ view.getRenderAttributeString( itemWrapperKey ) }}}> |