← All changes | includes/widgets/accordion.php +28 -109 4.1.3 → 3.4.3 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,16 +243,13 @@
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' ],
284	247	'range' => [
285	248	'px' => [
286		- 'max' => 20,
	249	+ 'min' => 0,
	250	+ 'max' => 10,
287	251	],
288		- 'em' => [
289		- 'max' => 2,
290		- ],
291	252	],
292	253	'selectors' => [
293	254	'{{WRAPPER}} .elementor-accordion-item' => 'border-width: {{SIZE}}{{UNIT}};',
294	255	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
		@@ -303,10 +264,10 @@
303	264	'label' => esc_html__( 'Border Color', 'elementor' ),
304	265	'type' => Controls_Manager::COLOR,
305	266	'selectors' => [
306	267	'{{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}};',
	268	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
	269	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
309	270	],
310	271	]
311	272	);
312	273
		@@ -372,16 +333,8 @@
372	333	]
373	334	);
374	335
375	336	$this->add_group_control(
376		- Group_Control_Text_Stroke::get_type(),
377		- [
378		- 'name' => 'text_stroke',
379		- 'selector' => '{{WRAPPER}} .elementor-accordion-title',
380		- ]
381		- );
382		-
383		- $this->add_group_control(
384	337	Group_Control_Text_Shadow::get_type(),
385	338	[
386	339	'name' => 'title_shadow',
387	340	'selector' => '{{WRAPPER}} .elementor-accordion-title',
		@@ -392,9 +345,9 @@
392	345	'title_padding',
393	346	[
394	347	'label' => esc_html__( 'Padding', 'elementor' ),
395	348	'type' => Controls_Manager::DIMENSIONS,
396		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	349	+ 'size_units' => [ 'px', 'em', '%' ],
397	350	'selectors' => [
398	351	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
399	352	],
400	353	]
		@@ -461,22 +414,17 @@
461	414	'icon_space',
462	415	[
463	416	'label' => esc_html__( 'Spacing', 'elementor' ),
464	417	'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	418	'range' => [
467	419	'px' => [
	420	+ 'min' => 0,
468	421	'max' => 100,
469	422	],
470		- 'em' => [
471		- 'max' => 1,
472		- ],
473		- 'rem' => [
474		- 'max' => 1,
475		- ],
476	423	],
477	424	'selectors' => [
478		- '{{WRAPPER}} .elementor-accordion-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	425	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	426	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
479	427	],
480	428	]
481	429	);
482	430
		@@ -538,9 +486,9 @@
538	486	'content_padding',
539	487	[
540	488	'label' => esc_html__( 'Padding', 'elementor' ),
541	489	'type' => Controls_Manager::DIMENSIONS,
542		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	490	+ 'size_units' => [ 'px', 'em', '%' ],
543	491	'selectors' => [
544	492	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	493	],
546	494	]
		@@ -573,9 +521,9 @@
573	521	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
574	522	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
575	523	$id_int = substr( $this->get_id_int(), 0, 3 );
576	524	?>
577		- <div class="elementor-accordion">
	525	+ <div class="elementor-accordion" role="tablist">
578	526	<?php
579	527	foreach ( $settings['tabs'] as $index => $item ) :
580	528	$tab_count = $index + 1;
581	529
		@@ -586,9 +534,9 @@
586	534	$this->add_render_attribute( $tab_title_setting_key, [
587	535	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
588	536	'class' => [ 'elementor-tab-title' ],
589	537	'data-tab' => $tab_count,
590		- 'role' => 'button',
	538	+ 'role' => 'tab',
591	539	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
592	540	'aria-expanded' => 'false',
593	541	] );
594	542
		@@ -595,9 +543,9 @@
595	543	$this->add_render_attribute( $tab_content_setting_key, [
596	544	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
597	545	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
598	546	'data-tab' => $tab_count,
599		- 'role' => 'region',
	547	+ 'role' => 'tabpanel',
600	548	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
601	549	] );
602	550
603	551	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -615,9 +563,9 @@
615	563	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
616	564	<?php } ?>
617	565	</span>
618	566	<?php endif; ?>
619		- <a class="elementor-accordion-title" tabindex="0"><?php
	567	+ <a class="elementor-accordion-title" href=""><?php
620	568	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
621	569	?></a>
622	570	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
623	571	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
		@@ -657,40 +605,11 @@
657	605	*
658	606	* @since 2.9.0
659	607	* @access protected
660	608	*/
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	609	protected function content_template() {
691	610	?>
692		- <div class="elementor-accordion">
	611	+ <div class="elementor-accordion" role="tablist">
693	612	<#
694	613	if ( settings.tabs ) {
695	614	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
696	615	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -706,9 +625,9 @@
706	625	'id': 'elementor-tab-title-' + tabindex + tabCount,
707	626	'class': [ 'elementor-tab-title' ],
708	627	'tabindex': tabindex + tabCount,
709	628	'data-tab': tabCount,
710		- 'role': 'button',
	629	+ 'role': 'tab',
711	630	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
712	631	'aria-expanded': 'false',
713	632	} );
714	633
		@@ -715,9 +634,9 @@
715	634	view.addRenderAttribute( tabContentKey, {
716	635	'id': 'elementor-tab-content-' + tabindex + tabCount,
717	636	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
718	637	'data-tab': tabCount,
719		- 'role': 'region',
	638	+ 'role': 'tabpanel',
720	639	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
721	640	} );
722	641
723	642	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -736,9 +655,9 @@
736	655	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
737	656	<# } #>
738	657	</span>
739	658	<# } #>
740		- <a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
	659	+ <a class="elementor-accordion-title" href="">{{{ item.tab_title }}}</a>
741	660	</{{{ titleHTMLTag }}}>
742	661	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
743	662	</div>
744	663	<#