fix: use own useful plugin icons, add hook only if in editor or useful plugins page (#3664)

* use own plugin icons, add hook only if in editor or useful plugins page

* use add_filter directly

* return args

Author: kaeizen

src/welcome/images/cimo-icon.png

@@ -1,5 +1,8 @@
+import CimoIcon from './images/cimo-icon.png'
+import InteractionsIcon from './images/interactions-icon.png'
+
 import {
-	i18n, usefulPlugins, ajaxUrl, installerNonce, activateNonce,
+	i18n, usefulPlugins, ajaxUrl, installerNonce, activateNonce, srcUrl,
 } from 'stackable'
 
 import { Button, Spinner } from '@wordpress/components'
@@ -10,10 +13,12 @@ import { __ } from '@wordpress/i18n'
 // List of plugins to display in the Useful Plugins section
 const PLUGINS = [ {
 	id: 'interactions',
+	icon: InteractionsIcon,
 	title: __( 'Interactions', i18n ),
 	description: __( 'Easily add animations and interactive experiences to your web pages using the block editor. Craft interactions from subtle hover effects to attention-grabbing story-telling animations.', i18n ),
 }, {
 	id: 'cimo-image-optimizer',
+	icon: CimoIcon,
 	title: __( 'Cimo - Image Optimizer', i18n ),
 	description: __( 'A game-changer for image optimization. Cimo optimizes and converts your images instantly as you upload — even before the files are added to your Media Library.', i18n ),
 } ]
@@ -101,20 +106,10 @@ const PluginCard = ( { plugin } ) => {
 		} )
 	}
 
-	// Validate URL before using
-	const isValidUrl = url => {
-		try {
-			const parsed = new URL( url )
-			return [ 'http:', 'https:' ].includes( parsed.protocol )
-		} catch {
-			return false
-		}
-	}
-
 	return <div key={ plugin.id } className="s-card">
 		<div className="s-plugin-title">
