← All changes | includes/widgets/toggle.php +28 -95 4.2.0-dev2 → 3.9.2 View file →

		@@ -73,43 +73,9 @@
73	73	public function get_keywords() {
74	74	return [ 'tabs', 'accordion', 'toggle' ];
75	75	}
76	76
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	77	/**
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-toggle' ];
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	78	* Register toggle widget controls.
113	79	*
114	80	* Adds different input fields to allow the user to change and customize the widget settings.
115	81	*
		@@ -128,9 +94,9 @@
128	94
129	95	$repeater->add_control(
130	96	'tab_title',
131	97	[
132		- 'label' => esc_html__( 'Title', 'elementor' ),
	98	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
133	99	'type' => Controls_Manager::TEXT,
134	100	'default' => esc_html__( 'Toggle Title', 'elementor' ),
135	101	'label_block' => true,
136	102	'dynamic' => [
		@@ -144,8 +110,9 @@
144	110	[
145	111	'label' => esc_html__( 'Content', 'elementor' ),
146	112	'type' => Controls_Manager::WYSIWYG,
147	113	'default' => esc_html__( 'Toggle Content', 'elementor' ),
	114	+ 'show_label' => false,
148	115	'dynamic' => [
149	116	'active' => true,
150	117	],
151	118	]
		@@ -150,19 +117,8 @@
150	117	],
151	118	]
152	119	);
153	120
154		- if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
155		- $this->add_deprecation_message(
156		- '3.15.0',
157		- esc_html__(
158		- 'You are currently editing a Toggle widget in its old version. Drag a new Accordion widget onto your page to use a newer version, providing nested capabilities.',
159		- 'elementor'
160		- ),
161		- 'nested-accordion'
162		- );
163		- }
164		-
165	121	$this->add_control(
166	122	'tabs',
167	123	[
168	124	'label' => esc_html__( 'Toggle Items', 'elementor' ),
		@@ -182,8 +138,17 @@
182	138	]
183	139	);
184	140
185	141	$this->add_control(
	142	+ 'view',
	143	+ [
	144	+ 'label' => esc_html__( 'View', 'elementor' ),
	145	+ 'type' => Controls_Manager::HIDDEN,
	146	+ 'default' => 'traditional',
	147	+ ]
	148	+ );
	149	+
	150	+ $this->add_control(
186	151	'selected_icon',
187	152	[
188	153	'label' => esc_html__( 'Icon', 'elementor' ),
189	154	'type' => Controls_Manager::ICONS,
		@@ -282,9 +247,9 @@
282	247	'border_width',
283	248	[
284	249	'label' => esc_html__( 'Border Width', 'elementor' ),
285	250	'type' => Controls_Manager::SLIDER,
286		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	251	+ 'size_units' => [ 'px', '%', 'em' ],
287	252	'range' => [
288	253	'px' => [
289	254	'max' => 20,
290	255	],
		@@ -304,9 +269,9 @@
304	269	[
305	270	'label' => esc_html__( 'Border Color', 'elementor' ),
306	271	'type' => Controls_Manager::COLOR,
307	272	'selectors' => [
308		- '{{WRAPPER}} .elementor-tab-content' => 'border-block-end-color: {{VALUE}};',
	273	+ '{{WRAPPER}} .elementor-tab-content' => 'border-bottom-color: {{VALUE}};',
309	274	'{{WRAPPER}} .elementor-tab-title' => 'border-color: {{VALUE}};',
310	275	],
311	276	]
312	277	);
		@@ -315,22 +280,16 @@
315	280	'space_between',
316	281	[
317	282	'label' => esc_html__( 'Space Between', 'elementor' ),
318	283	'type' => Controls_Manager::SLIDER,
319		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
320	284	'range' => [
321	285	'px' => [
	286	+ 'min' => 0,
322	287	'max' => 100,
323	288	],
324		- 'em' => [
325		- 'max' => 10,
326		- ],
327		- 'rem' => [
328		- 'max' => 10,
329		- ],
330	289	],
331	290	'selectors' => [
332		- '{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-block-end: {{SIZE}}{{UNIT}}',
	291	+ '{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}',
333	292	],
334	293	]
335	294	);
336	295
		@@ -416,9 +375,9 @@
416	375	'title_padding',
417	376	[
418	377	'label' => esc_html__( 'Padding', 'elementor' ),
419	378	'type' => Controls_Manager::DIMENSIONS,
420		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	379	+ 'size_units' => [ 'px', 'em', '%' ],
421	380	'selectors' => [
422	381	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
423	382	],
424	383	]
		@@ -485,22 +444,17 @@
485	444	'icon_space',
486	445	[
487	446	'label' => esc_html__( 'Spacing', 'elementor' ),
488	447	'type' => Controls_Manager::SLIDER,
489		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
490	448	'range' => [
491	449	'px' => [
	450	+ 'min' => 0,
492	451	'max' => 100,
493	452	],
494		- 'em' => [
495		- 'max' => 10,
496		- ],
497		- 'rem' => [
498		- 'max' => 10,
499		- ],
500	453	],
501	454	'selectors' => [
502		- '{{WRAPPER}} .elementor-toggle-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	455	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	456	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
503	457	],
504	458	]
505	459	);
506	460
		@@ -562,9 +516,9 @@
562	516	'content_padding',
563	517	[
564	518	'label' => esc_html__( 'Padding', 'elementor' ),
565	519	'type' => Controls_Manager::DIMENSIONS,
566		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	520	+ 'size_units' => [ 'px', 'em', '%' ],
567	521	'selectors' => [
568	522	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
569	523	],
570	524	]
		@@ -599,9 +553,9 @@
599	553	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
600	554	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
601	555
602	556	?>
603		- <div class="elementor-toggle">
	557	+ <div class="elementor-toggle" role="tablist">
604	558	<?php
605	559	foreach ( $settings['tabs'] as $index => $item ) :
606	560	$tab_count = $index + 1;
607	561
		@@ -612,9 +566,9 @@
612	566	$this->add_render_attribute( $tab_title_setting_key, [
613	567	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
614	568	'class' => [ 'elementor-tab-title' ],
615	569	'data-tab' => $tab_count,
616		- 'role' => 'button',
	570	+ 'role' => 'tab',
617	571	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
618	572	'aria-expanded' => 'false',
619	573	] );
620	574
		@@ -621,9 +575,9 @@
621	575	$this->add_render_attribute( $tab_content_setting_key, [
622	576	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
623	577	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
624	578	'data-tab' => $tab_count,
625		- 'role' => 'region',
	579	+ 'role' => 'tabpanel',
626	580	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
627	581	] );
628	582
629	583	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -641,9 +595,9 @@
641	595	<i class="elementor-toggle-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
642	596	<?php } ?>
643	597	</span>
644	598	<?php endif; ?>
645		- <a class="elementor-toggle-title" tabindex="0"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
	599	+ <a href="" class="elementor-toggle-title"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
646	600	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
647	601
648	602	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php Utils::print_unescaped_internal_string( $this->parse_text_editor( $item['tab_content'] ) ); ?></div>
649	603	</div>
		@@ -682,9 +636,9 @@
682	636	* @access protected
683	637	*/
684	638	protected function content_template() {
685	639	?>
686		- <div class="elementor-toggle">
	640	+ <div class="elementor-toggle" role="tablist">
687	641	<#
688	642	if ( settings.tabs ) {
689	643	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
690	644	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -700,9 +654,9 @@
700	654	view.addRenderAttribute( tabTitleKey, {
701	655	'id': 'elementor-tab-title-' + tabindex + tabCount,
702	656	'class': [ 'elementor-tab-title' ],
703	657	'data-tab': tabCount,
704		- 'role': 'button',
	658	+ 'role': 'tab',
705	659	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
706	660	'aria-expanded': 'false',
707	661	} );
708	662
		@@ -709,9 +663,9 @@
709	663	view.addRenderAttribute( tabContentKey, {
710	664	'id': 'elementor-tab-content-' + tabindex + tabCount,
711	665	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
712	666	'data-tab': tabCount,
713		- 'role': 'region',
	667	+ 'role': 'tabpanel',
714	668	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
715	669	} );
716	670
717	671	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -728,9 +682,9 @@
728	682	<i class="elementor-toggle-icon-opened {{ settings.icon_active }}"></i>
729	683	<# } #>
730	684	</span>
731	685	<# } #>
732		- <a class="elementor-toggle-title" tabindex="0">{{{ item.tab_title }}}</a>
	686	+ <a href="" class="elementor-toggle-title">{{{ item.tab_title }}}</a>
733	687	</{{{ titleHTMLTag }}}>
734	688	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
735	689	</div>
736	690	<#
		@@ -737,27 +691,6 @@
737	691	} );
738	692	} #>
739	693	</div>
740	694	<?php
741		- }
742		-
743		- public function render_markdown(): string {
744		- $settings = $this->get_settings_for_display();
745		- if ( empty( $settings['tabs'] ) ) {
746		- return '';
747		- }
748		- $sections = [];
749		- foreach ( $settings['tabs'] as $item ) {
750		- $title = Utils::html_to_plain_text( $item['tab_title'] ?? '' );
751		- $content = \Elementor\Modules\MarkdownRender\Html_To_Markdown::convert( $item['tab_content'] ?? '' );
752		- if ( empty( $title ) && empty( $content ) ) {
753		- continue;
754		- }
755		- $section = '### ' . $title;
756		- if ( ! empty( $content ) ) {
757		- $section .= "\n\n" . $content;
758		- }
759		- $sections[] = $section;
760		- }
761		- return implode( "\n\n", $sections );
762	695	}
763	696	}