← All changes | includes/widgets/social-icons.php +68 -164 4.1.0-beta2 → 3.1.3 View file →

		@@ -38,9 +38,9 @@
38	38	*
39	39	* @return string Widget title.
40	40	*/
41	41	public function get_title() {
42		- return esc_html__( 'Social Icons', 'elementor' );
	42	+ return __( 'Social Icons', 'elementor' );
43	43	}
44	44
45	45	/**
46	46	* Get widget icon.
		@@ -69,31 +69,9 @@
69	69	public function get_keywords() {
70	70	return [ 'social', 'icon', 'link' ];
71	71	}
72	72
73		- protected function is_dynamic_content(): bool {
74		- return false;
75		- }
76		-
77	73	/**
78		- * Get style dependencies.
79		- *
80		- * Retrieve the list of style dependencies the widget requires.
81		- *
82		- * @since 3.24.0
83		- * @access public
84		- *
85		- * @return array Widget style dependencies.
86		- */
87		- public function get_style_depends(): array {
88		- return [ 'widget-social-icons', 'e-apple-webkit' ];
89		- }
90		-
91		- public function has_widget_inner_wrapper(): bool {
92		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
93		- }
94		-
95		- /**
96	74	* Register social icons widget controls.
97	75	*
98	76	* Adds different input fields to allow the user to change and customize the widget settings.
99	77	*
		@@ -103,9 +81,9 @@
103	81	protected function register_controls() {
104	82	$this->start_controls_section(
105	83	'section_social_icon',
106	84	[
107		- 'label' => esc_html__( 'Social Icons', 'elementor' ),
	85	+ 'label' => __( 'Social Icons', 'elementor' ),
108	86	]
109	87	);
110	88
111	89	$repeater = new Repeater();
		@@ -112,9 +90,9 @@
112	90
113	91	$repeater->add_control(
114	92	'social_icon',
115	93	[
116		- 'label' => esc_html__( 'Icon', 'elementor' ),
	94	+ 'label' => __( 'Icon', 'elementor' ),
117	95	'type' => Controls_Manager::ICONS,
118	96	'fa4compatibility' => 'social',
119	97	'default' => [
120	98	'value' => 'fab fa-wordpress',
		@@ -160,9 +138,8 @@
160	138	'stack-overflow',
161	139	'steam',
162	140	'telegram',
163	141	'thumb-tack',
164		- 'threads',
165	142	'tripadvisor',
166	143	'tumblr',
167	144	'twitch',
168	145	'twitter',
		@@ -173,9 +150,8 @@
173	150	'weixin',
174	151	'whatsapp',
175	152	'wordpress',
176	153	'xing',
177		- 'x-twitter',
178	154	'yelp',
179	155	'youtube',
180	156	'500px',
181	157	],
		@@ -190,9 +166,9 @@
190	166
191	167	$repeater->add_control(
192	168	'link',
193	169	[
194		- 'label' => esc_html__( 'Link', 'elementor' ),
	170	+ 'label' => __( 'Link', 'elementor' ),
195	171	'type' => Controls_Manager::URL,
196	172	'default' => [
197	173	'is_external' => 'true',
198	174	],
		@@ -198,8 +174,9 @@
198	174	],
199	175	'dynamic' => [
200	176	'active' => true,
201	177	],
	178	+ 'placeholder' => __( 'https://your-link.com', 'elementor' ),
202	179	]
203	180	);
204	181
205	182	$repeater->add_control(
		@@ -204,14 +181,14 @@
204	181
205	182	$repeater->add_control(
206	183	'item_icon_color',
207	184	[
208		- 'label' => esc_html__( 'Color', 'elementor' ),
	185	+ 'label' => __( 'Color', 'elementor' ),
209	186	'type' => Controls_Manager::SELECT,
210	187	'default' => 'default',
211	188	'options' => [
212		- 'default' => esc_html__( 'Official Color', 'elementor' ),
213		- 'custom' => esc_html__( 'Custom', 'elementor' ),
	189	+ 'default' => __( 'Official Color', 'elementor' ),
	190	+ 'custom' => __( 'Custom', 'elementor' ),
214	191	],
215	192	]
216	193	);
217	194
		@@ -217,9 +194,9 @@
217	194
218	195	$repeater->add_control(
219	196	'item_icon_primary_color',
220	197	[
221		- 'label' => esc_html__( 'Primary Color', 'elementor' ),
	198	+ 'label' => __( 'Primary Color', 'elementor' ),
222	199	'type' => Controls_Manager::COLOR,
223	200	'condition' => [
224	201	'item_icon_color' => 'custom',
225	202	],
		@@ -231,9 +208,9 @@
231	208
232	209	$repeater->add_control(
233	210	'item_icon_secondary_color',
234	211	[
235		- 'label' => esc_html__( 'Secondary Color', 'elementor' ),
	212	+ 'label' => __( 'Secondary Color', 'elementor' ),
236	213	'type' => Controls_Manager::COLOR,
237	214	'condition' => [
238	215	'item_icon_color' => 'custom',
239	216	],
		@@ -246,9 +223,9 @@
246	223
247	224	$this->add_control(
248	225	'social_icon_list',
249	226	[
250		- 'label' => esc_html__( 'Social Icons', 'elementor' ),
	227	+ 'label' => __( 'Social Icons', 'elementor' ),
251	228	'type' => Controls_Manager::REPEATER,
252	229	'fields' => $repeater->get_controls(),
253	230	'default' => [
254	231	[
		@@ -258,9 +235,9 @@
258	235	],
259	236	],
260	237	[
261	238	'social_icon' => [
262		- 'value' => 'fab fa-x-twitter',
	239	+ 'value' => 'fab fa-twitter',
263	240	'library' => 'fa-brands',
264	241	],
265	242	],
266	243	[
		@@ -276,15 +253,15 @@
276	253
277	254	$this->add_control(
278	255	'shape',
279	256	[
280		- 'label' => esc_html__( 'Shape', 'elementor' ),
	257	+ 'label' => __( 'Shape', 'elementor' ),
281	258	'type' => Controls_Manager::SELECT,
282	259	'default' => 'rounded',
283	260	'options' => [
284		- 'square' => esc_html__( 'Square', 'elementor' ),
285		- 'rounded' => esc_html__( 'Rounded', 'elementor' ),
286		- 'circle' => esc_html__( 'Circle', 'elementor' ),
	261	+ 'rounded' => __( 'Rounded', 'elementor' ),
	262	+ 'square' => __( 'Square', 'elementor' ),
	263	+ 'circle' => __( 'Circle', 'elementor' ),
287	264	],
288	265	'prefix_class' => 'elementor-shape-',
289	266	]
290	267	);
		@@ -291,13 +268,13 @@
291	268
292	269	$this->add_responsive_control(
293	270	'columns',
294	271	[
295		- 'label' => esc_html__( 'Columns', 'elementor' ),
	272	+ 'label' => __( 'Columns', 'elementor' ),
296	273	'type' => Controls_Manager::SELECT,
297	274	'default' => '0',
298	275	'options' => [
299		- '0' => esc_html__( 'Auto', 'elementor' ),
	276	+ '0' => __( 'Auto', 'elementor' ),
300	277	'1' => '1',
301	278	'2' => '2',
302	279	'3' => '3',
303	280	'4' => '4',
		@@ -310,45 +287,53 @@
310	287	],
311	288	]
312	289	);
313	290
314		- $align_selector = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ) && ! $this->has_widget_inner_wrapper()
315		- ? '{{WRAPPER}}'
316		- : '{{WRAPPER}} .elementor-widget-container';
	291	+ $start = is_rtl() ? 'end' : 'start';
	292	+ $end = is_rtl() ? 'start' : 'end';
317	293
318	294	$this->add_responsive_control(
319	295	'align',
320	296	[
321		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	297	+ 'label' => __( 'Alignment', 'elementor' ),
322	298	'type' => Controls_Manager::CHOOSE,
323	299	'options' => [
324	300	'left' => [
325		- 'title' => esc_html__( 'Left', 'elementor' ),
	301	+ 'title' => __( 'Left', 'elementor' ),
326	302	'icon' => 'eicon-text-align-left',
327	303	],
328	304	'center' => [
329		- 'title' => esc_html__( 'Center', 'elementor' ),
	305	+ 'title' => __( 'Center', 'elementor' ),
330	306	'icon' => 'eicon-text-align-center',
331	307	],
332	308	'right' => [
333		- 'title' => esc_html__( 'Right', 'elementor' ),
	309	+ 'title' => __( 'Right', 'elementor' ),
334	310	'icon' => 'eicon-text-align-right',
335	311	],
336	312	],
337		- 'prefix_class' => 'e-grid-align%s-',
	313	+ 'prefix_class' => 'e-grid-align-',
338	314	'default' => 'center',
339	315	'selectors' => [
340		- $align_selector => 'text-align: {{VALUE}}',
	316	+ '{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}}',
341	317	],
342	318	]
343	319	);
344	320
	321	+ $this->add_control(
	322	+ 'view',
	323	+ [
	324	+ 'label' => __( 'View', 'elementor' ),
	325	+ 'type' => Controls_Manager::HIDDEN,
	326	+ 'default' => 'traditional',
	327	+ ]
	328	+ );
	329	+
345	330	$this->end_controls_section();
346	331
347	332	$this->start_controls_section(
348	333	'section_social_style',
349	334	[
350		- 'label' => esc_html__( 'Icon', 'elementor' ),
	335	+ 'label' => __( 'Icon', 'elementor' ),
351	336	'tab' => Controls_Manager::TAB_STYLE,
352	337	]
353	338	);
354	339
		@@ -354,14 +339,14 @@
354	339
355	340	$this->add_control(
356	341	'icon_color',
357	342	[
358		- 'label' => esc_html__( 'Color', 'elementor' ),
	343	+ 'label' => __( 'Color', 'elementor' ),
359	344	'type' => Controls_Manager::SELECT,
360	345	'default' => 'default',
361	346	'options' => [
362		- 'default' => esc_html__( 'Official Color', 'elementor' ),
363		- 'custom' => esc_html__( 'Custom', 'elementor' ),
	347	+ 'default' => __( 'Official Color', 'elementor' ),
	348	+ 'custom' => __( 'Custom', 'elementor' ),
364	349	],
365	350	]
366	351	);
367	352
		@@ -367,9 +352,9 @@
367	352
368	353	$this->add_control(
369	354	'icon_primary_color',
370	355	[
371		- 'label' => esc_html__( 'Primary Color', 'elementor' ),
	356	+ 'label' => __( 'Primary Color', 'elementor' ),
372	357	'type' => Controls_Manager::COLOR,
373	358	'condition' => [
374	359	'icon_color' => 'custom',
375	360	],
		@@ -381,9 +366,9 @@
381	366
382	367	$this->add_control(
383	368	'icon_secondary_color',
384	369	[
385		- 'label' => esc_html__( 'Secondary Color', 'elementor' ),
	370	+ 'label' => __( 'Secondary Color', 'elementor' ),
386	371	'type' => Controls_Manager::COLOR,
387	372	'condition' => [
388	373	'icon_color' => 'custom',
389	374	],
		@@ -396,12 +381,10 @@
396	381
397	382	$this->add_responsive_control(
398	383	'icon_size',
399	384	[
400		- 'label' => esc_html__( 'Size', 'elementor' ),
	385	+ 'label' => __( 'Size', 'elementor' ),
401	386	'type' => Controls_Manager::SLIDER,
402		- // The `%' and `em` units are not supported as the widget implements icons differently then other icons.
403		- 'size_units' => [ 'px', 'rem', 'vw', 'custom' ],
404	387	'range' => [
405	388	'px' => [
406	389	'min' => 6,
407	390	'max' => 300,
		@@ -415,12 +398,10 @@
415	398
416	399	$this->add_responsive_control(
417	400	'icon_padding',
418	401	[
419		- 'label' => esc_html__( 'Padding', 'elementor' ),
	402	+ 'label' => __( 'Padding', 'elementor' ),
420	403	'type' => Controls_Manager::SLIDER,
421		- // The `%' unit is not supported.
422		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
423	404	'selectors' => [
424	405	'{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
425	406	],
426	407	'default' => [
		@@ -432,19 +413,12 @@
432	413	'mobile_default' => [
433	414	'unit' => 'em',
434	415	],
435	416	'range' => [
436		- 'px' => [
437		- 'max' => 50,
438		- ],
439	417	'em' => [
440	418	'min' => 0,
441	419	'max' => 5,
442	420	],
443		- 'rem' => [
444		- 'min' => 0,
445		- 'max' => 5,
446		- ],
447	421	],
448	422	]
449	423	);
450	424
		@@ -450,23 +424,15 @@
450	424
451	425	$this->add_responsive_control(
452	426	'icon_spacing',
453	427	[
454		- 'label' => esc_html__( 'Spacing', 'elementor' ),
	428	+ 'label' => __( 'Spacing', 'elementor' ),
455	429	'type' => Controls_Manager::SLIDER,
456		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
457	430	'range' => [
458	431	'px' => [
	432	+ 'min' => 0,
459	433	'max' => 100,
460	434	],
461		- 'em' => [
462		- 'min' => 0,
463		- 'max' => 10,
464		- ],
465		- 'rem' => [
466		- 'min' => 0,
467		- 'max' => 10,
468		- ],
469	435	],
470	436	'default' => [
471	437	'size' => 5,
472	438	],
		@@ -478,11 +444,10 @@
478	444
479	445	$this->add_responsive_control(
480	446	'row_gap',
481	447	[
482		- 'label' => esc_html__( 'Rows Gap', 'elementor' ),
	448	+ 'label' => __( 'Rows Gap', 'elementor' ),
483	449	'type' => Controls_Manager::SLIDER,
484		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
485	450	'default' => [
486	451	'size' => 0,
487	452	],
488	453	'selectors' => [
		@@ -499,14 +464,14 @@
499	464	'separator' => 'before',
500	465	]
501	466	);
502	467
503		- $this->add_responsive_control(
	468	+ $this->add_control(
504	469	'border_radius',
505	470	[
506		- 'label' => esc_html__( 'Border Radius', 'elementor' ),
	471	+ 'label' => __( 'Border Radius', 'elementor' ),
507	472	'type' => Controls_Manager::DIMENSIONS,
508		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	473	+ 'size_units' => [ 'px', '%' ],
509	474	'selectors' => [
510	475	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
511	476	],
512	477	]
		@@ -516,9 +481,9 @@
516	481
517	482	$this->start_controls_section(
518	483	'section_social_hover',
519	484	[
520		- 'label' => esc_html__( 'Icon Hover', 'elementor' ),
	485	+ 'label' => __( 'Icon Hover', 'elementor' ),
521	486	'tab' => Controls_Manager::TAB_STYLE,
522	487	]
523	488	);
524	489
		@@ -524,9 +489,9 @@
524	489
525	490	$this->add_control(
526	491	'hover_primary_color',
527	492	[
528		- 'label' => esc_html__( 'Primary Color', 'elementor' ),
	493	+ 'label' => __( 'Primary Color', 'elementor' ),
529	494	'type' => Controls_Manager::COLOR,
530	495	'default' => '',
531	496	'condition' => [
532	497	'icon_color' => 'custom',
		@@ -539,9 +504,9 @@
539	504
540	505	$this->add_control(
541	506	'hover_secondary_color',
542	507	[
543		- 'label' => esc_html__( 'Secondary Color', 'elementor' ),
	508	+ 'label' => __( 'Secondary Color', 'elementor' ),
544	509	'type' => Controls_Manager::COLOR,
545	510	'default' => '',
546	511	'condition' => [
547	512	'icon_color' => 'custom',
		@@ -555,9 +520,9 @@
555	520
556	521	$this->add_control(
557	522	'hover_border_color',
558	523	[
559		- 'label' => esc_html__( 'Border Color', 'elementor' ),
	524	+ 'label' => __( 'Border Color', 'elementor' ),
560	525	'type' => Controls_Manager::COLOR,
561	526	'default' => '',
562	527	'condition' => [
563	528	'image_border_border!' => '',
		@@ -570,14 +535,15 @@
570	535
571	536	$this->add_control(
572	537	'hover_animation',
573	538	[
574		- 'label' => esc_html__( 'Hover Animation', 'elementor' ),
	539	+ 'label' => __( 'Hover Animation', 'elementor' ),
575	540	'type' => Controls_Manager::HOVER_ANIMATION,
576	541	]
577	542	);
578	543
579	544	$this->end_controls_section();
	545	+
580	546	}
581	547
582	548	/**
583	549	* Render social icons widget output on the frontend.
		@@ -588,20 +554,11 @@
588	554	* @access protected
589	555	*/
590	556	protected function render() {
591	557	$settings = $this->get_settings_for_display();
592		-
593		- $this->add_render_attribute( 'wrapper', 'class', [ 'elementor-social-icons-wrapper', 'elementor-grid' ] );
594		- $this->add_render_attribute( 'item_wrapper', 'class', 'elementor-grid-item' );
595		-
596		- if ( count( $settings['social_icon_list'] ) > 1 ) {
597		- $this->add_render_attribute( 'wrapper', 'role', 'list' );
598		- $this->add_render_attribute( 'item_wrapper', 'role', 'listitem' );
599		- }
600		-
601	558	$fallback_defaults = [
602	559	'fa fa-facebook',
603		- 'fa fa-x-twitter',
	560	+ 'fa fa-twitter',
604	561	'fa fa-google-plus',
605	562	];
606	563
607	564	$class_animation = '';
		@@ -612,9 +569,9 @@
612	569
613	570	$migration_allowed = Icons_Manager::is_migration_allowed();
614	571
615	572	?>
616		- <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
	573	+ <div class="elementor-social-icons-wrapper elementor-grid">
617	574	<?php
618	575	foreach ( $settings['social_icon_list'] as $index => $item ) {
619	576	$migrated = isset( $item['__fa4_migrated']['social_icon'] );
620	577	$is_new = empty( $item['social'] ) && $migration_allowed;
		@@ -652,19 +609,19 @@
652	609
653	610	$this->add_link_attributes( $link_key, $item['link'] );
654	611
655	612	?>
656		- <span <?php $this->print_render_attribute_string( 'item_wrapper' ); ?>>
657		- <a <?php $this->print_render_attribute_string( $link_key ); ?>>
658		- <span class="elementor-screen-only"><?php echo esc_html( ucwords( $social ) ); ?></span>
	613	+ <div class="elementor-grid-item">
	614	+ <a <?php echo $this->get_render_attribute_string( $link_key ); ?>>
	615	+ <span class="elementor-screen-only"><?php echo ucwords( $social ); ?></span>
659	616	<?php
660	617	if ( $is_new || $migrated ) {
661		- Icons_Manager::render_icon( $item['social_icon'], [ 'aria-hidden' => 'true' ] );
	618	+ Icons_Manager::render_icon( $item['social_icon'] );
662	619	} else { ?>
663		- <i class="<?php echo esc_attr( $item['social'] ); ?>" aria-hidden="true"></i>
	620	+ <i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
664	621	<?php } ?>
665	622	</a>
666		- </span>
	623	+ </div>
667	624	<?php } ?>
668	625	</div>
669	626	<?php
670	627	}
		@@ -678,27 +635,17 @@
