Update plugin browser to match standard WordPress interface

This commit is contained in:
Marcus Quinn
2025-03-16 04:15:52 +00:00
parent bc77df078d
commit abf39b1131
2 changed files with 291 additions and 51 deletions

View File

@ -0,0 +1,203 @@
/* Plugin List Container */
.wp-list-table-container {
margin-top: 20px;
position: relative;
min-height: 400px;
}
/* Plugin Cards */
.plugin-card {
float: left;
margin: 0 8px 16px;
width: calc(50% - 16px);
border: 1px solid #dcdcde;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
padding: 0;
}
.plugin-card-top {
padding: 20px 20px 10px;
position: relative;
min-height: 135px;
}
.plugin-card .name,
.plugin-card .desc {
margin-right: 120px;
}
.plugin-card .name h3 {
font-size: 15px;
line-height: 1.3;
margin: 0 0 12px;
}
.plugin-card .desc {
color: #646970;
font-size: 13px;
line-height: 1.5;
margin: 0 0 10px;
}
.plugin-card .plugin-card-bottom {
clear: both;
padding: 12px 20px;
background-color: #f6f7f7;
border-top: 1px solid #dcdcde;
overflow: hidden;
}
.plugin-card .column-rating {
line-height: 23px;
}
.plugin-card .column-updated,
.plugin-card .column-downloaded {
text-align: right;
color: #646970;
font-size: 13px;
}
.plugin-card .plugin-icon {
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 100px;
}
.plugin-card .action-links {
position: relative;
}
.plugin-action-buttons {
clear: right;
float: right;
margin-left: 2em;
margin-bottom: 1em;
text-align: right;
}
.plugin-action-buttons .button {
margin-right: 5px;
}
.plugin-card-bottom .star-rating {
display: inline-block;
vertical-align: middle;
}
/* Plugin Filters */
.wpa-plugin-filters {
margin: 20px 0;
padding: 12px 15px;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wpa-plugin-filters a {
margin: 0;
}
/* Loading Overlay */
.wpa-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
/* Theme Browser */
.theme-browser .theme {
cursor: pointer;
float: left;
margin: 0 4% 4% 0;
position: relative;
width: 30.6%;
border: 1px solid #dcdcde;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
box-sizing: border-box;
}
.theme-browser .theme .theme-screenshot {
display: block;
overflow: hidden;
position: relative;
background: #fff;
}
.theme-browser .theme .theme-screenshot img {
display: block;
width: 100%;
height: auto;
}
.theme-browser .theme .theme-name {
font-size: 15px;
font-weight: 600;
height: 48px;
margin: 0;
padding: 15px;
box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #f6f7f7;
position: relative;
}
.theme-browser .theme .theme-actions {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
bottom: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background: rgba(255, 255, 255, 0.9);
padding: 20px 0;
opacity: 0;
transition: opacity .1s ease-in-out;
}
.theme-browser .theme:hover .theme-actions {
opacity: 1;
}
.theme-browser .theme .theme-actions .button {
margin: 0;
}
/* Responsive Adjustments */
@media screen and (max-width: 1100px) {
.plugin-card {
width: calc(100% - 16px);
}
.theme-browser .theme {
width: 47%;
}
}
@media screen and (max-width: 782px) {
.theme-browser .theme {
width: 100%;
margin-right: 0;
}
}

View File

@ -215,29 +215,8 @@ function wp_allstars_ajax_get_plugins() {
if ($cached_data !== false) {
error_log('Using cached data for category: ' . $category);
try {
// Setup the list table with cached data
$GLOBALS['tab'] = 'plugin-install';
$_REQUEST['tab'] = 'plugin-install';
$_REQUEST['type'] = 'plugin-install';
set_current_screen('plugin-install');
$wp_list_table = _get_list_table('WP_Plugin_Install_List_Table', array(
'screen' => 'plugin-install'
));
// Override the items with our cached data
$wp_list_table->items = $cached_data->plugins;
$wp_list_table->set_pagination_args(array(
'total_items' => count($cached_data->plugins),
'per_page' => count($cached_data->plugins),
));
add_filter('plugin_install_action_links', 'wp_allstars_add_pro_button', 10, 2);
ob_start();
$wp_list_table->display();
$html = ob_get_clean();
// Generate plugin cards HTML
$html = wp_allstars_generate_plugin_cards($cached_data->plugins);
wp_send_json_success($html);
return;
} catch (Exception $e) {
@ -313,34 +292,8 @@ function wp_allstars_ajax_get_plugins() {
// Cache the results
wp_allstars_set_cached_plugins($category, $res);
// Setup the list table
$GLOBALS['tab'] = 'plugin-install';
$_REQUEST['tab'] = 'plugin-install';
$_REQUEST['type'] = 'plugin-install';
set_current_screen('plugin-install');
$wp_list_table = _get_list_table('WP_Plugin_Install_List_Table', array(
'screen' => 'plugin-install'
));
// Set the items directly
$wp_list_table->items = $plugins;
$wp_list_table->set_pagination_args(array(
'total_items' => count($plugins),
'per_page' => count($plugins),
));
add_filter('plugin_install_action_links', 'wp_allstars_add_pro_button', 10, 2);
ob_start();
$wp_list_table->display();
$html = ob_get_clean();
if (empty($html)) {
wp_send_json_error('Failed to generate plugin display HTML');
return;
}
// Generate plugin cards HTML
$html = wp_allstars_generate_plugin_cards($plugins);
wp_send_json_success($html);
} catch (Exception $e) {
@ -350,6 +303,88 @@ function wp_allstars_ajax_get_plugins() {
}
add_action('wp_ajax_wp_allstars_get_plugins', 'wp_allstars_ajax_get_plugins');
// Function to generate plugin cards HTML
function wp_allstars_generate_plugin_cards($plugins) {
if (empty($plugins)) {
return '<div class="notice notice-error"><p>No plugins found.</p></div>';
}
ob_start();
?>
<div class="wp-list-table widefat plugin-install">
<div id="the-list">
<?php foreach ($plugins as $plugin): ?>
<div class="plugin-card plugin-card-<?php echo esc_attr($plugin->slug); ?>">
<div class="plugin-card-top">
<div class="name column-name">
<h3>
<a href="<?php echo esc_url($plugin->homepage); ?>" target="_blank">
<?php echo esc_html($plugin->name); ?>
</a>
</h3>
</div>
<div class="action-links">
<ul class="plugin-action-buttons">
<?php
$status = install_plugin_install_status($plugin);
switch ($status['status']) {
case 'install':
echo '<li><a class="button button-primary install-now" data-slug="' . esc_attr($plugin->slug) . '" href="' . esc_url($status['url']) . '" aria-label="' . esc_attr(sprintf(__('Install %s now'), $plugin->name)) . '">' . __('Install Now') . '</a></li>';
break;
case 'update_available':
echo '<li><a class="button button-primary update-now" data-slug="' . esc_attr($plugin->slug) . '" href="' . esc_url($status['url']) . '" aria-label="' . esc_attr(sprintf(__('Update %s now'), $plugin->name)) . '">' . __('Update Now') . '</a></li>';
break;
case 'latest_installed':
case 'newer_installed':
if (is_plugin_active($status['file'])) {
echo '<li><button type="button" class="button button-disabled" disabled="disabled">' . __('Active') . '</button></li>';
} else {
echo '<li><a class="button activate-now" href="' . esc_url(wp_nonce_url(admin_url('plugins.php?action=activate&plugin=' . $status['file']), 'activate-plugin_' . $status['file'])) . '" aria-label="' . esc_attr(sprintf(__('Activate %s'), $plugin->name)) . '">' . __('Activate') . '</a></li>';
}
break;
}
// Add "Go Pro" button if applicable
$pro_plugins = wp_allstars_get_pro_plugins_config();
foreach ($pro_plugins as $pro_plugin) {
if (isset($pro_plugin['free_slug']) && $pro_plugin['free_slug'] === $plugin->slug) {
echo '<li><a class="button button-primary" href="' . esc_url($pro_plugin['url']) . '" target="_blank">' . esc_html__('Go Pro', 'wp-allstars') . '</a></li>';
break;
}
}
?>
</ul>
</div>
<div class="desc column-description">
<p><?php echo esc_html($plugin->short_description); ?></p>
</div>
<?php if (!empty($plugin->icons) && !empty($plugin->icons['1x'])): ?>
<div class="plugin-icon">
<img src="<?php echo esc_url($plugin->icons['1x']); ?>" alt="">
</div>
<?php endif; ?>
</div>
<div class="plugin-card-bottom">
<div class="vers column-rating">
<?php wp_star_rating(array('rating' => $plugin->rating, 'type' => 'percent', 'number' => $plugin->num_ratings)); ?>
<span class="num-ratings">(<?php echo number_format_i18n($plugin->num_ratings); ?>)</span>
</div>
<div class="column-updated">
<strong><?php _e('Last Updated:'); ?></strong>
<?php printf(__('%s ago'), human_time_diff(strtotime($plugin->last_updated))); ?>
</div>
<div class="column-downloaded">
<?php echo sprintf(_n('%s download', '%s downloads', $plugin->downloaded), number_format_i18n($plugin->downloaded)); ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php
return ob_get_clean();
}
// Helper function to add pro button to plugin cards
function wp_allstars_add_pro_button($action_links, $plugin) {
// Get pro plugins configuration
@ -622,6 +657,7 @@ function wp_allstars_settings_page() {
wp_enqueue_script('updates');
add_thickbox();
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
} elseif ($active_tab === 'theme') {
wp_allstars_clear_theme_cache();
require_once ABSPATH . 'wp-admin/includes/theme.php';
@ -629,6 +665,7 @@ function wp_allstars_settings_page() {
wp_enqueue_script('updates');
add_thickbox();
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
}
?>
<div class="wrap wp-allstars-wrap">