icons.php (18467B)
1 <?php 2 namespace Elementor; 3 4 use Elementor\Core\Page_Assets\Data_Managers\Font_Icon_Svg as Font_Icon_Svg_Data_Manager; 5 use Elementor\Core\Page_Assets\Managers\Font_Icon_Svg\Manager as Font_Icon_Svg_Manager; 6 use Elementor\Core\Files\Assets\Svg\Svg_Handler; 7 8 if ( ! defined( 'ABSPATH' ) ) { 9 exit; // Exit if accessed directly. 10 } 11 12 /** 13 * Elementor icons manager. 14 * 15 * Elementor icons manager handler class 16 * 17 * @since 2.4.0 18 */ 19 class Icons_Manager { 20 21 const NEEDS_UPDATE_OPTION = 'icon_manager_needs_update'; 22 23 const FONT_ICON_SVG_CLASS_NAME = 'e-font-icon-svg'; 24 25 const LOAD_FA4_SHIM_OPTION_KEY = 'elementor_load_fa4_shim'; 26 /** 27 * Tabs. 28 * 29 * Holds the list of all the tabs. 30 * 31 * @access private 32 * @static 33 * @since 2.4.0 34 * @var array 35 */ 36 private static $tabs; 37 38 private static $data_manager; 39 40 private static $font_icon_svg_symbols = []; 41 42 private static function get_needs_upgrade_option() { 43 return get_option( 'elementor_' . self::NEEDS_UPDATE_OPTION, null ); 44 } 45 46 /** 47 * register styles 48 * 49 * Used to register all icon types stylesheets so they could be enqueued later by widgets 50 */ 51 public function register_styles() { 52 $config = self::get_icon_manager_tabs_config(); 53 54 $shared_styles = []; 55 56 foreach ( $config as $type => $icon_type ) { 57 if ( ! isset( $icon_type['url'] ) ) { 58 continue; 59 } 60 $dependencies = []; 61 if ( ! empty( $icon_type['enqueue'] ) ) { 62 foreach ( (array) $icon_type['enqueue'] as $font_css_url ) { 63 if ( ! in_array( $font_css_url, array_keys( $shared_styles ) ) ) { 64 $style_handle = 'elementor-icons-shared-' . count( $shared_styles ); 65 wp_register_style( 66 $style_handle, 67 $font_css_url, 68 [], 69 $icon_type['ver'] 70 ); 71 $shared_styles[ $font_css_url ] = $style_handle; 72 } 73 $dependencies[] = $shared_styles[ $font_css_url ]; 74 } 75 } 76 wp_register_style( 77 'elementor-icons-' . $icon_type['name'], 78 $icon_type['url'], 79 $dependencies, 80 $icon_type['ver'] 81 ); 82 } 83 } 84 85 /** 86 * Init Tabs 87 * 88 * Initiate Icon Manager Tabs. 89 * 90 * @access private 91 * @static 92 * @since 2.4.0 93 */ 94 private static function init_tabs() { 95 $initial_tabs = [ 96 'fa-regular' => [ 97 'name' => 'fa-regular', 98 'label' => esc_html__( 'Font Awesome - Regular', 'elementor' ), 99 'url' => self::get_fa_asset_url( 'regular' ), 100 'enqueue' => [ self::get_fa_asset_url( 'fontawesome' ) ], 101 'prefix' => 'fa-', 102 'displayPrefix' => 'far', 103 'labelIcon' => 'fab fa-font-awesome-alt', 104 'ver' => '5.15.3', 105 'fetchJson' => self::get_fa_asset_url( 'regular', 'js', false ), 106 'native' => true, 107 ], 108 'fa-solid' => [ 109 'name' => 'fa-solid', 110 'label' => esc_html__( 'Font Awesome - Solid', 'elementor' ), 111 'url' => self::get_fa_asset_url( 'solid' ), 112 'enqueue' => [ self::get_fa_asset_url( 'fontawesome' ) ], 113 'prefix' => 'fa-', 114 'displayPrefix' => 'fas', 115 'labelIcon' => 'fab fa-font-awesome', 116 'ver' => '5.15.3', 117 'fetchJson' => self::get_fa_asset_url( 'solid', 'js', false ), 118 'native' => true, 119 ], 120 'fa-brands' => [ 121 'name' => 'fa-brands', 122 'label' => esc_html__( 'Font Awesome - Brands', 'elementor' ), 123 'url' => self::get_fa_asset_url( 'brands' ), 124 'enqueue' => [ self::get_fa_asset_url( 'fontawesome' ) ], 125 'prefix' => 'fa-', 126 'displayPrefix' => 'fab', 127 'labelIcon' => 'fab fa-font-awesome-flag', 128 'ver' => '5.15.3', 129 'fetchJson' => self::get_fa_asset_url( 'brands', 'js', false ), 130 'native' => true, 131 ], 132 ]; 133 134 /** 135 * Initial icon manager tabs. 136 * 137 * Filters the list of initial icon manager tabs. 138 * 139 * @param array $icon_manager_tabs Initial icon manager tabs. 140 */ 141 $initial_tabs = apply_filters( 'elementor/icons_manager/native', $initial_tabs ); 142 143 self::$tabs = $initial_tabs; 144 } 145 146 /** 147 * Get Icon Manager Tabs 148 * @return array 149 */ 150 public static function get_icon_manager_tabs() { 151 if ( self::is_font_icon_inline_svg() && ! Plugin::$instance->editor->is_edit_mode() && ! Plugin::$instance->preview->is_preview_mode() ) { 152 self::$tabs = []; 153 } elseif ( ! self::$tabs ) { 154 self::init_tabs(); 155 } 156 157 $additional_tabs = []; 158 159 /** 160 * Additional icon manager tabs. 161 * 162 * Filters additional icon manager tabs. 163 * 164 * @param array $additional_tabs Additional icon manager tabs. Default is an empty array. 165 */ 166 $additional_tabs = apply_filters( 'elementor/icons_manager/additional_tabs', $additional_tabs ); 167 168 return array_merge( self::$tabs, $additional_tabs ); 169 } 170 171 public static function enqueue_shim() { 172 wp_enqueue_script( 173 'font-awesome-4-shim', 174 self::get_fa_asset_url( 'v4-shims', 'js' ), 175 [], 176 ELEMENTOR_VERSION 177 ); 178 // Make sure that the CSS in the 'all' file does not override FA Pro's CSS 179 if ( ! wp_script_is( 'font-awesome-pro' ) ) { 180 wp_enqueue_style( 181 'font-awesome-5-all', 182 self::get_fa_asset_url( 'all' ), 183 [], 184 ELEMENTOR_VERSION 185 ); 186 } 187 wp_enqueue_style( 188 'font-awesome-4-shim', 189 self::get_fa_asset_url( 'v4-shims' ), 190 [], 191 ELEMENTOR_VERSION 192 ); 193 } 194 195 private static function get_fa_asset_url( $filename, $ext_type = 'css', $add_suffix = true ) { 196 static $is_test_mode = null; 197 if ( null === $is_test_mode ) { 198 $is_test_mode = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG || defined( 'ELEMENTOR_TESTS' ) && ELEMENTOR_TESTS; 199 } 200 $url = ELEMENTOR_ASSETS_URL . 'lib/font-awesome/' . $ext_type . '/' . $filename; 201 if ( ! $is_test_mode && $add_suffix ) { 202 $url .= '.min'; 203 } 204 205 return $url . '.' . $ext_type; 206 } 207 208 public static function get_icon_manager_tabs_config() { 209 $tabs = [ 210 'all' => [ 211 'name' => 'all', 212 'label' => esc_html__( 'All Icons', 'elementor' ), 213 'labelIcon' => 'eicon-filter', 214 'native' => true, 215 ], 216 ]; 217 218 return array_values( array_merge( $tabs, self::get_icon_manager_tabs() ) ); 219 } 220 221 /** 222 * is_font_awesome_inline 223 * 224 * @return bool 225 */ 226 private static function is_font_icon_inline_svg() { 227 return Plugin::$instance->experiments->is_feature_active( 'e_font_icon_svg' ); 228 } 229 230 /** 231 * render_svg_symbols 232 * 233 */ 234 public static function render_svg_symbols() { 235 if ( ! self::$font_icon_svg_symbols ) { 236 return; 237 } 238 239 $svg = '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">'; 240 241 foreach ( self::$font_icon_svg_symbols as $symbol_id => $symbol ) { 242 $svg .= '<symbol id="' . $symbol_id . '" viewBox="0 0 ' . esc_attr( $symbol['width'] ) . ' ' . esc_attr( $symbol['height'] ) . '">'; 243 $svg .= '<path d="' . esc_attr( $symbol['path'] ) . '"></path>'; 244 $svg .= '</symbol>'; 245 } 246 247 $svg .= '</svg>'; 248 249 Utils::print_unescaped_internal_string( $svg ); 250 } 251 252 public static function get_icon_svg_data( $icon ) { 253 $font_family_manager = Font_Icon_Svg_Manager::get_font_family_manager( $icon['font_family'] ); 254 255 $config = $font_family_manager::get_config( $icon ); 256 257 return self::$data_manager->get_asset_data( $config ); 258 } 259 260 /** 261 * Get font awesome svg. 262 * @param $icon array [ 'value' => string, 'library' => string ] 263 * 264 * @return bool|mixed|string 265 */ 266 public static function get_font_icon_svg( $icon, $attributes = [] ) { 267 // Load the SVG from the database. 268 $icon_data = self::get_icon_svg_data( $icon ); 269 270 if ( ! $icon_data['path'] ) { 271 return ''; 272 } 273 274 // Add the icon data to the symbols array for later use in page rendering process. 275 if ( ! in_array( $icon_data['key'], self::$font_icon_svg_symbols, true ) ) { 276 self::$font_icon_svg_symbols[ $icon_data['key'] ] = $icon_data; 277 } 278 279 if ( ! empty( $attributes['class'] ) && ! is_array( $attributes['class'] ) ) { 280 $attributes['class'] = [ $attributes['class'] ]; 281 } 282 283 $attributes['class'][] = self::FONT_ICON_SVG_CLASS_NAME; 284 285 /** 286 * If in edit mode inline the full svg, otherwise use the symbol. 287 * Will be displayed only after page update or widget "blur". 288 */ 289 if ( Plugin::$instance->editor->is_edit_mode() ) { 290 return '<svg xmlns="http://www.w3.org/2000/svg" ' . Utils::render_html_attributes( $attributes ) . ' 291 viewBox="0 0 ' . esc_attr( $icon_data['width'] ) . ' ' . esc_attr( $icon_data['height'] ) . '"> 292 <path d="' . esc_attr( $icon_data['path'] ) . '"></path> 293 </svg>'; 294 } 295 296 return '<svg ' . Utils::render_html_attributes( $attributes ) . '><use xlink:href="#' . esc_attr( $icon_data['key'] ) . '" /></svg>'; 297 } 298 299 public static function render_uploaded_svg_icon( $value ) { 300 if ( ! isset( $value['id'] ) ) { 301 return ''; 302 } 303 304 return Svg_Handler::get_inline_svg( $value['id'] ); 305 } 306 307 public static function render_font_icon( $icon, $attributes = [], $tag = 'i' ) { 308 $icon_types = self::get_icon_manager_tabs(); 309 310 if ( isset( $icon_types[ $icon['library'] ]['render_callback'] ) && is_callable( $icon_types[ $icon['library'] ]['render_callback'] ) ) { 311 return call_user_func_array( $icon_types[ $icon['library'] ]['render_callback'], [ $icon, $attributes, $tag ] ); 312 } 313 314 $content = ''; 315 316 $font_icon_svg_family = self::is_font_icon_inline_svg() ? Font_Icon_Svg_Manager::get_font_family( $icon['library'] ) : ''; 317 318 if ( $font_icon_svg_family ) { 319 $icon['font_family'] = $font_icon_svg_family; 320 321 $content = self::get_font_icon_svg( $icon, $attributes ); 322 323 if ( $content ) { 324 return $content; 325 } 326 } 327 328 if ( ! $content ) { 329 if ( empty( $attributes['class'] ) ) { 330 $attributes['class'] = $icon['value']; 331 } else { 332 if ( is_array( $attributes['class'] ) ) { 333 $attributes['class'][] = $icon['value']; 334 } else { 335 $attributes['class'] .= ' ' . $icon['value']; 336 } 337 } 338 } 339 340 return '<' . $tag . ' ' . Utils::render_html_attributes( $attributes ) . '>' . $content . '</' . $tag . '>'; 341 } 342 343 /** 344 * Render Icon 345 * 346 * Used to render Icon for \Elementor\Controls_Manager::ICONS 347 * @param array $icon Icon Type, Icon value 348 * @param array $attributes Icon HTML Attributes 349 * @param string $tag Icon HTML tag, defaults to <i> 350 * 351 * @return mixed|string 352 */ 353 public static function render_icon( $icon, $attributes = [], $tag = 'i' ) { 354 if ( empty( $icon['library'] ) ) { 355 return false; 356 } 357 358 $output = ''; 359 360 /** 361 * When the library value is svg it means that it's a SVG media attachment uploaded by the user. 362 * Otherwise, it's the name of the font family that the icon belongs to. 363 */ 364 if ( 'svg' === $icon['library'] ) { 365 $output = self::render_uploaded_svg_icon( $icon['value'] ); 366 } else { 367 $output = self::render_font_icon( $icon, $attributes, $tag ); 368 } 369 370 Utils::print_unescaped_internal_string( $output ); 371 372 return true; 373 } 374 375 /** 376 * Font Awesome 4 to font Awesome 5 Value Migration 377 * 378 * used to convert string value of Icon control to array value of Icons control 379 * ex: 'fa fa-star' => [ 'value' => 'fas fa-star', 'library' => 'fa-solid' ] 380 * 381 * @param $value 382 * 383 * @return array 384 */ 385 public static function fa4_to_fa5_value_migration( $value ) { 386 static $migration_dictionary = false; 387 if ( '' === $value ) { 388 return [ 389 'value' => '', 390 'library' => '', 391 ]; 392 } 393 if ( false === $migration_dictionary ) { 394 $migration_dictionary = json_decode( file_get_contents( ELEMENTOR_ASSETS_PATH . 'lib/font-awesome/migration/mapping.js' ), true ); 395 } 396 if ( isset( $migration_dictionary[ $value ] ) ) { 397 return $migration_dictionary[ $value ]; 398 } 399 400 return [ 401 'value' => 'fas ' . str_replace( 'fa ', '', $value ), 402 'library' => 'fa-solid', 403 ]; 404 } 405 406 /** 407 * on_import_migration 408 * @param array $element settings array 409 * @param string $old_control old control id 410 * @param string $new_control new control id 411 * @param bool $remove_old boolean weather to remove old control or not 412 * 413 * @return array 414 */ 415 public static function on_import_migration( array $element, $old_control = '', $new_control = '', $remove_old = false ) { 416 417 if ( ! isset( $element['settings'][ $old_control ] ) || isset( $element['settings'][ $new_control ] ) ) { 418 return $element; 419 } 420 421 // Case when old value is saved as empty string 422 $new_value = [ 423 'value' => '', 424 'library' => '', 425 ]; 426 427 // Case when old value needs migration 428 if ( ! empty( $element['settings'][ $old_control ] ) && ! self::is_migration_allowed() ) { 429 $new_value = self::fa4_to_fa5_value_migration( $element['settings'][ $old_control ] ); 430 } 431 432 $element['settings'][ $new_control ] = $new_value; 433 434 //remove old value 435 if ( $remove_old ) { 436 unset( $element['settings'][ $old_control ] ); 437 } 438 439 return $element; 440 } 441 442 /** 443 * is_migration_allowed 444 * @return bool 445 */ 446 public static function is_migration_allowed() { 447 static $migration_allowed = false; 448 if ( false === $migration_allowed ) { 449 $migration_allowed = null === self::get_needs_upgrade_option(); 450 451 /** 452 * Is icon migration allowed. 453 * 454 * Filters whther the icons migration allowed. 455 * 456 * @param bool $migration_allowed Is icon migration is allowed. 457 */ 458 $migration_allowed = apply_filters( 'elementor/icons_manager/migration_allowed', $migration_allowed ); 459 } 460 return $migration_allowed; 461 } 462 463 /** 464 * Register_Admin Settings 465 * 466 * adds Font Awesome migration / update admin settings 467 * @param Settings $settings 468 */ 469 public function register_admin_settings( Settings $settings ) { 470 $settings->add_field( 471 Settings::TAB_ADVANCED, 472 Settings::TAB_ADVANCED, 473 'load_fa4_shim', 474 [ 475 'label' => esc_html__( 'Load Font Awesome 4 Support', 'elementor' ), 476 'field_args' => [ 477 'type' => 'select', 478 'std' => 'yes', 479 'options' => [ 480 '' => esc_html__( 'No', 'elementor' ), 481 'yes' => esc_html__( 'Yes', 'elementor' ), 482 ], 483 'desc' => esc_html__( 'Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library.', 'elementor' ), 484 ], 485 ] 486 ); 487 } 488 489 public function register_admin_tools_settings( Tools $settings ) { 490 $settings->add_tab( 'fontawesome4_migration', [ 'label' => esc_html__( 'Font Awesome Upgrade', 'elementor' ) ] ); 491 492 $settings->add_section( 'fontawesome4_migration', 'fontawesome4_migration', [ 493 'callback' => function() { 494 echo '<h2>' . esc_html__( 'Font Awesome Upgrade', 'elementor' ) . '</h2>'; 495 echo '<p>' . // PHPCS - Plain Text 496 __( 'Access 1,500+ amazing Font Awesome 5 icons and enjoy faster performance and design flexibility.', 'elementor' ) . '<br>' . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 497 __( 'By upgrading, whenever you edit a page containing a Font Awesome 4 icon, Elementor will convert it to the new Font Awesome 5 icon.', 'elementor' ) . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 498 '</p><p><strong>' . 499 __( 'Please note that the upgrade process may cause some of the previously used Font Awesome 4 icons to look a bit different due to minor design changes made by Font Awesome.', 'elementor' ) . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 500 '</strong></p><p>' . 501 __( 'The upgrade process includes a database update', 'elementor' ) . ' - ' . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 502 __( 'We highly recommend backing up your database before performing this upgrade.', 'elementor' ) . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 503 '</p>' . 504 __( 'This action is not reversible and cannot be undone by rolling back to previous versions.', 'elementor' ) . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 505 '</p>'; 506 }, 507 'fields' => [ 508 [ 509 'label' => esc_html__( 'Font Awesome Upgrade', 'elementor' ), 510 'field_args' => [ 511 'type' => 'raw_html', 512 'html' => sprintf( '<span data-action="%s" data-_nonce="%s" class="button" id="elementor_upgrade_fa_button">%s</span>', 513 self::NEEDS_UPDATE_OPTION . '_upgrade', 514 wp_create_nonce( self::NEEDS_UPDATE_OPTION ), 515 __( 'Upgrade To Font Awesome 5', 'elementor' ) 516 ), 517 ], 518 ], 519 ], 520 ] ); 521 } 522 523 /** 524 * Ajax Upgrade to FontAwesome 5 525 */ 526 public function ajax_upgrade_to_fa5() { 527 check_ajax_referer( self::NEEDS_UPDATE_OPTION, '_nonce' ); 528 529 delete_option( 'elementor_' . self::NEEDS_UPDATE_OPTION ); 530 531 wp_send_json_success( [ 'message' => '<p>' . esc_html__( 'Hurray! The upgrade process to Font Awesome 5 was completed successfully.', 'elementor' ) . '</p>' ] ); 532 } 533 534 /** 535 * Add Update Needed Flag 536 * @param array $settings 537 * 538 * @return array; 539 */ 540 public function add_update_needed_flag( $settings ) { 541 $settings['icons_update_needed'] = true; 542 return $settings; 543 } 544 545 public function enqueue_fontawesome_css() { 546 if ( ! self::is_migration_allowed() ) { 547 wp_enqueue_style( 'font-awesome' ); 548 } else { 549 $current_filter = current_filter(); 550 $load_shim = get_option( self::LOAD_FA4_SHIM_OPTION_KEY, false ); 551 if ( 'elementor/editor/after_enqueue_styles' === $current_filter ) { 552 self::enqueue_shim(); 553 } else if ( 'yes' === $load_shim ) { 554 self::enqueue_shim(); 555 } 556 } 557 } 558 559 /** 560 * @deprecated 3.1.0 561 */ 562 public function add_admin_strings() { 563 Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.1.0' ); 564 565 return []; 566 } 567 568 /** 569 * @since 3.0.0 570 * @deprecated 3.0.0 571 */ 572 public function register_ajax_actions() { 573 _deprecated_function( __METHOD__, '3.0.0' ); 574 } 575 576 /** 577 * @since 3.0.0. 578 * @deprecated 3.0.0 579 */ 580 public function ajax_enable_svg_uploads() { 581 _deprecated_function( __METHOD__, '3.0.0' ); 582 } 583 584 /** 585 * Icons Manager constructor 586 */ 587 public function __construct() { 588 if ( is_admin() ) { 589 // @todo: remove once we deprecate fa4 590 add_action( 'elementor/admin/after_create_settings/' . Settings::PAGE_ID, [ $this, 'register_admin_settings' ], 100 ); 591 } 592 593 if ( self::is_font_icon_inline_svg() ) { 594 self::$data_manager = new Font_Icon_Svg_Data_Manager(); 595 596 add_action( 'wp_footer', [ $this, 'render_svg_symbols' ], 10 ); 597 } 598 599 add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_fontawesome_css' ] ); 600 add_action( 'elementor/frontend/after_register_styles', [ $this, 'register_styles' ] ); 601 602 if ( ! self::is_migration_allowed() ) { 603 add_filter( 'elementor/editor/localize_settings', [ $this, 'add_update_needed_flag' ] ); 604 add_action( 'elementor/admin/after_create_settings/' . Tools::PAGE_ID, [ $this, 'register_admin_tools_settings' ], 100 ); 605 606 if ( ! empty( $_POST ) ) { // phpcs:ignore -- nonce validation done in callback 607 add_action( 'wp_ajax_' . self::NEEDS_UPDATE_OPTION . '_upgrade', [ $this, 'ajax_upgrade_to_fa5' ] ); 608 } 609 } 610 } 611 }