-			{ pluginData.icon && isValidUrl( pluginData.icon ) && (
-				<img className="s-plugin-icon" src={ pluginData.icon } alt={ __( 'Plugin icon', i18n ) } />
+			{ plugin.icon && (
+				<img className="s-plugin-icon" src={ `${ srcUrl }/${ plugin.icon }` } alt={ __( 'Plugin icon', i18n ) } />
 			) }
 			<h3 className="s-card-title">{ plugin.title }</h3>
 		</div>

src/welcome/images/interactions-icon.png

@@ -25,10 +25,6 @@ class Stackable_Useful_Plugins {
 		);
 
 		function __construct() {
-			// Register action on 'admin_menu' to ensure filters for the editor and admin settings
-			// are added early, before those scripts are enqueued and filters are applied.
-			add_action( 'admin_menu', array( $this, 'get_useful_plugins_info' ) );
-
 			// use WordPress ajax installer
 			// see Docs: https://developer.wordpress.org/reference/functions/wp_ajax_install_plugin/
 			add_action('wp_ajax_stackable_useful_plugins_activate', array( $this, 'do_plugin_activate' ) );
@@ -38,6 +34,13 @@ function __construct() {
 			add_action('wp_ajax_stackable_check_cimo_status', array( $this, 'check_cimo_status' ) );
 
 			if ( is_admin() ) {
+				add_filter( 'stackable_localize_settings_script', function ( $args ) {
+					return $this->get_useful_plugins_info( $args, array( $this, 'add_args_to_localize_admin' ) );
+				} );
+				add_filter( 'stackable_localize_script', function ( $args ) {
+					return $this->get_useful_plugins_info( $args, array( $this, 'add_cimo_args_to_localize_editor' ),
+					[ 'cimo-image-optimizer' => self::$PLUGINS[ 'cimo-image-optimizer' ] ] );
+				}, 1 );
 				add_filter( 'stackable_localize_script', array( $this, 'localize_hide_cimo_notice' ) );
 			}
 		}
@@ -68,18 +71,19 @@ public static function is_plugin_activated( $plugin_slug ) {
 		}
 
 
-		public function get_useful_plugins_info() {
+		public function get_useful_plugins_info( $args, $callback, $plugin_config = null ) {
+			if ( $plugin_config === null ) {
+				$plugin_config = self::$PLUGINS;
+			}
+
 			$current_user_cap = current_user_can( 'install_plugins' ) ? 2 : (
 				current_user_can( 'activate_plugins') ? 1 : 0
 			);
 
 			if ( ! $current_user_cap ) {
-				return;
+				return $args;
 			}
 
-			if ( ! function_exists( 'plugins_api' ) ) {
-				include_once( ABSPATH . 'wp-admin/includes/plugin-install.php' );
-			}
 			if ( ! function_exists( 'get_plugins' ) || ! function_exists( 'is_plugin_active' ) ) {
 				include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
 			}
@@ -88,7 +92,7 @@ public function get_useful_plugins_info() {
 			$data_to_localize = array();
 
 			$has_premium = false;
-			foreach ( self::$PLUGINS as $key => $plugin ) {
+			foreach ( $plugin_config as $key => $plugin ) {
 				$status = 'not_installed';
 				$full_slug_to_use = $plugin['full_slug'];
 
@@ -120,35 +124,21 @@ public function get_useful_plugins_info() {
 					}
 				}
 
-				$plugin_info = plugins_api( 'plugin_information', [
-					'slug' => $plugin['slug'],
-					'fields' => [ 'icons' => true, 'sections' => false ],
-				] );
-
-				$icon_url = '';
-				if ( ! is_wp_error( $plugin_info ) && isset( $plugin_info->icons )
-					&& is_array( $plugin_info->icons ) && ! empty( $plugin_info->icons )
-				) {
-					$icon_url = array_values( $plugin_info->icons )[0];
-				}
-
 				$data_to_localize[ $key ] = array(
 					'status' => $status,
-					'icon'   => $icon_url,
 					'fullSlug' => $full_slug_to_use,
 				);
 			}
 
-			// Make Cimo available in the block editor
-			$this->add_cimo_args_to_localize_editor( $data_to_localize, $current_user_cap, $has_premium );
-			// Make all plugin data and the ajax url available in the admin settings
-			$this->add_args_to_localize_admin( $data_to_localize );
+			$args = call_user_func( $callback, $args, $data_to_localize, $current_user_cap, $has_premium );
+
+			return $args;
 		}
 
-		public function add_cimo_args_to_localize_editor( $data_to_localize, $current_user_cap, $has_premium ) {
+		public function add_cimo_args_to_localize_editor( $args, $data_to_localize, $current_user_cap, $has_premium ) {
 			$slug = 'cimo-image-optimizer';
 			if ( ! isset( $data_to_localize[ $slug ] ) ) {
-				return;
+				return $args;
 			}
 			$full_slug = $data_to_localize[ $slug ][ 'fullSlug' ];
 
@@ -180,23 +170,18 @@ public function add_cimo_args_to_localize_editor( $data_to_localize, $current_us
 
 			$cimo_data[ 'action' ] = html_entity_decode( $action_link );
 
-			add_filter( 'stackable_localize_script', function ( $args ) use( $cimo_data ) {
-				return $this->add_localize_script( $args, 'cimo', $cimo_data );
-			}, 1 );
-
+			return $this->add_localize_script( $args, 'cimo', $cimo_data );
 		}
 
-		public function add_args_to_localize_admin( $data_to_localize ) {
+		public function add_args_to_localize_admin( $args, $data_to_localize ) {
 			$argsToAdd = array(
 				'usefulPlugins' => $data_to_localize,
 				'installerNonce' => wp_create_nonce( "updates" ),
 				'activateNonce' => wp_create_nonce( "stk_activate_useful_plugin" ),
 				'ajaxUrl' => admin_url('admin-ajax.php')
 			);
 
-			add_filter( 'stackable_localize_settings_script', function ( $args ) use( $argsToAdd ) {
-				return $this->add_localize_script( $args, '', $argsToAdd );
-			} );
+			return $this->add_localize_script( $args, '', $argsToAdd );
 		}
 
 		public function add_localize_script( $args, $arg_key, $data ) {