PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.13
Elementor Website Builder – more than just a page builder v3.0.13
4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 All 455 releases
← All changes | includes/widgets/social-icons.php +69 -166 4.3.0-beta1 → 3.0.13 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,43 +69,21 @@
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 *
100 - * @since 3.1.0
78 + * @since 1.0.0
101 79 * @access protected
102 80 */
103 - protected function register_controls() {
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,52 @@
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-',
338 313 'default' => 'center',
339 314 'selectors' => [
340 - $align_selector => 'text-align: {{VALUE}}',
315 + '{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}}',
341 316 ],
342 317 ]
343 318 );
344 319
320 + $this->add_control(
321 + 'view',
322 + [
323 + 'label' => __( 'View', 'elementor' ),
324 + 'type' => Controls_Manager::HIDDEN,
325 + 'default' => 'traditional',
326 + ]
327 + );
328 +
345 329 $this->end_controls_section();
346 330
347 331 $this->start_controls_section(
348 332 'section_social_style',
349 333 [
350 - 'label' => esc_html__( 'Icon', 'elementor' ),
334 + 'label' => __( 'Icon', 'elementor' ),
351 335 'tab' => Controls_Manager::TAB_STYLE,
352 336 ]
353 337 );
354 338
@@ -354,14 +338,14 @@
354 338
355 339 $this->add_control(
356 340 'icon_color',
357 341 [
358 - 'label' => esc_html__( 'Color', 'elementor' ),
342 + 'label' => __( 'Color', 'elementor' ),
359 343 'type' => Controls_Manager::SELECT,
360 344 'default' => 'default',
361 345 'options' => [
362 - 'default' => esc_html__( 'Official Color', 'elementor' ),
363 - 'custom' => esc_html__( 'Custom', 'elementor' ),
346 + 'default' => __( 'Official Color', 'elementor' ),
347 + 'custom' => __( 'Custom', 'elementor' ),
364 348 ],
365 349 ]
366 350 );
367 351
@@ -367,9 +351,9 @@
367 351
368 352 $this->add_control(
369 353 'icon_primary_color',
370 354 [
371 - 'label' => esc_html__( 'Primary Color', 'elementor' ),
355 + 'label' => __( 'Primary Color', 'elementor' ),
372 356 'type' => Controls_Manager::COLOR,
373 357 'condition' => [
374 358 'icon_color' => 'custom',
375 359 ],
@@ -381,9 +365,9 @@
381 365
382 366 $this->add_control(
383 367 'icon_secondary_color',
384 368 [
385 - 'label' => esc_html__( 'Secondary Color', 'elementor' ),
369 + 'label' => __( 'Secondary Color', 'elementor' ),
386 370 'type' => Controls_Manager::COLOR,
387 371 'condition' => [
388 372 'icon_color' => 'custom',
389 373 ],
@@ -396,12 +380,10 @@
396 380
397 381 $this->add_responsive_control(
398 382 'icon_size',
399 383 [
400 - 'label' => esc_html__( 'Size', 'elementor' ),
384 + 'label' => __( 'Size', 'elementor' ),
401 385 '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 386 'range' => [
405 387 'px' => [
406 388 'min' => 6,
407 389 'max' => 300,
@@ -415,12 +397,10 @@
415 397
416 398 $this->add_responsive_control(
417 399 'icon_padding',
418 400 [
419 - 'label' => esc_html__( 'Padding', 'elementor' ),
401 + 'label' => __( 'Padding', 'elementor' ),
420 402 'type' => Controls_Manager::SLIDER,
421 - // The `%' unit is not supported.
422 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
423 403 'selectors' => [
424 404 '{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
425 405 ],
426 406 'default' => [
@@ -432,19 +412,12 @@
432 412 'mobile_default' => [
433 413 'unit' => 'em',
434 414 ],
435 415 'range' => [
436 - 'px' => [
437 - 'max' => 50,
438 - ],
439 416 'em' => [
440 417 'min' => 0,
441 418 'max' => 5,
442 419 ],
443 - 'rem' => [
444 - 'min' => 0,
445 - 'max' => 5,
446 - ],
447 420 ],
448 421 ]
449 422 );
450 423
@@ -450,23 +423,15 @@
450 423
451 424 $this->add_responsive_control(
452 425 'icon_spacing',
453 426 [
454 - 'label' => esc_html__( 'Spacing', 'elementor' ),
427 + 'label' => __( 'Spacing', 'elementor' ),
455 428 'type' => Controls_Manager::SLIDER,
456 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
457 429 'range' => [
458 430 'px' => [
431 + 'min' => 0,
459 432 'max' => 100,
460 433 ],
461 - 'em' => [
462 - 'min' => 0,
463 - 'max' => 10,
464 - ],
465 - 'rem' => [
466 - 'min' => 0,
467 - 'max' => 10,
468 - ],
469 434 ],
470 435 'default' => [
471 436 'size' => 5,
472 437 ],
@@ -478,11 +443,10 @@
478 443
479 444 $this->add_responsive_control(
480 445 'row_gap',
481 446 [
482 - 'label' => esc_html__( 'Rows Gap', 'elementor' ),
447 + 'label' => __( 'Rows Gap', 'elementor' ),
483 448 'type' => Controls_Manager::SLIDER,
484 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
485 449 'default' => [
486 450 'size' => 0,
487 451 ],
488 452 'selectors' => [
@@ -499,14 +463,14 @@
499 463 'separator' => 'before',
500 464 ]
501 465 );
502 466
503 - $this->add_responsive_control(
467 + $this->add_control(
504 468 'border_radius',
505 469 [
506 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
470 + 'label' => __( 'Border Radius', 'elementor' ),
507 471 'type' => Controls_Manager::DIMENSIONS,
508 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
472 + 'size_units' => [ 'px', '%' ],
509 473 'selectors' => [
510 474 '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
511 475 ],
512 476 ]
@@ -516,9 +480,9 @@
516 480
517 481 $this->start_controls_section(
518 482 'section_social_hover',
519 483 [
520 - 'label' => esc_html__( 'Icon Hover', 'elementor' ),
484 + 'label' => __( 'Icon Hover', 'elementor' ),
521 485 'tab' => Controls_Manager::TAB_STYLE,
522 486 ]
523 487 );
524 488
@@ -524,9 +488,9 @@
524 488
525 489 $this->add_control(
526 490 'hover_primary_color',
527 491 [
528 - 'label' => esc_html__( 'Primary Color', 'elementor' ),
492 + 'label' => __( 'Primary Color', 'elementor' ),
529 493 'type' => Controls_Manager::COLOR,
530 494 'default' => '',
531 495 'condition' => [
532 496 'icon_color' => 'custom',
@@ -539,9 +503,9 @@
539 503
540 504 $this->add_control(
541 505 'hover_secondary_color',
542 506 [
543 - 'label' => esc_html__( 'Secondary Color', 'elementor' ),
507 + 'label' => __( 'Secondary Color', 'elementor' ),
544 508 'type' => Controls_Manager::COLOR,
545 509 'default' => '',
546 510 'condition' => [
547 511 'icon_color' => 'custom',
@@ -555,9 +519,9 @@
555 519
556 520 $this->add_control(
557 521 'hover_border_color',
558 522 [
559 - 'label' => esc_html__( 'Border Color', 'elementor' ),
523 + 'label' => __( 'Border Color', 'elementor' ),
560 524 'type' => Controls_Manager::COLOR,
561 525 'default' => '',
562 526 'condition' => [
563 527 'image_border_border!' => '',
@@ -570,14 +534,15 @@
570 534
571 535 $this->add_control(
572 536 'hover_animation',
573 537 [
574 - 'label' => esc_html__( 'Hover Animation', 'elementor' ),
538 + 'label' => __( 'Hover Animation', 'elementor' ),
575 539 'type' => Controls_Manager::HOVER_ANIMATION,
576 540 ]
577 541 );
578 542
579 543 $this->end_controls_section();
544 +
580 545 }
581 546
582 547 /**
583 548 * Render social icons widget output on the frontend.
@@ -588,20 +553,11 @@
588 553 * @access protected
589 554 */
590 555 protected function render() {
591 556 $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 557 $fallback_defaults = [
602 558 'fa fa-facebook',
603 - 'fa fa-x-twitter',
559 + 'fa fa-twitter',
604 560 'fa fa-google-plus',
605 561 ];
606 562
607 563 $class_animation = '';
@@ -612,9 +568,9 @@
612 568
613 569 $migration_allowed = Icons_Manager::is_migration_allowed();
614 570
615 571 ?>
616 - <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
572 + <div class="elementor-social-icons-wrapper elementor-grid">
617 573 <?php
618 574 foreach ( $settings['social_icon_list'] as $index => $item ) {
619 575 $migrated = isset( $item['__fa4_migrated']['social_icon'] );
620 576 $is_new = empty( $item['social'] ) && $migration_allowed;
@@ -652,19 +608,19 @@
652 608
653 609 $this->add_link_attributes( $link_key, $item['link'] );
654 610
655 611 ?>
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>
612 + <div class="elementor-grid-item">
613 + <a <?php echo $this->get_render_attribute_string( $link_key ); ?>>
614 + <span class="elementor-screen-only"><?php echo ucwords( $social ); ?></span>
659 615 <?php
660 616 if ( $is_new || $migrated ) {
661 - Icons_Manager::render_icon( $item['social_icon'], [ 'aria-hidden' => 'true' ] );
617 + Icons_Manager::render_icon( $item['social_icon'] );
662 618 } else { ?>
663 - <i class="<?php echo esc_attr( $item['social'] ); ?>" aria-hidden="true"></i>
619 + <i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
664 620 <?php } ?>
665 621 </a>
666 - </span>
622 + </div>
667 623 <?php } ?>
668 624 </div>
669 625 <?php
670 626 }
@@ -678,27 +634,17 @@
678 634 * @access protected
679 635 */
680 636 protected function content_template() {
681 637 ?>
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' ) }}}>
638 + <# var iconsHTML = {}; #>
639 + <div class="elementor-social-icons-wrapper elementor-grid">
694 640 <# _.each( settings.social_icon_list, function( item, index ) {
695 641 var link = item.link ? item.link.url : '',
696 642 migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
697 643 social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
698 644 #>
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 ) }}">
645 + <div class="elementor-grid-item">
646 + <a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
701 647 <span class="elementor-screen-only">{{{ social }}}</span>
702 648 <#
703 649 iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
704 650 if ( ( ! item.social || migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
@@ -707,53 +653,10 @@
707 653 <i class="{{ item.social }}"></i>
708 654 <# }
709 655 #>
710 656 </a>
711 - </span>
657 + </div>
712 658 <# } ); #>
713 659 </div>
714 660 <?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 661 }
759 662 }