← All changes | modules/nested-accordion/widgets/nested-accordion.php +37 -124 4.3.0 → 3.19.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(
		@@ -323,14 +294,15 @@
323	294
324	295	$this->add_control(
325	296	'faq_schema_message',
326	297	[
327		- 'type' => Controls_Manager::ALERT,
328		- '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' ),
	298	+ 'type' => Controls_Manager::RAW_HTML,
	299	+ 'raw' => esc_html__( 'Let Google know that this section contains an FAQ. Make sure to only use it only once per page', 'elementor' ),
	300	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
330	301	'condition' => [
331	302	'faq_schema[value]' => 'yes',
332	303	],
	304	+ 'separator' => 'none',
333	305	]
334	306	);
335	307
336	308	$this->end_controls_section();
		@@ -492,10 +464,11 @@
492	464	$this->end_controls_section();
493	465	}
494	466
495	467	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	468
	469	+ $low_specificity_accordion_item_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con';
	470	+
498	471	$this->start_controls_section(
499	472	'section_content_style',
500	473	[
501	474	'label' => esc_html__( 'Content', 'elementor' ),
		@@ -535,13 +508,16 @@
535	508	'label' => esc_html__( 'Border Radius', 'elementor' ),
536	509	'type' => Controls_Manager::DIMENSIONS,
537	510	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
538	511	'selectors' => [
539		- $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	512	+ $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
540	513	],
541	514	]
542	515	);
543	516
	517	+ $logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}';
	518	+ $logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}';
	519	+
544	520	$this->add_responsive_control(
545	521	'content_padding',
546	522	[
547	523	'label' => esc_html__( 'Padding', 'elementor' ),
		@@ -547,9 +523,9 @@
547	523	'label' => esc_html__( 'Padding', 'elementor' ),
548	524	'type' => Controls_Manager::DIMENSIONS,
549	525	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
550	526	'selectors' => [
551		- $low_specificity_accordion_item_selector => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};',
	527	+ $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	528	],
553	529	]
554	530	);
555	531
		@@ -577,9 +553,9 @@
577	553	$this->add_group_control(
578	554	Group_Control_Typography::get_type(),
579	555	[
580	556	'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",
	557	+ '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	558	'fields_options' => [
583	559	'font_size' => [
584	560	'selectors' => [
585	561	'{{WRAPPER}}' => '--n-accordion-title-font-size: {{SIZE}}{{UNIT}}',
		@@ -597,13 +573,20 @@
597	573
598	574	$this->end_controls_tabs();
599	575
600	576	$this->add_control(
	577	+ 'header_section_divider',
	578	+ [
	579	+ 'type' => Controls_Manager::DIVIDER,
	580	+ ]
	581	+ );
	582	+
	583	+ $this->add_control(
601	584	'heading_icon_style_title',
602	585	[
603	586	'type' => Controls_Manager::HEADING,
604	587	'label' => esc_html__( 'Icon', 'elementor' ),
605		- 'separator' => 'before',
	588	+
606	589	]
607	590	);
608	591
609	592	$this->add_responsive_control(
		@@ -669,17 +652,17 @@
669	652
670	653	switch ( $state ) {
671	654	case 'hover':
672	655	$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";
	656	+ $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	657	break;
675	658	case 'active':
676	659	$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";
	660	+ $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	661	break;
679	662	default:
680	663	$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";
	664	+ $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	665	break;
683	666	}
684	667
685	668	$this->start_controls_tab(
		@@ -705,8 +688,13 @@
705	688	Group_Control_Text_Shadow::get_type(),
706	689	[
707	690	'name' => $context . '_' . $state . '_text_shadow',
708	691	'selector' => '{{WRAPPER}} ' . $translated_tab_css_selector,
	692	+ 'fields_options' => [
	693	+ 'text_shadow_type' => [
	694	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	695	+ ],
	696	+ ],
709	697	]
710	698	);
711	699
712	700	$this->add_group_control(
		@@ -724,10 +712,9 @@
724	712	/**
725	713	* @string $state
726	714	*/
727	715	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		-
	716	+ $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title';
730	717	$translated_tab_text = esc_html__( 'Normal', 'elementor' );
731	718
732	719	switch ( $state ) {
733	720	case 'hover':
		@@ -734,9 +721,9 @@
734	721	$selector .= ':hover';
735	722	$translated_tab_text = esc_html__( 'Hover', 'elementor' );
736	723	break;
737	724	case 'active':
738		- $selector = "{{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title";
	725	+ $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title';
739	726	$translated_tab_text = esc_html__( 'Active', 'elementor' );
740	727	break;
741	728	}
742	729
		@@ -772,9 +759,9 @@
772	759
773	760	$this->end_controls_tab();
774	761	}
775	762
776		- private function is_active_icon_exist( $settings ): bool {
	763	+ private function is_active_icon_exist( $settings ):bool {
777	764	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	765	}
779	766
780	767	private function render_accordion_icons( $settings ) {
		@@ -908,72 +895,8 @@
908	895	'aria-labelledby' => $item_id,
909	896	] );
910	897	}
911	898
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	899	protected function content_template() {
977	900	?>
978	901	<div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys">
979	902	<# if ( settings['items'] ) {
		@@ -1020,22 +943,12 @@
1020	943	});
1021	944
1022	945	view.addRenderAttribute( itemTitleTextKey, {
1023	946	'class': ['e-n-accordion-item-title-text'],
1024		- 'data-binding-index': itemCount,
1025	947	'data-binding-type': 'repeater-item',
1026	948	'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		- }),
	949	+ 'data-binding-setting': ['item_title'],
	950	+ 'data-binding-index': itemCount,
1038	951	});
1039	952	#>
1040	953
1041	954	<details {{{ view.getRenderAttributeString( itemWrapperKey ) }}}>