Skip to content

Commit 6ec651a

Browse files
fusharfushar
committed
Admin: replace dashicons in admin bar and sidebar with @wordpress/icons
1 parent 96bdbe3 commit 6ec651a

12 files changed

Lines changed: 255 additions & 229 deletions

File tree

‎src/wp-admin/css/admin-menu.css‎

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -288,31 +288,55 @@
288288
background-size: 20px auto;
289289
}
290290

291+
#adminmenu div.wp-menu-image.svg-icon {
292+
display: flex;
293+
align-items: center;
294+
justify-content: center;
295+
}
296+
297+
#adminmenu div.wp-menu-image.svg-icon svg {
298+
width: 22px;
299+
height: 22px;
300+
fill: currentColor;
301+
transition: color .1s ease-in-out;
302+
}
303+
291304
div.wp-menu-image:before {
292305
color: #a7aaad;
293306
color: rgba(240, 246, 252, 0.6);
294307
padding: 7px 0;
295308
transition: all .1s ease-in-out;
296309
}
297310

298-
#adminmenu div.wp-menu-image:before {
311+
#adminmenu div.wp-menu-image:before,
312+
#adminmenu div.wp-menu-image.svg-icon svg {
299313
color: #a7aaad;
300314
color: rgba(240, 246, 252, 0.6);
301315
}
302316

303317
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
318+
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
304319
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
320+
#adminmenu .wp-has-current-submenu div.wp-menu-image.svg-icon svg,
305321
#adminmenu .current div.wp-menu-image:before,
322+
#adminmenu .current div.wp-menu-image.svg-icon svg,
306323
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
324+
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
307325
#adminmenu a.current:hover div.wp-menu-image:before,
326+
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
308327
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
309-
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
328+
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
329+
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
330+
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg {
310331
color: #fff;
311332
}
312333

313334
#adminmenu li:hover div.wp-menu-image:before,
335+
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
314336
#adminmenu li a:focus div.wp-menu-image:before,
315-
#adminmenu li.opensub div.wp-menu-image:before {
337+
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
338+
#adminmenu li.opensub div.wp-menu-image:before,
339+
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
316340
color: #72aee6;
317341
}
318342

@@ -323,6 +347,10 @@ div.wp-menu-image:before {
323347
z-index: 25;
324348
}
325349

350+
.folded #adminmenu div.wp-menu-image.svg-icon {
351+
height: 34px;
352+
}
353+
326354
.folded #adminmenu a.menu-top {
327355
height: 34px;
328356
}
@@ -493,6 +521,9 @@ ul#adminmenu > li.current > a.current:after {
493521
#collapse-button .collapse-button-icon {
494522
width: 36px;
495523
height: 34px;
524+
display: flex;
525+
align-items: center;
526+
justify-content: center;
496527
}
497528

498529
#collapse-button .collapse-button-label {
@@ -503,29 +534,25 @@ ul#adminmenu > li.current > a.current:after {
503534
display: none;
504535
}
505536

506-
#collapse-button .collapse-button-icon:after {
507-
content: "\f148";
508-
content: "\f148" / '';
509-
display: block;
537+
#collapse-button .collapse-button-icon svg {
538+
width: 22px;
539+
height: 22px;
540+
fill: currentColor;
510541
position: relative;
511-
top: 7px;
512-
text-align: center;
513-
font: normal 20px/1 dashicons !important;
514-
-webkit-font-smoothing: antialiased;
515-
-moz-osx-font-smoothing: grayscale;
542+
top: -1px;
516543
}
517544

518545
/* rtl:ignore */
519-
.folded #collapse-button .collapse-button-icon:after,
520-
.rtl #collapse-button .collapse-button-icon:after {
546+
.folded #collapse-button .collapse-button-icon svg,
547+
.rtl #collapse-button .collapse-button-icon svg {
521548
transform: rotate(180deg);
522549
}
523550

