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

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

@@ -27,7 +27,16 @@ 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' ) );
+			// Only add this action if we're on the useful plugins page or post.php
+			global $pagenow;
+
+			$page = isset( $_GET['page'] ) ? sanitize_text_field( $_GET['page'] ) : '';
+			$is_useful_plugins_page = ( $page === 'stackable-useful-plugins' );
+			$is_post_editor = ( $pagenow === 'post.php' );
+
+			if ( $is_useful_plugins_page || $is_post_editor ) {
+				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/
@@ -77,9 +86,6 @@ public function get_useful_plugins_info() {
 				return;
 			}
 
-			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' );
 			}
@@ -120,21 +126,8 @@ 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,
 				);
 			}