Ticket #28785: 28785-plugin-custom-icons.4.diff

src/wp-admin/css/list-tables.css

@@ -1297 +1297 @@
 }
 
 .plugin-card h4 {
-        float: left;
         margin: 0 0 12px;
         font-size: 18px;
 }
 
-.plugin-card .desc {
-        clear: left;
-}
-
 .plugin-action-buttons {
+        clear: right;
         float: right;
         margin-left: 2em;
         margin-bottom: 1em;
@@ -1350 +1346 @@
         clear: right;
 }
 
+.plugin-icon {
+        width: 128px;
+        height: 128px;
+        float: left;
+        margin: 0 1em 1em 0;
+}
+
 /* ms */
 /* Background Color for Site Status */
 .wp-list-table .site-deleted {

src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -98 +98 @@
                 $args = array(
                         'page' => $paged,
                         'per_page' => $per_page,
-                        'fields' => array( 'last_updated' => true, 'downloaded' => true ),
+                        'fields' => array( 'last_updated' => true, 'downloaded' => true, 'icons' => true, 'banners' => true ),
                         // Send the locale and installed plugin slugs to the API so it can provide context-sensitive results.
                         'locale' => get_locale(),
                         'installed_plugins' => $this->get_installed_plugin_slugs(),
@@ -398 +398 @@
                         /* translators: 1: Plugin name and version. */
                         $action_links[] = '<a href="' . esc_url( $details_link ) . '" class="thickbox" aria-label="' . esc_attr( sprintf( __( 'More information about %s' ), $name ) ) . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
 
+                        if ( !empty( $plugin['icons']['high'] ) )
+                                $plugin_icon_url = $plugin['icons']['high'];
+                        elseif ( !empty( $plugin['icons']['low'] ) )
+                                $plugin_icon_url = $plugin['icons']['low'];
+                        else
+                                $plugin_icon_url = $plugin['icons']['default'];
 
                         /**
                          * Filter the install action links for a plugin.
@@ -411 +417 @@
                 ?>
                 <div class="plugin-card">
                         <div class="plugin-card-top">
+                                <a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><img src="<?php echo esc_attr( $plugin_icon_url ) ?>" class="plugin-icon" /></a>
+                                <div class="action-links">
+                                        <?php
+                                                if ( ! empty( $action_links ) ) {
+                                                        echo '<ul class="plugin-action-buttons"><li>' . implode( '</li><li>', $action_links ) . '</li></ul>';
+                                                }
+                                        ?>
+                                </div>
                                 <div class="name column-name">
                                         <h4><a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><?php echo $title; ?></a></h4>
-                                        <div class="action-links">
-                                                <?php
-                                                        if ( ! empty( $action_links ) ) {
-                                                                echo '<ul class="plugin-action-buttons"><li>' . implode( '</li><li>', $action_links ) . '</li></ul>';
-                                                        }
-                                                ?>
-                                        </div>
                                 </div>
                                 <div class="desc column-description">
                                         <p><?php echo $description; ?></p>

src/wp-admin/js/plugin-install.js

@@ -38 +38 @@
                 tb_position();
         });
 
-        $('.plugin-card').on( 'click', 'a.thickbox', function() {
-                tb_click.call(this);
+        $('.plugin-card').on( 'click', function( e ) {
+                // Don't trigger thickbox if a link that doesn't have the proper class to do so (EGs: link to dev site & install button).
+                if ( $( e.target ).is( 'a' ) && ! $( e.target ).is( 'a.thickbox' ) )
+                        return true;
 
+                tb_click.call( $('a.thickbox', this)[0] ); // use the URL of the first thickbox link in the card
+
                 $('#TB_title').css({'background-color':'#222','color':'#cfcfcf'});
                 $('#TB_ajaxWindowTitle').html( '<strong>' + plugininstallL10n.plugin_information + '</strong>&nbsp;' + $(this).data( 'title' ) );
                 $('#TB_iframeContent').attr( 'title', plugininstallL10n.plugin_information + ' ' + $(this).data( 'title' ) );