elementor / includes / managers / icons.php

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

612 lines 18.1 KB

Raw Download Zip

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	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
497	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
498	'</p><p><strong>' .
499	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
500	'</strong></p><p>' .
501	esc_html__( 'The upgrade process includes a database update', 'elementor' ) . ' - ' . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
502	esc_html__( 'We highly recommend backing up your database before performing this upgrade.', 'elementor' ) . // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
503	'</p>' .
504	esc_html__( '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	esc_html__( '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	}
612