678	635	* @access protected
679	636	*/
680	637	protected function content_template() {
681	638	?>
682		- <#
683		- view.addRenderAttribute( 'wrapper', 'class', [ 'elementor-social-icons-wrapper', 'elementor-grid' ] );
684		- view.addRenderAttribute( 'item_wrapper', 'class', 'elementor-grid-item' );
685		-
686		- if ( settings.social_icon_list.length > 1 ) {
687		- view.addRenderAttribute( 'wrapper', 'role', 'list' );
688		- view.addRenderAttribute( 'item_wrapper', 'role', 'listitem' );
689		- }
690		-
691		- var iconsHTML = {};
692		- #>
693		- <div {{{ view.getRenderAttributeString( 'wrapper' ) }}}>
	639	+ <# var iconsHTML = {}; #>
	640	+ <div class="elementor-social-icons-wrapper elementor-grid">
694	641	<# _.each( settings.social_icon_list, function( item, index ) {
695	642	var link = item.link ? item.link.url : '',
696	643	migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
697	644	social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
698	645	#>
699		- <span {{{ view.getRenderAttributeString( 'item_wrapper' ) }}}>
700		- <a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ elementor.helpers.sanitizeUrl( link ) }}">
	646	+ <div class="elementor-grid-item">
	647	+ <a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
