← All changes | includes/widgets/toggle.php +29 -99 4.3.0-beta2 → 3.4.8 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( 'container' );
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,16 +247,13 @@
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' ],
287	251	'range' => [
288	252	'px' => [
289		- 'max' => 20,
	253	+ 'min' => 0,
	254	+ 'max' => 10,
290	255	],
291		- 'em' => [
292		- 'max' => 2,
293		- ],
294	256	],
295	257	'selectors' => [
296	258	'{{WRAPPER}} .elementor-tab-title' => 'border-width: {{SIZE}}{{UNIT}};',
297	259	'{{WRAPPER}} .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
		@@ -304,9 +266,9 @@
304	266	[
305	267	'label' => esc_html__( 'Border Color', 'elementor' ),
306	268	'type' => Controls_Manager::COLOR,
307	269	'selectors' => [
308		- '{{WRAPPER}} .elementor-tab-content' => 'border-block-end-color: {{VALUE}};',
	270	+ '{{WRAPPER}} .elementor-tab-content' => 'border-bottom-color: {{VALUE}};',
309	271	'{{WRAPPER}} .elementor-tab-title' => 'border-color: {{VALUE}};',
310	272	],
311	273	]
312	274	);
		@@ -315,22 +277,16 @@
315	277	'space_between',
316	278	[
317	279	'label' => esc_html__( 'Space Between', 'elementor' ),
318	280	'type' => Controls_Manager::SLIDER,
319		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
320	281	'range' => [
321	282	'px' => [
	283	+ 'min' => 0,
322	284	'max' => 100,
323	285	],
324		- 'em' => [
325		- 'max' => 10,
326		- ],
327		- 'rem' => [
328		- 'max' => 10,
329		- ],
330	286	],
331	287	'selectors' => [
332		- '{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-block-end: {{SIZE}}{{UNIT}}',
	288	+ '{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}',
333	289	],
334	290	]
335	291	);
336	292
		@@ -416,9 +372,9 @@
416	372	'title_padding',
417	373	[
418	374	'label' => esc_html__( 'Padding', 'elementor' ),
419	375	'type' => Controls_Manager::DIMENSIONS,
420		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	376	+ 'size_units' => [ 'px', 'em', '%' ],
421	377	'selectors' => [
422	378	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
423	379	],
424	380	]
		@@ -485,22 +441,17 @@
485	441	'icon_space',
486	442	[
487	443	'label' => esc_html__( 'Spacing', 'elementor' ),
488	444	'type' => Controls_Manager::SLIDER,
489		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
490	445	'range' => [
491	446	'px' => [
	447	+ 'min' => 0,
492	448	'max' => 100,
493	449	],
494		- 'em' => [
495		- 'max' => 10,
496		- ],
497		- 'rem' => [
498		- 'max' => 10,
499		- ],
500	450	],
501	451	'selectors' => [
502		- '{{WRAPPER}} .elementor-toggle-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	452	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	453	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
503	454	],
504	455	]
505	456	);
506	457
		@@ -562,9 +513,9 @@
562	513	'content_padding',
563	514	[
564	515	'label' => esc_html__( 'Padding', 'elementor' ),
565	516	'type' => Controls_Manager::DIMENSIONS,
566		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	517	+ 'size_units' => [ 'px', 'em', '%' ],
567	518	'selectors' => [
568	519	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
569	520	],
570	521	]
		@@ -599,9 +550,9 @@
599	550	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
600	551	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
601	552
602	553	?>
603		- <div class="elementor-toggle">
	554	+ <div class="elementor-toggle" role="tablist">
604	555	<?php
605	556	foreach ( $settings['tabs'] as $index => $item ) :
606	557	$tab_count = $index + 1;
607	558
		@@ -612,9 +563,9 @@
612	563	$this->add_render_attribute( $tab_title_setting_key, [
613	564	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
614	565	'class' => [ 'elementor-tab-title' ],
615	566	'data-tab' => $tab_count,
616		- 'role' => 'button',
	567	+ 'role' => 'tab',
617	568	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
618	569	'aria-expanded' => 'false',
619	570	] );
620	571
		@@ -621,9 +572,9 @@
621	572	$this->add_render_attribute( $tab_content_setting_key, [
622	573	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
623	574	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
624	575	'data-tab' => $tab_count,
625		- 'role' => 'region',
	576	+ 'role' => 'tabpanel',
626	577	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
627	578	] );
628	579
629	580	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -641,9 +592,9 @@
641	592	<i class="elementor-toggle-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
642	593	<?php } ?>
643	594	</span>
644	595	<?php endif; ?>
645		- <a class="elementor-toggle-title" tabindex="0"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
	596	+ <a href="" class="elementor-toggle-title"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
646	597	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
647	598
648	599	<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	600	</div>
		@@ -682,9 +633,9 @@
682	633	* @access protected
683	634	*/
684	635	protected function content_template() {
685	636	?>
686		- <div class="elementor-toggle">
	637	+ <div class="elementor-toggle" role="tablist">
687	638	<#
688	639	if ( settings.tabs ) {
689	640	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
690	641	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -700,9 +651,9 @@
700	651	view.addRenderAttribute( tabTitleKey, {
701	652	'id': 'elementor-tab-title-' + tabindex + tabCount,
702	653	'class': [ 'elementor-tab-title' ],
703	654	'data-tab': tabCount,
704		- 'role': 'button',
	655	+ 'role': 'tab',
705	656	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
706	657	'aria-expanded': 'false',
707	658	} );
708	659
		@@ -709,9 +660,9 @@
709	660	view.addRenderAttribute( tabContentKey, {
710	661	'id': 'elementor-tab-content-' + tabindex + tabCount,
711	662	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
712	663	'data-tab': tabCount,
713		- 'role': 'region',
	664	+ 'role': 'tabpanel',
714	665	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
715	666	} );
716	667
717	668	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -728,9 +679,9 @@
728	679	<i class="elementor-toggle-icon-opened {{ settings.icon_active }}"></i>
729	680	<# } #>
730	681	</span>
731	682	<# } #>
732		- <a class="elementor-toggle-title" tabindex="0">{{{ item.tab_title }}}</a>
	683	+ <a href="" class="elementor-toggle-title">{{{ item.tab_title }}}</a>
733	684	</{{{ titleHTMLTag }}}>
734	685	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
735	686	</div>
736	687	<#
		@@ -737,27 +688,6 @@
737	688	} );
738	689	} #>
739	690	</div>
740	691	<?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	692	}
763	693	}