← All changes | includes/widgets/accordion.php +28 -111 4.1.3 → 3.4.0-dev9 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
		@@ -337,9 +298,8 @@
337	298	'label' => esc_html__( 'Color', 'elementor' ),
338	299	'type' => Controls_Manager::COLOR,
339	300	'selectors' => [
340	301	'{{WRAPPER}} .elementor-accordion-icon, {{WRAPPER}} .elementor-accordion-title' => 'color: {{VALUE}};',
341		- '{{WRAPPER}} .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
342	302	],
343	303	'global' => [
344	304	'default' => Global_Colors::COLOR_PRIMARY,
345	305	],
		@@ -352,9 +312,8 @@
352	312	'label' => esc_html__( 'Active Color', 'elementor' ),
353	313	'type' => Controls_Manager::COLOR,
354	314	'selectors' => [
355	315	'{{WRAPPER}} .elementor-active .elementor-accordion-icon, {{WRAPPER}} .elementor-active .elementor-accordion-title' => 'color: {{VALUE}};',
356		- '{{WRAPPER}} .elementor-active .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
357	316	],
358	317	'global' => [
359	318	'default' => Global_Colors::COLOR_ACCENT,
360	319	],
		@@ -372,16 +331,8 @@
372	331	]
373	332	);
374	333
375	334	$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	335	Group_Control_Text_Shadow::get_type(),
385	336	[
386	337	'name' => 'title_shadow',
387	338	'selector' => '{{WRAPPER}} .elementor-accordion-title',
		@@ -392,9 +343,9 @@
392	343	'title_padding',
393	344	[
394	345	'label' => esc_html__( 'Padding', 'elementor' ),
395	346	'type' => Controls_Manager::DIMENSIONS,
396		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	347	+ 'size_units' => [ 'px', 'em', '%' ],
397	348	'selectors' => [
398	349	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
399	350	],
400	351	]
		@@ -461,22 +412,17 @@
461	412	'icon_space',
462	413	[
463	414	'label' => esc_html__( 'Spacing', 'elementor' ),
464	415	'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	416	'range' => [
467	417	'px' => [
	418	+ 'min' => 0,
468	419	'max' => 100,
469	420	],
470		- 'em' => [
471		- 'max' => 1,
472		- ],
473		- 'rem' => [
474		- 'max' => 1,
475		- ],
476	421	],
477	422	'selectors' => [
478		- '{{WRAPPER}} .elementor-accordion-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	423	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	424	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
479	425	],
480	426	]
481	427	);
482	428
		@@ -538,9 +484,9 @@
538	484	'content_padding',
539	485	[
540	486	'label' => esc_html__( 'Padding', 'elementor' ),
541	487	'type' => Controls_Manager::DIMENSIONS,
542		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	488	+ 'size_units' => [ 'px', 'em', '%' ],
543	489	'selectors' => [
544	490	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	491	],
546	492	]
		@@ -573,9 +519,9 @@
573	519	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
574	520	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
575	521	$id_int = substr( $this->get_id_int(), 0, 3 );
576	522	?>
577		- <div class="elementor-accordion">
	523	+ <div class="elementor-accordion" role="tablist">
578	524	<?php
579	525	foreach ( $settings['tabs'] as $index => $item ) :
580	526	$tab_count = $index + 1;
581	527
		@@ -586,9 +532,9 @@
586	532	$this->add_render_attribute( $tab_title_setting_key, [
587	533	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
588	534	'class' => [ 'elementor-tab-title' ],
589	535	'data-tab' => $tab_count,
590		- 'role' => 'button',
	536	+ 'role' => 'tab',
591	537	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
592	538	'aria-expanded' => 'false',
593	539	] );
594	540
		@@ -595,9 +541,9 @@
595	541	$this->add_render_attribute( $tab_content_setting_key, [
596	542	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
597	543	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
598	544	'data-tab' => $tab_count,
599		- 'role' => 'region',
	545	+ 'role' => 'tabpanel',
600	546	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
601	547	] );
602	548
603	549	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -615,9 +561,9 @@
615	561	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
616	562	<?php } ?>
617	563	</span>
618	564	<?php endif; ?>
619		- <a class="elementor-accordion-title" tabindex="0"><?php
	565	+ <a class="elementor-accordion-title" href=""><?php
620	566	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
621	567	?></a>
622	568	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
623	569	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
		@@ -657,40 +603,11 @@
657	603	*
658	604	* @since 2.9.0
659	605	* @access protected
660	606	*/
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	607	protected function content_template() {
691	608	?>
692		- <div class="elementor-accordion">
	609	+ <div class="elementor-accordion" role="tablist">
693	610	<#
694	611	if ( settings.tabs ) {
695	612	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
696	613	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -706,9 +623,9 @@
706	623	'id': 'elementor-tab-title-' + tabindex + tabCount,
707	624	'class': [ 'elementor-tab-title' ],
708	625	'tabindex': tabindex + tabCount,
709	626	'data-tab': tabCount,
710		- 'role': 'button',
	627	+ 'role': 'tab',
711	628	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
712	629	'aria-expanded': 'false',
713	630	} );
714	631
		@@ -715,9 +632,9 @@
715	632	view.addRenderAttribute( tabContentKey, {
716	633	'id': 'elementor-tab-content-' + tabindex + tabCount,
717	634	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
718	635	'data-tab': tabCount,
719		- 'role': 'region',
	636	+ 'role': 'tabpanel',
720	637	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
721	638	} );
722	639
723	640	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -736,9 +653,9 @@
736	653	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
737	654	<# } #>
738	655	</span>
739	656	<# } #>
740		- <a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
	657	+ <a class="elementor-accordion-title" href="">{{{ item.tab_title }}}</a>
741	658	</{{{ titleHTMLTag }}}>
742	659	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
743	660	</div>
744	661	<#