← All changes | includes/widgets/accordion.php +27 -97 4.2.1 → 3.9.0 View file →

		@@ -6,9 +6,8 @@
6	6	}
7	7
8	8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10		-
11	10	/**
12	11	* Elementor accordion widget.
13	12	*
14	13	* Elementor widget that displays a collapsible display of content in an
		@@ -73,43 +72,9 @@
73	72	public function get_keywords() {
74	73	return [ 'accordion', 'tabs', 'toggle' ];
75	74	}
76	75
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	76	/**
82		- * Get style dependencies.
83		- *
84		- * Retrieve the list of style dependencies the widget requires.
85		- *
86		- * @since 3.24.0
87		- * @access public
88		- *
89		- * @return array Widget style dependencies.
90		- */
91		- public function get_style_depends(): array {
92		- return [ 'widget-accordion' ];
93		- }
94		-
95		- /**
96		- * Hide widget from panel.
97		- *
98		- * Hide the toggle widget from the panel if nested-accordion experiment is active.
99		- *
100		- * @since 3.15.0
101		- * @return bool
102		- */
103		- public function show_in_panel(): bool {
104		- return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
105		- }
106		-
107		- public function has_widget_inner_wrapper(): bool {
108		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
109		- }
110		-
111		- /**
112	77	* Register accordion widget controls.
113	78	*
114	79	* Adds different input fields to allow the user to change and customize the widget settings.
115	80	*
		@@ -128,9 +93,9 @@
128	93
129	94	$repeater->add_control(
130	95	'tab_title',
131	96	[
132		- 'label' => esc_html__( 'Title', 'elementor' ),
	97	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
133	98	'type' => Controls_Manager::TEXT,
134	99	'default' => esc_html__( 'Accordion Title', 'elementor' ),
135	100	'dynamic' => [
136	101	'active' => true,
		@@ -144,22 +109,12 @@
144	109	[
145	110	'label' => esc_html__( 'Content', 'elementor' ),
146	111	'type' => Controls_Manager::WYSIWYG,
147	112	'default' => esc_html__( 'Accordion Content', 'elementor' ),
	113	+ 'show_label' => false,
148	114	]
149	115	);
150	116
151		- if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
152		- $this->add_deprecation_message(
153		- '3.15.0',
154		- esc_html__(
155		- 'You are currently editing an Accordion Widget in its old version. Any new Accordion widget dragged into the canvas will be the new Accordion widget, with the improved Nested capabilities.',
156		- 'elementor'
157		- ),
158		- 'nested-accordion'
159		- );
160		- }
161		-
162	117	$this->add_control(
163	118	'tabs',
164	119	[
165	120	'label' => esc_html__( 'Accordion Items', 'elementor' ),
		@@ -179,8 +134,17 @@
179	134	]
180	135	);
181	136
182	137	$this->add_control(
	138	+ 'view',
	139	+ [
	140	+ 'label' => esc_html__( 'View', 'elementor' ),
	141	+ 'type' => Controls_Manager::HIDDEN,
	142	+ 'default' => 'traditional',
	143	+ ]
	144	+ );
	145	+
	146	+ $this->add_control(
183	147	'selected_icon',
184	148	[
185	149	'label' => esc_html__( 'Icon', 'elementor' ),
186	150	'type' => Controls_Manager::ICONS,
		@@ -279,9 +243,9 @@
279	243	'border_width',
280	244	[
281	245	'label' => esc_html__( 'Border Width', 'elementor' ),
282	246	'type' => Controls_Manager::SLIDER,
283		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	247	+ 'size_units' => [ 'px', '%', 'em' ],
284	248	'range' => [
285	249	'px' => [
286	250	'max' => 20,
287	251	],
		@@ -303,10 +267,10 @@
303	267	'label' => esc_html__( 'Border Color', 'elementor' ),
304	268	'type' => Controls_Manager::COLOR,
305	269	'selectors' => [
306	270	'{{WRAPPER}} .elementor-accordion-item' => 'border-color: {{VALUE}};',
307		- '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-block-start-color: {{VALUE}};',
308		- '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-block-end-color: {{VALUE}};',
	271	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
	272	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
309	273	],
310	274	]
311	275	);
312	276
		@@ -392,9 +356,9 @@
392	356	'title_padding',
393	357	[
394	358	'label' => esc_html__( 'Padding', 'elementor' ),
395	359	'type' => Controls_Manager::DIMENSIONS,
396		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	360	+ 'size_units' => [ 'px', 'em', '%' ],
397	361	'selectors' => [
398	362	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
399	363	],
400	364	]
		@@ -461,22 +425,17 @@
461	425	'icon_space',
462	426	[
463	427	'label' => esc_html__( 'Spacing', 'elementor' ),
464	428	'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	429	'range' => [
467	430	'px' => [
	431	+ 'min' => 0,
468	432	'max' => 100,
469	433	],
470		- 'em' => [
471		- 'max' => 1,
472		- ],
473		- 'rem' => [
474		- 'max' => 1,
475		- ],
476	434	],
477	435	'selectors' => [
478		- '{{WRAPPER}} .elementor-accordion-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	436	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	437	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
479	438	],
480	439	]
481	440	);
482	441
		@@ -538,9 +497,9 @@
538	497	'content_padding',
539	498	[
540	499	'label' => esc_html__( 'Padding', 'elementor' ),
541	500	'type' => Controls_Manager::DIMENSIONS,
542		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	501	+ 'size_units' => [ 'px', 'em', '%' ],
543	502	'selectors' => [
544	503	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	504	],
546	505	]
		@@ -573,9 +532,9 @@
573	532	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
574	533	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
575	534	$id_int = substr( $this->get_id_int(), 0, 3 );
576	535	?>
577		- <div class="elementor-accordion">
	536	+ <div class="elementor-accordion" role="tablist">
578	537	<?php
579	538	foreach ( $settings['tabs'] as $index => $item ) :
580	539	$tab_count = $index + 1;
581	540
		@@ -586,9 +545,9 @@
586	545	$this->add_render_attribute( $tab_title_setting_key, [
587	546	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
588	547	'class' => [ 'elementor-tab-title' ],
589	548	'data-tab' => $tab_count,
590		- 'role' => 'button',
	549	+ 'role' => 'tab',
591	550	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
592	551	'aria-expanded' => 'false',
593	552	] );
594	553
		@@ -595,9 +554,9 @@
595	554	$this->add_render_attribute( $tab_content_setting_key, [
596	555	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
597	556	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
598	557	'data-tab' => $tab_count,
599		- 'role' => 'region',
	558	+ 'role' => 'tabpanel',
600	559	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
601	560	] );
602	561
603	562	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -615,9 +574,9 @@
615	574	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
616	575	<?php } ?>
617	576	</span>
618	577	<?php endif; ?>
619		- <a class="elementor-accordion-title" tabindex="0"><?php
	578	+ <a class="elementor-accordion-title" href=""><?php
620	579	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
621	580	?></a>
622	581	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
623	582	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
		@@ -657,40 +616,11 @@
657	616	*
658	617	* @since 2.9.0
659	618	* @access protected
660	619	*/
661		- public function render_markdown(): string {
662		- $settings = $this->get_settings_for_display();
663		-
664		- if ( empty( $settings['tabs'] ) ) {
665		- return '';
666		- }
667		-
668		- $sections = [];
669		-
670		- foreach ( $settings['tabs'] as $item ) {
671		- $title = Utils::html_to_plain_text( $item['tab_title'] ?? '' );
672		- $content = \Elementor\Modules\MarkdownRender\Html_To_Markdown::convert( $item['tab_content'] ?? '' );
673		-
674		- if ( empty( $title ) && empty( $content ) ) {
675		- continue;
676		- }
677		-
678		- $section = '### ' . $title;
679		-
680		- if ( ! empty( $content ) ) {
681		- $section .= "\n\n" . $content;
682		- }
683		-
684		- $sections[] = $section;
685		- }
686		-
687		- return implode( "\n\n", $sections );
688		- }
689		-
690	620	protected function content_template() {
691	621	?>
692		- <div class="elementor-accordion">
	622	+ <div class="elementor-accordion" role="tablist">
693	623	<#
694	624	if ( settings.tabs ) {
695	625	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
696	626	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -706,9 +636,9 @@
706	636	'id': 'elementor-tab-title-' + tabindex + tabCount,
707	637	'class': [ 'elementor-tab-title' ],
708	638	'tabindex': tabindex + tabCount,
709	639	'data-tab': tabCount,
710		- 'role': 'button',
	640	+ 'role': 'tab',
711	641	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
712	642	'aria-expanded': 'false',
713	643	} );
714	644
		@@ -715,9 +645,9 @@
715	645	view.addRenderAttribute( tabContentKey, {
716	646	'id': 'elementor-tab-content-' + tabindex + tabCount,
717	647	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
718	648	'data-tab': tabCount,
719		- 'role': 'region',
	649	+ 'role': 'tabpanel',
720	650	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
721	651	} );
722	652
723	653	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -736,9 +666,9 @@
736	666	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
737	667	<# } #>
738	668	</span>
739	669	<# } #>
740		- <a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
	670	+ <a class="elementor-accordion-title" href="">{{{ item.tab_title }}}</a>
741	671	</{{{ titleHTMLTag }}}>
742	672	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
743	673	</div>
744	674	<#