← All changes | includes/widgets/toggle.php +29 -79 4.0.9 → 3.4.0-dev9 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,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
		@@ -370,9 +326,8 @@
370	326	'label' => esc_html__( 'Color', 'elementor' ),
371	327	'type' => Controls_Manager::COLOR,
372	328	'selectors' => [
373	329	'{{WRAPPER}} .elementor-toggle-title, {{WRAPPER}} .elementor-toggle-icon' => 'color: {{VALUE}};',
374		- '{{WRAPPER}} .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
375	330	],
376	331	'global' => [
377	332	'default' => Global_Colors::COLOR_PRIMARY,
378	333	],
		@@ -416,9 +371,9 @@
416	371	'title_padding',
417	372	[
418	373	'label' => esc_html__( 'Padding', 'elementor' ),
419	374	'type' => Controls_Manager::DIMENSIONS,
420		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	375	+ 'size_units' => [ 'px', 'em', '%' ],
421	376	'selectors' => [
422	377	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
423	378	],
424	379	]
		@@ -485,22 +440,17 @@
485	440	'icon_space',
486	441	[
487	442	'label' => esc_html__( 'Spacing', 'elementor' ),
488	443	'type' => Controls_Manager::SLIDER,
489		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
490	444	'range' => [
491	445	'px' => [
	446	+ 'min' => 0,
492	447	'max' => 100,
493	448	],
494		- 'em' => [
495		- 'max' => 10,
496		- ],
497		- 'rem' => [
498		- 'max' => 10,
499		- ],
500	449	],
501	450	'selectors' => [
502		- '{{WRAPPER}} .elementor-toggle-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	451	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	452	+ '{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
503	453	],
504	454	]
505	455	);
506	456
		@@ -562,9 +512,9 @@
562	512	'content_padding',
563	513	[
564	514	'label' => esc_html__( 'Padding', 'elementor' ),
565	515	'type' => Controls_Manager::DIMENSIONS,
566		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	516	+ 'size_units' => [ 'px', 'em', '%' ],
567	517	'selectors' => [
568	518	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
569	519	],
570	520	]
		@@ -599,9 +549,9 @@
599	549	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
600	550	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
601	551
602	552	?>
603		- <div class="elementor-toggle">
	553	+ <div class="elementor-toggle" role="tablist">
604	554	<?php
605	555	foreach ( $settings['tabs'] as $index => $item ) :
606	556	$tab_count = $index + 1;
607	557
		@@ -612,9 +562,9 @@
612	562	$this->add_render_attribute( $tab_title_setting_key, [
613	563	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
614	564	'class' => [ 'elementor-tab-title' ],
615	565	'data-tab' => $tab_count,
616		- 'role' => 'button',
	566	+ 'role' => 'tab',
617	567	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
618	568	'aria-expanded' => 'false',
619	569	] );
620	570
		@@ -621,9 +571,9 @@
621	571	$this->add_render_attribute( $tab_content_setting_key, [
622	572	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
623	573	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
624	574	'data-tab' => $tab_count,
625		- 'role' => 'region',
	575	+ 'role' => 'tabpanel',
626	576	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
627	577	] );
628	578
629	579	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -641,9 +591,9 @@
641	591	<i class="elementor-toggle-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
642	592	<?php } ?>
643	593	</span>
644	594	<?php endif; ?>
645		- <a class="elementor-toggle-title" tabindex="0"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
	595	+ <a href="" class="elementor-toggle-title"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
646	596	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
647	597
648	598	<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	599	</div>
		@@ -682,9 +632,9 @@
682	632	* @access protected
683	633	*/
684	634	protected function content_template() {
685	635	?>
686		- <div class="elementor-toggle">
	636	+ <div class="elementor-toggle" role="tablist">
687	637	<#
688	638	if ( settings.tabs ) {
689	639	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
690	640	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -700,9 +650,9 @@
700	650	view.addRenderAttribute( tabTitleKey, {
701	651	'id': 'elementor-tab-title-' + tabindex + tabCount,
702	652	'class': [ 'elementor-tab-title' ],
703	653	'data-tab': tabCount,
704		- 'role': 'button',
	654	+ 'role': 'tab',
705	655	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
706	656	'aria-expanded': 'false',
707	657	} );
708	658
		@@ -709,9 +659,9 @@
709	659	view.addRenderAttribute( tabContentKey, {
710	660	'id': 'elementor-tab-content-' + tabindex + tabCount,
711	661	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
712	662	'data-tab': tabCount,
713		- 'role': 'region',
	663	+ 'role': 'tabpanel',
714	664	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
715	665	} );
716	666
717	667	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -728,9 +678,9 @@
728	678	<i class="elementor-toggle-icon-opened {{ settings.icon_active }}"></i>
729	679	<# } #>
730	680	</span>
731	681	<# } #>
732		- <a class="elementor-toggle-title" tabindex="0">{{{ item.tab_title }}}</a>
	682	+ <a href="" class="elementor-toggle-title">{{{ item.tab_title }}}</a>
733	683	</{{{ titleHTMLTag }}}>
734	684	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
735	685	</div>
736	686	<#