← All changes | modules/nested-accordion/widgets/nested-accordion.php +52 -144 4.3.1 → 3.17.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
		@@ -140,11 +111,8 @@
140	111	'default' => '',
141	112	'dynamic' => [
142	113	'active' => true,
143	114	],
144		- 'ai' => [
145		- 'active' => false,
146		- ],
147	115	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
148	116	'style_transfer' => false,
149	117	]
150	118	);
		@@ -166,9 +134,9 @@
166	134	'item_title' => esc_html__( 'Item #3', 'elementor' ),
167	135	],
168	136	],
169	137	'title_field' => '{{{ item_title }}}',
170		- 'button_text' => esc_html__( 'Add Item', 'elementor' ),
	138	+ 'button_text' => 'Add Item',
171	139	]
172	140	);
173	141
174	142	$this->add_responsive_control(
		@@ -323,14 +291,15 @@
323	291
324	292	$this->add_control(
325	293	'faq_schema_message',
326	294	[
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' ),
	295	+ 'type' => Controls_Manager::RAW_HTML,
	296	+ 'raw' => esc_html__( 'Let Google know that this section contains an FAQ. Make sure to only use it only once per page', 'elementor' ),
	297	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
330	298	'condition' => [
331	299	'faq_schema[value]' => 'yes',
332	300	],
	301	+ 'separator' => 'none',
333	302	]
334	303	);
335	304
336	305	$this->end_controls_section();
		@@ -408,19 +377,14 @@
408	377	'accordion_item_title_space_between',
409	378	[
410	379	'label' => esc_html__( 'Space between Items', 'elementor' ),
411	380	'type' => Controls_Manager::SLIDER,
412		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
	381	+ 'size_units' => [ 'px' ],
413	382	'range' => [
414	383	'px' => [
	384	+ 'min' => 0,
415	385	'max' => 200,
416	386	],
417		- 'em' => [
418		- 'max' => 20,
419		- ],
420		- 'rem' => [
421		- 'max' => 20,
422		- ],
423	387	],
424	388	'default' => [
425	389	'size' => 0,
426	390	],
		@@ -434,19 +398,14 @@
434	398	'accordion_item_title_distance_from_content',
435	399	[
436	400	'label' => esc_html__( 'Distance from content', 'elementor' ),
437	401	'type' => Controls_Manager::SLIDER,
438		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
	402	+ 'size_units' => [ 'px' ],
439	403	'range' => [
440	404	'px' => [
	405	+ 'min' => 0,
441	406	'max' => 200,
442	407	],
443		- 'em' => [
444		- 'max' => 20,
445		- ],
446		- 'rem' => [
447		- 'max' => 20,
448		- ],
449	408	],
450	409	'default' => [
451	410	'size' => 0,
452	411	],
		@@ -492,10 +451,11 @@
492	451	$this->end_controls_section();
493	452	}
494	453
495	454	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	455
	456	+ $low_specificity_accordion_item_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con';
	457	+
498	458	$this->start_controls_section(
499	459	'section_content_style',
500	460	[
501	461	'label' => esc_html__( 'Content', 'elementor' ),
		@@ -535,13 +495,16 @@
535	495	'label' => esc_html__( 'Border Radius', 'elementor' ),
536	496	'type' => Controls_Manager::DIMENSIONS,
537	497	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
538	498	'selectors' => [
539		- $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	499	+ $low_specificity_accordion_item_selector => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
540	500	],
541	501	]
542	502	);
543	503
	504	+ $logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}';
	505	+ $logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}';
	506	+
544	507	$this->add_responsive_control(
545	508	'content_padding',
546	509	[
547	510	'label' => esc_html__( 'Padding', 'elementor' ),
		@@ -547,9 +510,9 @@
547	510	'label' => esc_html__( 'Padding', 'elementor' ),
548	511	'type' => Controls_Manager::DIMENSIONS,
549	512	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
550	513	'selectors' => [
551		- $low_specificity_accordion_item_selector => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};',
	514	+ $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	515	],
553	516	]
554	517	);
555	518
		@@ -577,9 +540,9 @@
