← All changes | includes/widgets/icon.php +55 -115 4.0.7 → 3.0.2 View file →

		@@ -40,9 +40,9 @@
40	40	*
41	41	* @return string Widget title.
42	42	*/
43	43	public function get_title() {
44		- return esc_html__( 'Icon', 'elementor' );
	44	+ return __( 'Icon', 'elementor' );
45	45	}
46	46
47	47	/**
48	48	* Get widget icon.
		@@ -73,12 +73,8 @@
73	73	public function get_categories() {
74	74	return [ 'basic' ];
75	75	}
76	76
77		- public function has_widget_inner_wrapper(): bool {
78		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
79		- }
80		-
81	77	/**
82	78	* Get widget keywords.
83	79	*
84	80	* Retrieve the list of keywords the widget belongs to.
		@@ -91,25 +87,21 @@
91	87	public function get_keywords() {
92	88	return [ 'icon' ];
93	89	}
94	90
95		- protected function is_dynamic_content(): bool {
96		- return false;
97		- }
98		-
99	91	/**
100	92	* Register icon widget controls.
101	93	*
102	94	* Adds different input fields to allow the user to change and customize the widget settings.
103	95	*
104		- * @since 3.1.0
	96	+ * @since 1.0.0
105	97	* @access protected
106	98	*/
107		- protected function register_controls() {
	99	+ protected function _register_controls() {
108	100	$this->start_controls_section(
109	101	'section_icon',
110	102	[
111		- 'label' => esc_html__( 'Icon', 'elementor' ),
	103	+ 'label' => __( 'Icon', 'elementor' ),
112	104	]
113	105	);
114	106
115	107	$this->add_control(
		@@ -114,9 +106,9 @@
114	106
115	107	$this->add_control(
116	108	'selected_icon',
117	109	[
118		- 'label' => esc_html__( 'Icon', 'elementor' ),
	110	+ 'label' => __( 'Icon', 'elementor' ),
119	111	'type' => Controls_Manager::ICONS,
120	112	'fa4compatibility' => 'icon',
121	113	'default' => [
122	114	'value' => 'fas fa-star',
		@@ -127,14 +119,14 @@
127	119
128	120	$this->add_control(
129	121	'view',
130	122	[
131		- 'label' => esc_html__( 'View', 'elementor' ),
	123	+ 'label' => __( 'View', 'elementor' ),
132	124	'type' => Controls_Manager::SELECT,
133	125	'options' => [
134		- 'default' => esc_html__( 'Default', 'elementor' ),
135		- 'stacked' => esc_html__( 'Stacked', 'elementor' ),
136		- 'framed' => esc_html__( 'Framed', 'elementor' ),
	126	+ 'default' => __( 'Default', 'elementor' ),
	127	+ 'stacked' => __( 'Stacked', 'elementor' ),
	128	+ 'framed' => __( 'Framed', 'elementor' ),
137	129	],
138	130	'default' => 'default',
139	131	'prefix_class' => 'elementor-view-',
140	132	]
		@@ -142,14 +134,13 @@
142	134
143	135	$this->add_control(
144	136	'shape',
145	137	[
146		- 'label' => esc_html__( 'Shape', 'elementor' ),
	138	+ 'label' => __( 'Shape', 'elementor' ),
147	139	'type' => Controls_Manager::SELECT,
148	140	'options' => [
149		- 'square' => esc_html__( 'Square', 'elementor' ),
150		- 'rounded' => esc_html__( 'Rounded', 'elementor' ),
151		- 'circle' => esc_html__( 'Circle', 'elementor' ),
	141	+ 'circle' => __( 'Circle', 'elementor' ),
	142	+ 'square' => __( 'Square', 'elementor' ),
152	143	],
153	144	'default' => 'circle',
154	145	'condition' => [
155	146	'view!' => 'default',
		@@ -160,50 +151,36 @@
160	151
161	152	$this->add_control(
162	153	'link',
163	154	[
164		- 'label' => esc_html__( 'Link', 'elementor' ),
	155	+ 'label' => __( 'Link', 'elementor' ),
165	156	'type' => Controls_Manager::URL,
166	157	'dynamic' => [
167	158	'active' => true,
168	159	],
	160	+ 'placeholder' => __( 'https://your-link.com', 'elementor' ),
169	161	]
170	162	);
171	163
172		- $this->end_controls_section();
173		-
174		- $this->start_controls_section(
175		- 'section_style_icon',
176		- [
177		- 'label' => esc_html__( 'Icon', 'elementor' ),
178		- 'tab' => Controls_Manager::TAB_STYLE,
179		- ]
180		- );
181		-
182	164	$this->add_responsive_control(
183	165	'align',
184	166	[
185		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	167	+ 'label' => __( 'Alignment', 'elementor' ),
186	168	'type' => Controls_Manager::CHOOSE,
187	169	'options' => [
188		- 'start' => [
189		- 'title' => esc_html__( 'Start', 'elementor' ),
	170	+ 'left' => [
	171	+ 'title' => __( 'Left', 'elementor' ),
190	172	'icon' => 'eicon-text-align-left',
191	173	],
192	174	'center' => [
193		- 'title' => esc_html__( 'Center', 'elementor' ),
	175	+ 'title' => __( 'Center', 'elementor' ),
194	176	'icon' => 'eicon-text-align-center',
195	177	],
196		- 'end' => [
197		- 'title' => esc_html__( 'End', 'elementor' ),
	178	+ 'right' => [
	179	+ 'title' => __( 'Right', 'elementor' ),
198	180	'icon' => 'eicon-text-align-right',
199	181	],
200	182	],
201		- 'classes' => 'elementor-control-start-end',
202		- 'selectors_dictionary' => [
203		- 'left' => is_rtl() ? 'end' : 'start',
204		- 'right' => is_rtl() ? 'start' : 'end',
205		- ],
206	183	'default' => 'center',
207	184	'selectors' => [
208	185	'{{WRAPPER}} .elementor-icon-wrapper' => 'text-align: {{VALUE}};',
209	186	],
		@@ -209,14 +186,24 @@
209	186	],
210	187	]
211	188	);
212	189
	190	+ $this->end_controls_section();
	191	+
	192	+ $this->start_controls_section(
	193	+ 'section_style_icon',
	194	+ [
	195	+ 'label' => __( 'Icon', 'elementor' ),
	196	+ 'tab' => Controls_Manager::TAB_STYLE,
	197	+ ]
	198	+ );
	199	+
213	200	$this->start_controls_tabs( 'icon_colors' );
214	201
215	202	$this->start_controls_tab(
216	203	'icon_colors_normal',
217	204	[
218		- 'label' => esc_html__( 'Normal', 'elementor' ),
	205	+ 'label' => __( 'Normal', 'elementor' ),
219	206	]
220	207	);
221	208
222	209	$this->add_control(
		@@ -221,9 +208,9 @@
221	208
222	209	$this->add_control(
223	210	'primary_color',
224	211	[
225		- 'label' => esc_html__( 'Primary Color', 'elementor' ),
	212	+ 'label' => __( 'Primary Color', 'elementor' ),
226	213	'type' => Controls_Manager::COLOR,
227	214	'default' => '',
228	215	'selectors' => [
229	216	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
		@@ -238,9 +225,9 @@
238	225
239	226	$this->add_control(
240	227	'secondary_color',
241	228	[
242		- 'label' => esc_html__( 'Secondary Color', 'elementor' ),
	229	+ 'label' => __( 'Secondary Color', 'elementor' ),
243	230	'type' => Controls_Manager::COLOR,
244	231	'default' => '',
245	232	'condition' => [
246	233	'view!' => 'default',
		@@ -257,9 +244,9 @@
257	244
258	245	$this->start_controls_tab(
259	246	'icon_colors_hover',
260	247	[
261		- 'label' => esc_html__( 'Hover', 'elementor' ),
	248	+ 'label' => __( 'Hover', 'elementor' ),
262	249	]
263	250	);
264	251
265	252	$this->add_control(
		@@ -264,9 +251,9 @@
264	251
265	252	$this->add_control(
266	253	'hover_primary_color',
267	254	[
268		- 'label' => esc_html__( 'Primary Color', 'elementor' ),
	255	+ 'label' => __( 'Primary Color', 'elementor' ),
269	256	'type' => Controls_Manager::COLOR,
270	257	'default' => '',
271	258	'selectors' => [
272	259	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
		@@ -278,9 +265,9 @@
278	265
279	266	$this->add_control(
280	267	'hover_secondary_color',
281	268	[
282		- 'label' => esc_html__( 'Secondary Color', 'elementor' ),
	269	+ 'label' => __( 'Secondary Color', 'elementor' ),
283	270	'type' => Controls_Manager::COLOR,
284	271	'default' => '',
285	272	'condition' => [
286	273	'view!' => 'default',
		@@ -295,9 +282,9 @@
295	282
296	283	$this->add_control(
297	284	'hover_animation',
298	285	[
299		- 'label' => esc_html__( 'Hover Animation', 'elementor' ),
	286	+ 'label' => __( 'Hover Animation', 'elementor' ),
300	287	'type' => Controls_Manager::HOVER_ANIMATION,
301	288	]
302	289	);
303	290
		@@ -307,11 +294,10 @@
307	294
308	295	$this->add_responsive_control(
309	296	'size',
310	297	[
311		- 'label' => esc_html__( 'Size', 'elementor' ),
	298	+ 'label' => __( 'Size', 'elementor' ),
312	299	'type' => Controls_Manager::SLIDER,
313		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
314	300	'range' => [
315	301	'px' => [
316	302	'min' => 6,
317	303	'max' => 300,
		@@ -318,9 +304,8 @@
318	304	],
319	305	],
320	306	'selectors' => [
321	307	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
322		- '{{WRAPPER}} .elementor-icon svg' => 'height: {{SIZE}}{{UNIT}};',
323	308	],
324	309	'separator' => 'before',
325	310	]
326	311	);
		@@ -325,45 +310,20 @@
325	310	]
326	311	);
327	312
328	313	$this->add_control(
329		- 'fit_to_size',
330		- [
331		- 'label' => esc_html__( 'Fit to Size', 'elementor' ),
332		- 'type' => Controls_Manager::SWITCHER,
333		- 'description' => 'Avoid gaps around icons when width and height aren\'t equal',
334		- 'label_off' => esc_html__( 'Off', 'elementor' ),
335		- 'label_on' => esc_html__( 'On', 'elementor' ),
336		- 'condition' => [
337		- 'selected_icon[library]' => 'svg',
338		- ],
339		- 'selectors' => [
340		- '{{WRAPPER}} .elementor-icon-wrapper svg' => 'width: auto;',
341		- ],
342		- ]
343		- );
344		-
345		- $this->add_control(
346	314	'icon_padding',
347	315	[
348		- 'label' => esc_html__( 'Padding', 'elementor' ),
	316	+ 'label' => __( 'Padding', 'elementor' ),
349	317	'type' => Controls_Manager::SLIDER,
350		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
351	318	'selectors' => [
352	319	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
353	320	],
354	321	'range' => [
355		- 'px' => [
356		- 'max' => 50,
357		- ],
358	322	'em' => [
359	323	'min' => 0,
360	324	'max' => 5,
361	325	],
362		- 'rem' => [
363		- 'min' => 0,
364		- 'max' => 5,
365		- ],
366	326	],
367	327	'condition' => [
368	328	'view!' => 'default',
369	329	],
		@@ -372,12 +332,13 @@
372	332
373	333	$this->add_responsive_control(
374	334	'rotate',
375	335	[
376		- 'label' => esc_html__( 'Rotate', 'elementor' ),
	336	+ 'label' => __( 'Rotate', 'elementor' ),
377	337	'type' => Controls_Manager::SLIDER,
378		- 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
	338	+ 'size_units' => [ 'deg' ],
379	339	'default' => [
	340	+ 'size' => 0,
380	341	'unit' => 'deg',
381	342	],
382	343	'tablet_default' => [
383	344	'unit' => 'deg',
		@@ -393,11 +354,10 @@
393	354
394	355	$this->add_control(
395	356	'border_width',
396	357	[
397		- 'label' => esc_html__( 'Border Width', 'elementor' ),
	358	+ 'label' => __( 'Border Width', 'elementor' ),
398	359	'type' => Controls_Manager::DIMENSIONS,
399		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
400	360	'selectors' => [
401	361	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
402	362	],
403	363	'condition' => [
		@@ -405,14 +365,14 @@
405	365	],
406	366	]
407	367	);
408	368
409		- $this->add_responsive_control(
	369	+ $this->add_control(
410	370	'border_radius',
411	371	[
412		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	372	+ 'label' => __( 'Border Radius', 'elementor' ),
413	373	'type' => Controls_Manager::DIMENSIONS,
414		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	374	+ 'size_units' => [ 'px', '%' ],
415	375	'selectors' => [
416	376	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
417	377	],
418	378	'condition' => [
		@@ -434,12 +394,8 @@
434	394	*/
435	395	protected function render() {
436	396	$settings = $this->get_settings_for_display();
437	397
438		- if ( empty( $settings['selected_icon']['value'] ) ) {
439		- return;
440		- }
441		-
442	398	$this->add_render_attribute( 'wrapper', 'class', 'elementor-icon-wrapper' );
443	399
444	400	$this->add_render_attribute( 'icon-wrapper', 'class', 'elementor-icon' );
445	401
		@@ -468,16 +424,16 @@
468	424	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
469	425	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
470	426
471	427	?>
472		- <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
473		- <<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon-wrapper' ); ?>>
	428	+ <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
	429	+ <<?php echo $icon_tag . ' ' . $this->get_render_attribute_string( 'icon-wrapper' ); ?>>
474	430	<?php if ( $is_new || $migrated ) :
475	431	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
476	432	else : ?>
477		- <i <?php $this->print_render_attribute_string( 'icon' ); ?>></i>
	433	+ <i <?php echo $this->get_render_attribute_string( 'icon' ); ?>></i>
478	434	<?php endif; ?>
479		- </<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
	435	+ </<?php echo $icon_tag; ?>>
480	436	</div>
481	437	<?php
482	438	}
483	439
		@@ -490,31 +446,15 @@
490	446	* @access protected
491	447	*/
492	448	protected function content_template() {
493	449	?>
494		- <#
495		- if ( '' === settings.selected_icon.value ) {
496		- return;
497		- }
498		-
499		- let iconTag = 'div';
500		-
501		- if ( settings.link?.url ) {
502		- view.addRenderAttribute( 'link_url', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
503		- iconTag = 'a';
504		- }
505		-
506		- const iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
507		- migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
508		-
509		- view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
510		-
511		- if ( '' !== settings.hover_animation ) {
512		- view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
513		- }
	450	+ <# var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
	451	+ iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
	452	+ migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
	453	+ iconTag = link ? 'a' : 'div';
514	454	#>
515	455	<div class="elementor-icon-wrapper">
516		- <{{{ iconTag }}} {{{ view.getRenderAttributeString( 'icon' ) }}} {{{ view.getRenderAttributeString( 'link_url' ) }}}>
	456	+ <{{{ iconTag }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}" {{{ link }}}>
517	457	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
518	458	{{{ iconHTML.value }}}
519	459	<# } else { #>
520	460	<i class="{{ settings.icon }}" aria-hidden="true"></i>