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: WordPress#12474.

Props fushar, tyxla.
Fixes #65606.

git-svn-id: https://develop.svn.wordpress.org/trunk@62686 602fd350-edb4-49c9-b593-d223f7449a82

Author: tyxla

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

@@ -14,6 +14,8 @@
 		$appIconPreview = $( '#app-icon-preview' ),
 		$hiddenDataField = $( '#site_icon_hidden_field' ),
 		$removeButton = $( '#js-remove-site-icon' ),
+		$adminBarSiteName = $( '#wp-admin-bar-site-name' ),
+		$adminBarSiteNameLink = $adminBarSiteName.children( 'a' ).first(),
 		frame;
 
 	/**
@@ -194,6 +196,19 @@
 			'url(' + attributes.url + ')'
 		);
 
+		// 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' ) {
 			$chooseButton.attr( {
@@ -225,6 +240,10 @@
 			alt: '',
 		} );
 
+		// Remove the site icon from the admin bar.
+		$adminBarSiteNameLink.children( 'img.site-icon' ).remove();
+		$adminBarSiteName.removeClass( 'has-site-icon' );
+
 		/**
 		 * Resets state to the button, for correct visual style and state.
 		 * Updates the text of the button.

src/wp-admin/includes/options.php

@@ -40,14 +40,15 @@ function options_general_add_js() {
 			homeURL = ( <?php echo wp_json_encode( get_home_url(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
 
 		$( '#blogname' ).on( 'input', function() {
-			var title = $.trim( $( this ).val() ) || homeURL;
+			var title = $.trim( $( this ).val() ) || homeURL,
+				$siteIcon = $siteName.children();
 
 			// Truncate to 40 characters.
 			if ( 40 < title.length ) {
 				title = title.substring( 0, 40 ) + '\u2026';
 			}
 
-			$siteName.text( title );
+			$siteName.text( title ).prepend( $siteIcon );
 			$siteIconPreview.text( title );
 		});