dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: WordPress media modal styling and WP-Admin icon rendering

Browse Source 
🐛 Two Visual Issues Fixed:

1. Standalone Media Modal Styling:
   ❌ Missing close button
   ❌ Messy layout
   ❌ Incomplete WordPress styles

   ✅ Added complete WordPress admin styles:
   - wp-admin (base admin styles)
   - common (common admin elements)
   - media-views (modal structure)
   - imgareaselect (image selection)
   - buttons (button styles)
   - dashicons (icon font)

   Result: Media modal now properly styled with close button

2. WP-Admin Icon Rendering:
   ❌ Icons showing filled instead of outlined
   ❌ WordPress admin CSS overriding Lucide icons

   ✅ Added inline CSS fix:
   - Force fill: none
   - Force stroke: currentColor
   - Force stroke-width: 2
   - Force stroke-linecap: round
   - Force stroke-linejoin: round

   Result: Icons now display as outlined (Lucide style)

📝 Root Causes:
1. Standalone needed full WP admin styles for modal
2. WP-Admin has global SVG styles that override icon libraries
3. !important needed to override WordPress specificity

🎯 Result:
- Standalone media modal fully functional and styled
- WP-Admin icons render correctly (outlined)
- Both modes visually consistent
This commit is contained in:
dwindown
2025-11-16 13:24:43 +07:00
parent 7e87e18a43
commit 61825c9ade
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
includes/Admin/Assets.php
View File

@@ -159,6 +159,19 @@ class Assets {
if (file_exists($dist_dir . $css)) { if (file_exists($dist_dir . $css)) {
wp_enqueue_style('wnw-admin', $base_url . $css, [], $ver_css); wp_enqueue_style('wnw-admin', $base_url . $css, [], $ver_css);
// Fix icon rendering in WP-Admin (prevent WordPress admin styles from overriding)
$icon_fix_css = '
/* Fix Lucide icons in WP-Admin - force outlined style */
#woonoow-admin-app svg {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
';
wp_add_inline_style('wnw-admin', $icon_fix_css);
} }
if (file_exists($dist_dir . $js)) { if (file_exists($dist_dir . $js)) {

4
includes/Admin/StandaloneAdmin.php
View File

@@ -112,11 +112,13 @@ class StandaloneAdmin {
<link rel="stylesheet" href="<?php echo esc_url( $css_url ); ?>"> <link rel="stylesheet" href="<?php echo esc_url( $css_url ); ?>">
<?php <?php
// Print WordPress media library styles (all required styles) // Print WordPress media library styles (complete set for proper modal)
wp_print_styles( 'media-views' ); wp_print_styles( 'media-views' );
wp_print_styles( 'imgareaselect' ); wp_print_styles( 'imgareaselect' );
wp_print_styles( 'buttons' ); wp_print_styles( 'buttons' );
wp_print_styles( 'dashicons' ); wp_print_styles( 'dashicons' );
wp_print_styles( 'wp-admin' );
wp_print_styles( 'common' );
?> ?>
</head> </head>
<body class="woonoow-standalone"> <body class="woonoow-standalone">