524-
.rtl.folded #collapse-button .collapse-button-icon:after {
551+
.rtl.folded #collapse-button .collapse-button-icon svg {
525552
transform: none;
526553
}
527554

528-
#collapse-button .collapse-button-icon:after,
555+
#collapse-button .collapse-button-icon svg,
529556
#collapse-button .collapse-button-label {
530557
transition: all .1s ease-in-out;
531558
}
@@ -609,6 +636,10 @@ li#wp-admin-bar-menu-toggle {
609636
z-index: 25;
610637
}
611638

639+
.auto-fold #adminmenu div.wp-menu-image.svg-icon {
640+
height: 34px;
641+
}
642+
612643
.auto-fold #adminmenu a.menu-top {
613644
min-height: 34px;
614645
}
@@ -650,11 +681,11 @@ li#wp-admin-bar-menu-toggle {
650681
}
651682

652683
/* rtl:ignore */
653-
.auto-fold #collapse-button .collapse-button-icon:after {
684+
.auto-fold #collapse-button .collapse-button-icon svg {
654685
transform: rotate(180deg);
655686
}
656687

657-
.rtl.auto-fold #collapse-button .collapse-button-icon:after {
688+
.rtl.auto-fold #collapse-button .collapse-button-icon svg {
658689
transform: none;
659690
}
660691

@@ -814,26 +845,25 @@ li#wp-admin-bar-menu-toggle {
814845
border: 1px solid transparent;
815846
}
816847

817-
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
818-
content: "\f228";
819-
display: inline-block;
848+
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
849+
display: flex;
850+
align-items: center;
851+
justify-content: center;
820852
float: left;
821-
font: normal 40px/45px dashicons;
822-
vertical-align: middle;
823-
outline: none;
824853
margin: 0;
825-
-webkit-font-smoothing: antialiased;
826-
-moz-osx-font-smoothing: grayscale;
827854
height: 44px;
828855
width: 50px;
829856
padding: 0;
830857
border: none;
831-
text-align: center;
832-
text-decoration: none;
833858
box-sizing: border-box;
834859
}
835860

836-
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
861+
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon svg {
862+
width: 36px;
863+
height: 36px;
864+
}
865+
866+
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
837867
color: #72aee6;
838868
}
839869
}

‎src/wp-admin/css/colors/_admin.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,8 @@ input[type="radio"]:focus {
259259
color: variables.$menu-text;
260260
}
261261

262-
#adminmenu div.wp-menu-image:before {
262+
#adminmenu div.wp-menu-image:before,
263+
#adminmenu div.wp-menu-image.svg-icon svg {
263264
color: variables.$menu-icon;
264265
}
265266

@@ -272,7 +273,9 @@ input[type="radio"]:focus {
272273
}
273274

274275
#adminmenu li.menu-top:hover div.wp-menu-image:before,
275-
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
276+
#adminmenu li.menu-top:hover div.wp-menu-image.svg-icon svg,
277+
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before,
278+
#adminmenu li.opensub > a.menu-top div.wp-menu-image.svg-icon svg {
276279
color: variables.$menu-highlight-icon;
277280
}
278281

@@ -343,13 +346,21 @@ ul#adminmenu > li.current > a.current:after {
343346
}
344347

345348
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
349+
#adminmenu li.wp-has-current-submenu div.wp-menu-image.svg-icon svg,
346350
#adminmenu a.current:hover div.wp-menu-image:before,
351+
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
347352
#adminmenu li.current div.wp-menu-image:before,
353+
#adminmenu li.current div.wp-menu-image.svg-icon svg,
348354
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
355+
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
349356
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
357+
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg,
350358
#adminmenu li:hover div.wp-menu-image:before,
359+
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
351360
#adminmenu li a:focus div.wp-menu-image:before,
352-
#adminmenu li.opensub div.wp-menu-image:before {
361+
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
362+
#adminmenu li.opensub div.wp-menu-image:before,
363+
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
353364
color: variables.$menu-current-icon;
354365
}
355366