701	648	<span class="elementor-screen-only">{{{ social }}}</span>
702	649	<#
703	650	iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
704	651	if ( ( ! item.social || migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
		@@ -707,53 +654,10 @@
707	654	<i class="{{ item.social }}"></i>
708	655	<# }
709	656	#>
710	657	</a>
711		- </span>
	658	+ </div>
712	659	<# } ); #>
713	660	</div>
714	661	<?php
715		- }
716		-
717		- public function render_markdown(): string {
718		- $settings = $this->get_settings_for_display();
719		- if ( empty( $settings['social_icon_list'] ) ) {
720		- return '';
721		- }
722		-
723		- $migration_allowed = Icons_Manager::is_migration_allowed();
724		- $links = [];
725		-
726		- foreach ( $settings['social_icon_list'] as $item ) {
727		- $url = $item['link']['url'] ?? '';
728		- if ( empty( $url ) ) {
729		- continue;
730		- }
731		-
732		- $migrated = isset( $item['__fa4_migrated']['social_icon'] );
733		- $is_new = empty( $item['social'] ) && $migration_allowed;
734		- $social = '';
735		-
736		- if ( ! empty( $item['social'] ) ) {
737		- $social = str_replace( 'fa fa-', '', $item['social'] );
738		- }
739		-
740		- if ( ( $is_new || $migrated ) && 'svg' !== ( $item['social_icon']['library'] ?? '' ) ) {
741		- $parts = explode( ' ', $item['social_icon']['value'] ?? '', 2 );
742		- $social = ! empty( $parts[1] ) ? str_replace( 'fa-', '', $parts[1] ) : '';
743		- }
744		-
745		- if ( 'svg' === ( $item['social_icon']['library'] ?? '' ) ) {
746		- $social = get_post_meta( $item['social_icon']['value']['id'] ?? 0, '_wp_attachment_image_alt', true );
747		- }
748		-
749		- $label = ucwords( str_replace( '-', ' ', $social ) );
750		- if ( empty( $label ) ) {
751		- $label = 'Link';
752		- }
753		-
754		- $links[] = '- [' . $label . '](' . esc_url( $url ) . ')';
755		- }
756		-
757		- return implode( "\n", $links );
758	662	}
759	663	}