PluginProbe
Elementor Website Builder – more than just a page builder / 3.7.7
Elementor Website Builder – more than just a page builder v3.7.7
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 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
elementor / includes / managers / icons.php

icons.php in Elementor Website Builder – more than just a page builder 3.7.7, at includes/managers/icons.php

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