@@ -419,6 +430,7 @@ ul#adminmenu > li.current > a.current:after {
419430
color: variables.$menu-submenu-focus-text;
420431
}
421432

433+
#wpadminbar:not(.mobile) li:hover .ab-icon,
422434
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
423435
#wpadminbar:not(.mobile) li:hover .ab-item:before,
424436
#wpadminbar:not(.mobile) li:hover .ab-item:after,
@@ -459,11 +471,15 @@ ul#adminmenu > li.current > a.current:after {
459471
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
460472
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
461473
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
474+
#wpadminbar li:hover .ab-icon,
462475
#wpadminbar li:hover .ab-icon:before,
463476
#wpadminbar li:hover .ab-item:before,
477+
#wpadminbar li a:focus .ab-icon,
464478
#wpadminbar li a:focus .ab-icon:before,
465479
#wpadminbar li .ab-item:focus:before,
480+
#wpadminbar li .ab-item:focus .ab-icon,
466481
#wpadminbar li .ab-item:focus .ab-icon:before,
482+
#wpadminbar li.hover .ab-icon,
467483
#wpadminbar li.hover .ab-icon:before,
468484
#wpadminbar li.hover .ab-item:before,
469485
#wpadminbar li:hover #adminbarsearch:before,
@@ -475,11 +491,13 @@ ul#adminmenu > li.current > a.current:after {
475491
#wpadminbar .quicklinks li a:focus .blavatar,
476492
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
477493
#wpadminbar .menupop .menupop > .ab-item:hover:before,
494+
#wpadminbar.mobile .quicklinks .hover .ab-icon,
478495
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
479496
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
480497
color: variables.$menu-submenu-focus-text;
481498
}
482499

500+
#wpadminbar.mobile .quicklinks .ab-icon,
483501
#wpadminbar.mobile .quicklinks .ab-icon:before,
484502
#wpadminbar.mobile .quicklinks .ab-item:before {
485503
color: variables.$menu-icon;

‎src/wp-admin/includes/options.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ function options_general_add_js() {
3636
<script>
3737
jQuery( function($) {
3838
var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
39+
$siteNameIcon = $siteName.children( '.ab-icon' ),
3940
$siteIconPreview = $('#site-icon-preview-site-title'),
4041
homeURL = ( <?php echo wp_json_encode( get_home_url(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
4142

@@ -47,7 +48,7 @@ function options_general_add_js() {
4748
title = title.substring( 0, 40 ) + '\u2026';
4849
}
4950

50-
$siteName.text( title );
51+
$siteName.text( title ).prepend( $siteNameIcon );
5152
$siteIconPreview.text( title );
5253
});
5354

‎src/wp-admin/menu-header.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,14 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
137137
// The value is base64-encoded data, so esc_attr() is used here instead of esc_url().
138138
$img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';
139139
$img_class = ' svg';
140+
} elseif ( str_starts_with( $item[6], 'core/' ) ) {
141+
$icon = wp_get_icon( $item[6], array( 'size' => 22 ) );
142+
if ( '' !== $icon ) {
143+
$img = $icon;
144+
$img_class = ' svg-icon';
145+
} else {
146+
$img = '<br />';
147+
}
140148
} elseif ( str_starts_with( $item[6], 'dashicons-' ) ) {
141149
$img = '<br />';
142150
$img_class = ' dashicons-before ' . sanitize_html_class( $item[6] );
@@ -283,7 +291,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
283291

284292
echo '<li id="collapse-menu" class="hide-if-no-js">' .
285293
'<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main Menu' ) . '" aria-expanded="true">' .
286-
'<span class="collapse-button-icon" aria-hidden="true"></span>' .
294+
'<span class="collapse-button-icon" aria-hidden="true">' . wp_get_icon( 'core/chevron-left', array( 'size' => 22 ) ) . '</span>' .
287295
'<span class="collapse-button-label">' . __( 'Collapse Menu' ) . '</span>' .
288296
'</button></li>';
289297
}

0 commit comments

Comments
 (0)