Changeset 62686

Timestamp:

07/10/2026 12:41:52 PM (3 months ago)

Author:

tyxla

Message:

Toolbar: Correctly preview site title and icon changes in the admin bar.

On Settings → General, live-previewing an unsaved site title change no
longer removes the admin bar site icon: the icon element is preserved and
re-prepended when the title text is updated.

Additionally, adding, changing, or removing the site icon is now
live-previewed in the admin bar, keeping the toolbar in sync with the
img.site-icon element and the has-site-icon class before the form is
saved.

Developed in: #12474.

Props fushar, tyxla.
Fixes #65606.

Location:

trunk/src

Files:

• js/_enqueues/admin/site-icon.js (modified) (3 diffs)
• wp-admin/includes/options.php (modified) (2 diffs)

trunk/src/js/_enqueues/admin/site-icon.js

@@ -15 +15 @@
                 $hiddenDataField = $( '#site_icon_hidden_field' ),
                 $removeButton = $( '#js-remove-site-icon' ),
+                $adminBarSiteName = $( '#wp-admin-bar-site-name' ),
+                $adminBarSiteNameLink = $adminBarSiteName.children( 'a' ).first(),
                 frame;
 
@@ -195 +197 @@
                 );
 
+                // Replace the site icon in the admin bar.
+                $adminBarSiteNameLink.children( 'img.site-icon' ).remove();
+                $( '<img />' )
+                        .attr( {
+                                class: 'site-icon',
+                                src: attributes.url,
+                                alt: '',
+                                width: 20,
+                                height: 20,
+                        } )
+                        .prependTo( $adminBarSiteNameLink );
+                $adminBarSiteName.addClass( 'has-site-icon' );
+
                 // If the choose button is not in the update state, swap the classes.
                 if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
@@ -225 +240 @@
                         alt: '',
                 } );
+
+                // Remove the site icon from the admin bar.
+                $adminBarSiteNameLink.children( 'img.site-icon' ).remove();
+                $adminBarSiteName.removeClass( 'has-site-icon' );
 
                 /**

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

@@ -41 +41 @@
 
                 $( '#blogname' ).on( 'input', function() {
-                        var title = $.trim( $( this ).val() ) || homeURL;
+                        var title = $.trim( $( this ).val() ) || homeURL,
+                                $siteIcon = $siteName.children();
 
                         // Truncate to 40 characters.
@@ -48 +49 @@
                         }
 
-                        $siteName.text( title );
+                        $siteName.text( title ).prepend( $siteIcon );
                         $siteIconPreview.text( title );
                 });