577	540	$this->add_group_control(
578	541	Group_Control_Typography::get_type(),
579	542	[
580	543	'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",
	544	+ '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	545	'fields_options' => [
583	546	'font_size' => [
584	547	'selectors' => [
585	548	'{{WRAPPER}}' => '--n-accordion-title-font-size: {{SIZE}}{{UNIT}}',
		@@ -597,13 +560,20 @@
597	560
598	561	$this->end_controls_tabs();
599	562
600	563	$this->add_control(
	564	+ 'header_section_divider',
	565	+ [
	566	+ 'type' => Controls_Manager::DIVIDER,
	567	+ ]
	568	+ );
	569	+
	570	+ $this->add_control(
601	571	'heading_icon_style_title',
602	572	[
603	573	'type' => Controls_Manager::HEADING,
604	574	'label' => esc_html__( 'Icon', 'elementor' ),
605		- 'separator' => 'before',
	575	+
606	576	]
607	577	);
608	578
609	579	$this->add_responsive_control(
		@@ -612,12 +582,16 @@
612	582	'label' => esc_html__( 'Size', 'elementor' ),
613	583	'type' => Controls_Manager::SLIDER,
614	584	'range' => [
615	585	'em' => [
	586	+ 'min' => 0,
616	587	'max' => 10,
	588	+ 'step' => 0.1,
617	589	],
618	590	'rem' => [
	591	+ 'min' => 0,
619	592	'max' => 10,
	593	+ 'step' => 0.1,
620	594	],
621	595	],
622	596	'default' => [
623	597	'unit' => 'px',
		@@ -636,11 +610,13 @@
636	610	'label' => esc_html__( 'Spacing', 'elementor' ),
637	611	'type' => Controls_Manager::SLIDER,
638	612	'range' => [
639	613	'px' => [
	614	+ 'min' => 0,
640	615	'max' => 400,
641	616	],
642	617	'vw' => [
	618	+ 'min' => 0,
643	619	'max' => 50,
644	620	'step' => 0.1,
645	621	],
646	622	],
		@@ -669,17 +645,17 @@
669	645
670	646	switch ( $state ) {
671	647	case 'hover':
672	648	$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";
	649	+ $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	650	break;
675	651	case 'active':
676	652	$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";
	653	+ $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	654	break;
679	655	default:
680	656	$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";
	657	+ $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	658	break;
683	659	}
684	660
685	661	$this->start_controls_tab(
		@@ -705,8 +681,13 @@
705	681	Group_Control_Text_Shadow::get_type(),
706	682	[
707	683	'name' => $context . '_' . $state . '_text_shadow',
708	684	'selector' => '{{WRAPPER}} ' . $translated_tab_css_selector,
	685	+ 'fields_options' => [
	686	+ 'text_shadow_type' => [
	687	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	688	+ ],
	689	+ ],
709	690	]
710	691	);
711	692
712	693	$this->add_group_control(
		@@ -724,10 +705,9 @@
724	705	/**
725	706	* @string $state
726	707	*/
727	708	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		-
	709	+ $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title';
730	710	$translated_tab_text = esc_html__( 'Normal', 'elementor' );
731	711
732	712	switch ( $state ) {
733	713	case 'hover':
		@@ -734,9 +714,9 @@
734	714	$selector .= ':hover';
735	715	$translated_tab_text = esc_html__( 'Hover', 'elementor' );
736	716	break;
737	717	case 'active':
738		- $selector = "{{WRAPPER}}{$this->widget_container_selector} > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title";
	718	+ $selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title';
739	719	$translated_tab_text = esc_html__( 'Active', 'elementor' );
740	720	break;
741	721	}
742	722
		@@ -772,9 +752,9 @@
772	752
773	753	$this->end_controls_tab();
774	754	}
775	755
776		- private function is_active_icon_exist( $settings ): bool {
	756	+ private function is_active_icon_exist( $settings ):bool {
777	757	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	758	}
779	759
780	760	private function render_accordion_icons( $settings ) {
		@@ -823,8 +803,9 @@
823	803	] );
824	804
825	805	$this->add_render_attribute( $item_summary_key, [
826	806	'class' => [ 'e-n-accordion-item-title' ],
	807	+ 'role' => 'button',
827	808	'data-accordion-index' => $accordion_count,
828	809	'tabindex' => 0 === $index ? 0 : -1,
829	810	'aria-expanded' => $aria_expanded ? 'true' : 'false',
830	811	'aria-controls' => $item_id,
		@@ -908,72 +889,8 @@
908	889	'aria-labelledby' => $item_id,
909	890	] );
910	891	}
911	892
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	893	protected function content_template() {
977	894	?>
978	895	<div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys">
979	896	<# if ( settings['items'] ) {
		@@ -978,8 +895,9 @@
978	895	<div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys">
979	896	<# if ( settings['items'] ) {
980	897	const elementUid = view.getIDInt().toString().substring( 0, 3 ),
981	898	titleHTMLTag = elementor.helpers.validateHTMLTag( settings.title_tag ),
	899	+ itemTitleText = 'item-title-text-' + elementUid,
982	900	defaultState = settings.default_state,
983	901	itemTitleIcon = elementor.helpers.renderIcon( view, settings['accordion_item_title_icon'], { 'aria-hidden': true }, 'i', 'object' ) ?? '',
984	902	itemTitleIconActive = '' === settings.accordion_item_title_icon_active.value
985	903	? itemTitleIcon
		@@ -988,9 +906,8 @@
988	906
989	907	<# _.each( settings['items'], function( item, index ) {
990	908	const itemCount = index + 1,
991	909	itemUid = elementUid + index,
992		- itemTitleTextKey = 'item-title-text-' + itemUid,
993	910	itemWrapperKey = itemUid,
994	911	itemTitleKey = 'item-' + itemUid,
995	912	ariaExpanded = 'expanded' === defaultState && 0 === index ? 'true' : 'false';
996	913
		@@ -1016,26 +933,17 @@
1016	933	'data-accordion-index': itemCount,
1017	934	'tabindex': 0 === index ? 0 : -1,
1018	935	'aria-expanded': ariaExpanded,
1019	936	'aria-controls': itemId,
	937	+ 'role': 'button',
1020	938	});
1021	939
1022		- view.addRenderAttribute( itemTitleTextKey, {
	940	+ view.addRenderAttribute( itemTitleText, {
1023	941	'class': ['e-n-accordion-item-title-text'],
1024		- 'data-binding-index': itemCount,
1025	942	'data-binding-type': 'repeater-item',
1026	943	'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		- }),
	944	+ 'data-binding-setting': ['item_title'],
	945	+ 'data-binding-index': itemCount,
1038	946	});
1039	947	#>
1040	948
1041	949	<details {{{ view.getRenderAttributeString( itemWrapperKey ) }}}>
		@@ -1040,9 +948,9 @@
1040	948
1041	949	<details {{{ view.getRenderAttributeString( itemWrapperKey ) }}}>
1042	950	<summary {{{ view.getRenderAttributeString( itemTitleKey ) }}}>
1043	951	<span class="e-n-accordion-item-title-header">
1044		- <{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( itemTitleTextKey ) }}}>
	952	+ <{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( itemTitleText ) }}}>
1045	953	{{{ item.item_title }}}
1046	954	</{{{ titleHTMLTag }}}>
1047	955	</span>
1048	956	<# if (settings.accordion_item_title_icon.value) { #>