Changeset 62614 for trunk/src/wp-includes/css/admin-bar.css

Timestamp:

07/01/2026 06:08:42 PM (3 months ago)

Author:

scruffian

Message:

Toolbar: Show the site icon in the admin bar when one is set.

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20×20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/11781.

Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson.
Fixes #65088. See #46657, #64308.

File:

• trunk/src/wp-includes/css/admin-bar.css (modified) (8 diffs)

trunk/src/wp-includes/css/admin-bar.css

@@ -456 +456 @@
         width: 64px;
         height: 64px;
-        border-radius: 50%;
 }
 
@@ -483 +482 @@
 #wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
         width: auto;
-        height: 20px;
+        height: 16px;
         padding: 0;
-        border: 1px solid #2c353b;
-        border-radius: 50%;
+        border: 1px solid #8c8f94;
         background: #f0f0f1;
         line-height: 1.84615384;
@@ -540 +538 @@
 }
 
+#wpadminbar .quicklinks li img.blavatar {
+        border-radius: 2px;
+}
+
 #wpadminbar .quicklinks li div.blavatar:before {
         content: "\f120";
@@ -583 +585 @@
         content: "\f102";
         content: "\f102" / '';
+}
+
+#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+}
+
+#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item:before {
+        content: none;
+}
+
+#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
+        width: 20px;
+        height: 20px;
+        background: #f0f0f1; /* matching my-account (user avatar) node's background */
+        border-radius: 2px;
 }
 
@@ -906 +925 @@
         #wpadminbar #wp-admin-bar-edit > .ab-item:before,
         #wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
-        #wpadminbar #wp-admin-bar-site-name > .ab-item:before,
+        #wpadminbar #wp-admin-bar-site-name:not(.has-site-icon) > .ab-item:before,
         #wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
         #wpadminbar #wp-admin-bar-customize > .ab-item:before,
@@ -921 +940 @@
         }
 
+        #wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
+                position: absolute;
+                top: 9px;
+                left: 12px;
+                width: 28px;
+                height: 28px;
+                margin: 0;
+                border-radius: 4px;
+        }
+
         #wpadminbar #wp-admin-bar-appearance {
                 margin-top: 0;
@@ -972 +1001 @@
                 position: relative;
                 white-space: nowrap;
-                text-indent: 150%; /* More than 100% indentation is needed since this element has padding */
+                text-indent: 150%; /* More than 100% indention is needed since this element has padding */
                 width: 28px;
                 padding: 0 10px;
@@ -980 +1009 @@
         #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
                 position: absolute;
-                top: 12px;
+                top: 13px;
                 right: 10px;
-                width: 28px;
-                height: 28px;
-                border-radius: 50%;
+                width: 26px;
+                height: 26px;
         }