From 3ab40abac2f7e3290e31800135d40ca2d87d9b8a Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:50:33 -0400
Subject: [PATCH 01/31] Add JavaScript file

---
 Gruntfile.js                        |   1 +
 src/js/_enqueues/admin/site-icon.js | 158 ++++++++++++++++++++++++++++
 src/wp-includes/script-loader.php   |   2 +
 3 files changed, 161 insertions(+)
 create mode 100644 src/js/_enqueues/admin/site-icon.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 38904c6dac170..7d6981248f199 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -332,6 +332,7 @@ module.exports = function(grunt) {
 					[ WORKING_DIR + 'wp-admin/js/tags-suggest.js' ]: [ './src/js/_enqueues/admin/tags-suggest.js' ],
 					[ WORKING_DIR + 'wp-admin/js/tags.js' ]: [ './src/js/_enqueues/admin/tags.js' ],
 					[ WORKING_DIR + 'wp-admin/js/site-health.js' ]: [ './src/js/_enqueues/admin/site-health.js' ],
+					[ WORKING_DIR + 'wp-admin/js/site-icon.js' ]: [ './src/js/_enqueues/admin/site-icon.js' ],
 					[ WORKING_DIR + 'wp-admin/js/privacy-tools.js' ]: [ './src/js/_enqueues/admin/privacy-tools.js' ],
 					[ WORKING_DIR + 'wp-admin/js/theme-plugin-editor.js' ]: [ './src/js/_enqueues/wp/theme-plugin-editor.js' ],
 					[ WORKING_DIR + 'wp-admin/js/theme.js' ]: [ './src/js/_enqueues/wp/theme.js' ],
diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
new file mode 100644
index 0000000000000..4aa486953d259
--- /dev/null
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -0,0 +1,158 @@
+(function($) {
+	var frame;
+
+	const calculateImageSelectOptions = function(attachment, controller) {
+		var control    = controller.get( 'control' ),
+			flexWidth  = false,
+			flexHeight = false,
+			realWidth  = attachment.get( 'width' ),
+			realHeight = attachment.get( 'height' ),
+			xInit = 512,
+			yInit = 512,
+			ratio = xInit / yInit,
+			xImg  = xInit,
+			yImg  = yInit,
+			x1, y1, imgSelectOptions;
+
+		if ( realWidth / realHeight > ratio ) {
+			yInit = realHeight;
+			xInit = yInit * ratio;
+		} else {
+			xInit = realWidth;
+			yInit = xInit / ratio;
+		}
+
+		x1 = ( realWidth - xInit ) / 2;
+		y1 = ( realHeight - yInit ) / 2;
+
+		imgSelectOptions = {
+			aspectRatio: xInit + ':' + yInit,
+			handles: true,
+			keys: true,
+			instance: true,
+			persistent: true,
+			imageWidth: realWidth,
+			imageHeight: realHeight,
+			minWidth: xImg > xInit ? xInit : xImg,
+			minHeight: yImg > yInit ? yInit : yImg,
+			x1: x1,
+			y1: y1,
+			x2: xInit + x1,
+			y2: yInit + y1
+		};
+
+		return imgSelectOptions;
+	};
+
+	$( function() {
+		// Build the choose from library frame.
+		$( '#choose-from-library-link' ).on( 'click', function( event ) {
+			var $el = $(this);
+			event.preventDefault();
+
+			// If the media frame already exists, reopen it.
+			if ( frame ) {
+				frame.open();
+				return;
+			}
+
+			// Create the media frame.
+			frame = wp.media({
+				button: {
+					// Set the text of the button.
+					text: $el.data('update'),
+					// don't close, we might need to crop
+					close: false
+				},
+				states: [
+					new wp.media.controller.Library({
+						title: $el.data( 'choose' ),
+						library: wp.media.query({ type: 'image' }),
+						date: false,
+						suggestedWidth: $el.data( 'size' ),
+						suggestedHeight: $el.data( 'size' )
+					}),
+					new wp.media.controller.SiteIconCropper({
+						control: {
+							params: {
+								width: $el.data( 'size' ),
+								height: $el.data( 'size' )
+							}
+						},
+						imgSelectOptions: calculateImageSelectOptions,
+					})
+				]
+			});
+
+			frame.on( 'cropped', function( attachment) {
+				// set state back
+				frame.reset();
+				$( '#site_icon_hidden_field' ).val(attachment.id);
+				switchToUpdate(attachment.url);
+				frame.close();
+			});
+
+			// When an image is selected, run a callback.
+			frame.on( 'select', function() {
+				// Grab the selected attachment.
+				var attachment = frame.state().get('selection').first(),
+					link = $el.data('updateLink');
+
+				if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) {
+					// set the value of the hidden input to the attachment id
+					$( '#site_icon_hidden_field').val(attachment.id);
+					switchToUpdate(attachment.attributes.url);
+					// close the model
+					console.log( 'closing');
+					frame.close();
+				} else {
+					console.log( 'cropper');
+					frame.setState( 'cropper' );
+				}
+			});
+
+			frame.open();
+		});
+	});
+
+	function switchToUpdate( url ){
+		// set site-icon-img src to the url and remove the hidden class
+		$( '#site-icon-img' ).attr( 'src', url );
+		$( '#site-icon-img' ).removeClass( 'hidden' );
+		// remove hidden class from remove
+		$( '#js-remove-site-icon' ).removeClass( 'hidden' );
+		// tmp store the classes of the #choose-from-library-link button
+		// if the button is not in the update state, swap the classes
+		if( $( '#choose-from-library-link' ).attr('data-state') !== '1' ){
+			var classes = $( '#choose-from-library-link' ).attr( 'class' );
+			$( '#choose-from-library-link' ).attr('class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
+			$( '#choose-from-library-link' ).attr('data-alt-classes', classes );
+			$( '#choose-from-library-link' ).attr('data-state', '1')
+		}
+
+		// swap the text of the button
+		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr('data-update-text') );
+	}
+
+	$( '#js-remove-site-icon' ).on( 'click', function( event ) {
+		// set the value of the hidden input to blank
+		$( '#site_icon_hidden_field').val('false');
+		//  toggle hidden class on site-icon-img
+		$( '#site-icon-img' ).toggleClass( 'hidden' );
+		// toggle hidden class on remove button
+		$( this ).toggleClass( 'hidden' );
+
+		// tmp store the classes of the #choose-from-library-link button
+		var classes = $( '#choose-from-library-link' ).attr('class');
+		$( '#choose-from-library-link' ).attr('class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
+		$( '#choose-from-library-link' ).attr('data-alt-classes', classes );
+
+		// swap the text of the button
+		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr('data-choose-text') );
+
+		$( '#choose-from-library-link' ).attr('data-state', '')
+
+		// prevent the default action
+		event.preventDefault();
+	});
+}(jQuery));
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 25977a9bd776d..6119c57789d76 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -846,6 +846,8 @@ function wp_default_scripts( $scripts ) {
 
 	$scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 );
 
+	$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery', 'jcrop' ), false, 1 );
+
 	// WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source.
 	$scripts->add( 'prototype', 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1' );
 	$scripts->add( 'scriptaculous-root', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js', array( 'prototype' ), '1.9.0' );

From 6ad7148547c3c1e1cc10b83c51f2eff87388cea3 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:51:29 -0400
Subject: [PATCH 02/31] Style upload button

---
 src/wp-admin/css/forms.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index bdceac04c402b..9c51c7dae6d37 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -782,6 +782,30 @@ ul#add-to-blog-users {
 	outline: 2px solid transparent;
 }
 
+.button-add-site-icon{
+	width: 100%;
+	cursor: pointer;
+	text-align: center;
+    cursor: default;
+    border: 1px dashed #c3c4c7;
+    box-sizing: border-box;
+    padding: 9px 0;
+    line-height: 1.6;
+	max-width: 270px;
+}
+
+.button-add-site-icon:hover{
+	background: white;
+}
+
+.button-ad-site-icon:focus{
+	background-color: #fff;
+    border-color: #3582c4;
+    border-style: solid;
+    box-shadow: 0 0 0 1px #3582c4;
+    outline: 2px solid transparent;
+}
+
 /*------------------------------------------------------------------------------
   15.0 - Comments Screen
 ------------------------------------------------------------------------------*/

From e722ab667904097cd68c4c6db943ed53309c60b0 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:52:06 -0400
Subject: [PATCH 03/31] allow the option to be saved

---
 src/wp-admin/options.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wp-admin/options.php b/src/wp-admin/options.php
index 3e2e104214747..33779a7492515 100644
--- a/src/wp-admin/options.php
+++ b/src/wp-admin/options.php
@@ -90,6 +90,7 @@
 	'general'    => array(
 		'blogname',
 		'blogdescription',
+		'site_icon',
 		'gmt_offset',
 		'date_format',
 		'time_format',

From 65d9c5e9002f9cee6ef8dbc5792156c42c724038 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:52:51 -0400
Subject: [PATCH 04/31] ensure image and crop sidebar don't overlap

---
 src/wp-includes/css/media-views.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 95c0dc5a31e88..25995f69090f3 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -855,10 +855,12 @@
 	height: 100%;
 }
 
+.options-general-php .crop-content.site-icon,
 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
-	margin-right: 300px;
+	margin-right: 0;
 }
 
+
 .media-frame-content .crop-content .crop-image {
 	display: block;
 	margin: auto;

From 6b4a7eba4bbc3b62826e271ec2ce97a66ff0019c Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:54:14 -0400
Subject: [PATCH 05/31] Site icon functionality

---
 src/wp-admin/options-general.php | 76 ++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 490a138580c5f..4b71f1d573a0b 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -97,7 +97,83 @@
 <p class="description" id="tagline-description"><?php echo $tagline_description; ?></p></td>
 </tr>
 
+<tr class="hide-if-no-js">
+<th scope="row"><?php _e( 'Site Icon' ); ?></th>
+<td>
+	<?php
+	$upload_url = admin_url( 'options-general.php?page=site-icon' );
+	$update_url = esc_url( add_query_arg( array(
+		'page'   => 'site-icon',
+		'action' => 'crop_site_icon',
+	), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
+
+	wp_enqueue_media();
+	wp_enqueue_script( 'site-icon' );
+
+	$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
+	$classes_for_update_button = 'button';
+
+	$classes_for_avatar = 'avatar avatar-150';
+	if ( has_site_icon() ) {
+		$classes_for_avatar .= ' has-site-icon';
+		$classes_for_button = $classes_for_update_button;
+		$classes_for_button_on_change = $classes_for_upload_button;
+	} else {
+		$classes_for_avatar .= ' hidden';
+		$classes_for_button = $classes_for_upload_button;
+		$classes_for_button_on_change = $classes_for_update_button;
+	}
+
+
+	?>
+
+	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" />
+	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
+	<p>
+		<button type="button"
+			id="choose-from-library-link"
+			class="<?php echo esc_attr( $classes_for_button ); ?>"
+			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change); ?>"
+			data-size="512"
+			data-update-link="<?php echo esc_attr( $update_url ); ?>"
+			data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
+			data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
+			data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"
+			$data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
+			data-state="<?php echo esc_attr( has_site_icon() ); ?>"
+
+		>
+			<?php if ( has_site_icon() ) : ?>
+				<?php _e( 'Change site icon' ); ?>
+			<?php else : ?>
+				<?php _e( 'Choose a Site Icon' ); ?>
+			<?php endif; ?>
+		</button>
+		<a
+			id="js-remove-site-icon"
+			href="<?php echo esc_url( $remove_url ); ?>"
+			<?php echo has_site_icon() ? '' : 'class="hidden"'; ?>
+		>
+			<?php _e( 'Remove Site Icon' ); ?>
+		</a>
+	</p>
+
+	<p class="description" id="site-icon-description">
+		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>.
+	</p>
+	<p class="description" id="site-icon-further-description">
+		<?php
+			/* translators: %s: Site icon size in pixels. */
+			printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
+		?>
+	</p>
+
+</td>
+</tr>
+
 <?php
+/* End Site Icon */
+
 if ( ! is_multisite() ) {
 	$wp_site_url_class = '';
 	$wp_home_class     = '';

From d17d1335f1bc8857bd77f7e6e843e7676e1c739b Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:25:12 -0400
Subject: [PATCH 06/31] fix formatting

---
 src/js/_enqueues/admin/site-icon.js | 20 +++++++-------------
 src/wp-admin/options-general.php    | 18 ++++++------------
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 4aa486953d259..ccbfda29c3aa4 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -1,11 +1,8 @@
 (function($) {
 	var frame;
 
-	const calculateImageSelectOptions = function(attachment, controller) {
-		var control    = controller.get( 'control' ),
-			flexWidth  = false,
-			flexHeight = false,
-			realWidth  = attachment.get( 'width' ),
+	function calculateImageSelectOptions ( attachment ) {
+		var realWidth  = attachment.get( 'width' ),
 			realHeight = attachment.get( 'height' ),
 			xInit = 512,
 			yInit = 512,
@@ -42,7 +39,7 @@
 		};
 
 		return imgSelectOptions;
-	};
+	}
 
 	$( function() {
 		// Build the choose from library frame.
@@ -79,7 +76,7 @@
 								height: $el.data( 'size' )
 							}
 						},
-						imgSelectOptions: calculateImageSelectOptions,
+						imgSelectOptions: calculateImageSelectOptions
 					})
 				]
 			});
@@ -95,18 +92,15 @@
 			// When an image is selected, run a callback.
 			frame.on( 'select', function() {
 				// Grab the selected attachment.
-				var attachment = frame.state().get('selection').first(),
-					link = $el.data('updateLink');
+				var attachment = frame.state().get('selection').first();
 
 				if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) {
 					// set the value of the hidden input to the attachment id
 					$( '#site_icon_hidden_field').val(attachment.id);
 					switchToUpdate(attachment.attributes.url);
 					// close the model
-					console.log( 'closing');
 					frame.close();
 				} else {
-					console.log( 'cropper');
 					frame.setState( 'cropper' );
 				}
 			});
@@ -127,7 +121,7 @@
 			var classes = $( '#choose-from-library-link' ).attr( 'class' );
 			$( '#choose-from-library-link' ).attr('class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
 			$( '#choose-from-library-link' ).attr('data-alt-classes', classes );
-			$( '#choose-from-library-link' ).attr('data-state', '1')
+			$( '#choose-from-library-link' ).attr('data-state', '1');
 		}
 
 		// swap the text of the button
@@ -150,7 +144,7 @@
 		// swap the text of the button
 		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr('data-choose-text') );
 
-		$( '#choose-from-library-link' ).attr('data-state', '')
+		$( '#choose-from-library-link' ).attr('data-state', '');
 
 		// prevent the default action
 		event.preventDefault();
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 4b71f1d573a0b..fa6b759ef8462 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -101,11 +101,6 @@
 <th scope="row"><?php _e( 'Site Icon' ); ?></th>
 <td>
 	<?php
-	$upload_url = admin_url( 'options-general.php?page=site-icon' );
-	$update_url = esc_url( add_query_arg( array(
-		'page'   => 'site-icon',
-		'action' => 'crop_site_icon',
-	), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
 
 	wp_enqueue_media();
 	wp_enqueue_script( 'site-icon' );
@@ -115,27 +110,26 @@
 
 	$classes_for_avatar = 'avatar avatar-150';
 	if ( has_site_icon() ) {
-		$classes_for_avatar .= ' has-site-icon';
-		$classes_for_button = $classes_for_update_button;
+		$classes_for_avatar          .= ' has-site-icon';
+		$classes_for_button           = $classes_for_update_button;
 		$classes_for_button_on_change = $classes_for_upload_button;
 	} else {
-		$classes_for_avatar .= ' hidden';
-		$classes_for_button = $classes_for_upload_button;
+		$classes_for_avatar          .= ' hidden';
+		$classes_for_button           = $classes_for_upload_button;
 		$classes_for_button_on_change = $classes_for_update_button;
 	}
 
 
 	?>
 
-	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" />
+	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar ); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" />
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
 	<p>
 		<button type="button"
 			id="choose-from-library-link"
 			class="<?php echo esc_attr( $classes_for_button ); ?>"
-			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change); ?>"
+			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
 			data-size="512"
-			data-update-link="<?php echo esc_attr( $update_url ); ?>"
 			data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"

From 1f291c5ef909b5892cd7fb0ab0ce373b6df2250a Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:46:36 -0400
Subject: [PATCH 07/31] return to library after cropping if you open the model

---
 src/js/_enqueues/admin/site-icon.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index ccbfda29c3aa4..c2be0b4dbb9d6 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -83,6 +83,7 @@
 
 			frame.on( 'cropped', function( attachment) {
 				// set state back
+				frame.setState( 'library' );
 				frame.reset();
 				$( '#site_icon_hidden_field' ).val(attachment.id);
 				switchToUpdate(attachment.url);

From 882fe18e9940628a34d4ea015fc3ccdaec748423 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:46:58 -0400
Subject: [PATCH 08/31] fix mobile padding

---
 src/wp-includes/css/media-views.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 25995f69090f3..480daa8d8ff54 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -857,7 +857,7 @@
 
 .options-general-php .crop-content.site-icon,
 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
-	margin-right: 0;
+	margin-right: 300px;
 }
 
 
@@ -2568,6 +2568,10 @@
 		width: 230px;
 	}
 
+	.options-general-php .crop-content.site-icon{
+		margin-right: 262px;
+	}
+
 	.attachments-browser .attachments,
 	.attachments-browser .uploader-inline,
 	.attachments-browser .media-toolbar,
@@ -2835,6 +2839,10 @@
 		position: fixed;
 	}
 
+	.options-general-php .crop-content.site-icon {
+		margin-right: 0;
+	}
+
 	.media-sidebar {
 		z-index: 1900;
 		max-width: 70%;

From 4b29b19d0c6f44edb073ee74d8d2c5442dde559b Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 22:48:34 -0400
Subject: [PATCH 09/31] Change alt text to match Customizer

---
 src/wp-admin/options-general.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index fa6b759ef8462..89be38a8cf85c 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -122,7 +122,7 @@
 
 	?>
 
-	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar ); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" />
+	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar ); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
 	<p>
 		<button type="button"

From a96e56ff4f7fce55b8d8ae2beccda8de2b9b6e8c Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Wed, 7 Feb 2024 22:49:00 -0400
Subject: [PATCH 10/31] Fix attribute

---
 src/wp-admin/options-general.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 89be38a8cf85c..33c002aa08a69 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -133,7 +133,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 			data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"
-			$data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
+			data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
 			data-state="<?php echo esc_attr( has_site_icon() ); ?>"
 
 		>

From d37778e9618cf9c6fd3d0c1755add2dc215385be Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:17:17 -0400
Subject: [PATCH 11/31] Switch remove link to button

---
 src/wp-admin/options-general.php | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 33c002aa08a69..f19b79a617201 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -143,13 +143,12 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 				<?php _e( 'Choose a Site Icon' ); ?>
 			<?php endif; ?>
 		</button>
-		<a
+		<button
 			id="js-remove-site-icon"
-			href="<?php echo esc_url( $remove_url ); ?>"
-			<?php echo has_site_icon() ? '' : 'class="hidden"'; ?>
+			<?php echo has_site_icon() ? 'class="button"' : 'class="button hidden"'; ?>
 		>
 			<?php _e( 'Remove Site Icon' ); ?>
-		</a>
+		</button>
 	</p>
 
 	<p class="description" id="site-icon-description">

From 63b134857de89c91a052e8227d7392b4a6feb659 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:18:08 -0400
Subject: [PATCH 12/31] Don't reset the frame, destory it

---
 src/js/_enqueues/admin/site-icon.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index c2be0b4dbb9d6..e546539c602d4 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -82,12 +82,11 @@
 			});
 
 			frame.on( 'cropped', function( attachment) {
-				// set state back
-				frame.setState( 'library' );
-				frame.reset();
 				$( '#site_icon_hidden_field' ).val(attachment.id);
 				switchToUpdate(attachment.url);
 				frame.close();
+				// Startover with a frame that is so fresh and so clean clean.
+				frame = null;
 			});
 
 			// When an image is selected, run a callback.

From b9f5019970087cfdf26f35cef4a055144c06ec56 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:13:57 -0500
Subject: [PATCH 13/31] Update src/wp-admin/css/forms.css

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
---
 src/wp-admin/css/forms.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 9c51c7dae6d37..2534b06cf5345 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -786,11 +786,11 @@ ul#add-to-blog-users {
 	width: 100%;
 	cursor: pointer;
 	text-align: center;
-    cursor: default;
-    border: 1px dashed #c3c4c7;
-    box-sizing: border-box;
-    padding: 9px 0;
-    line-height: 1.6;
+	cursor: default;
+	border: 1px dashed #c3c4c7;
+	box-sizing: border-box;
+	padding: 9px 0;
+	line-height: 1.6;
 	max-width: 270px;
 }
 
@@ -800,10 +800,10 @@ ul#add-to-blog-users {
 
 .button-ad-site-icon:focus{
 	background-color: #fff;
-    border-color: #3582c4;
-    border-style: solid;
-    box-shadow: 0 0 0 1px #3582c4;
-    outline: 2px solid transparent;
+	border-color: #3582c4;
+	border-style: solid;
+	box-shadow: 0 0 0 1px #3582c4;
+	outline: 2px solid transparent;
 }
 
 /*------------------------------------------------------------------------------

From e861b06217dbeb68c37660abeb35cfab9240df18 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:33:32 -0400
Subject: [PATCH 14/31] Add cap check for upload files

---
 src/wp-admin/options-general.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index f19b79a617201..cfc9a1e2e2e4a 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -97,6 +97,7 @@
 <p class="description" id="tagline-description"><?php echo $tagline_description; ?></p></td>
 </tr>
 
+<?php if( current_user_can( 'upload_files' ) ) : ?>
 <tr class="hide-if-no-js">
 <th scope="row"><?php _e( 'Site Icon' ); ?></th>
 <td>
@@ -165,6 +166,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 </tr>
 
 <?php
+endif;
 /* End Site Icon */
 
 if ( ! is_multisite() ) {

From 965a3079994c027efb7451ecf9a589ced17ec5a3 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:05:28 -0400
Subject: [PATCH 15/31] Fix spacing issues not caught by eslint

---
 src/js/_enqueues/admin/site-icon.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index e546539c602d4..637504bbd5212 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -117,34 +117,34 @@
 		$( '#js-remove-site-icon' ).removeClass( 'hidden' );
 		// tmp store the classes of the #choose-from-library-link button
 		// if the button is not in the update state, swap the classes
-		if( $( '#choose-from-library-link' ).attr('data-state') !== '1' ){
+		if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){
 			var classes = $( '#choose-from-library-link' ).attr( 'class' );
-			$( '#choose-from-library-link' ).attr('class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
-			$( '#choose-from-library-link' ).attr('data-alt-classes', classes );
-			$( '#choose-from-library-link' ).attr('data-state', '1');
+			$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
+			$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
+			$( '#choose-from-library-link' ).attr( 'data-state', '1' );
 		}
 
 		// swap the text of the button
-		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr('data-update-text') );
+		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) );
 	}
 
 	$( '#js-remove-site-icon' ).on( 'click', function( event ) {
 		// set the value of the hidden input to blank
-		$( '#site_icon_hidden_field').val('false');
+		$( '#site_icon_hidden_field' ).val( 'false' );
 		//  toggle hidden class on site-icon-img
 		$( '#site-icon-img' ).toggleClass( 'hidden' );
 		// toggle hidden class on remove button
 		$( this ).toggleClass( 'hidden' );
 
 		// tmp store the classes of the #choose-from-library-link button
-		var classes = $( '#choose-from-library-link' ).attr('class');
-		$( '#choose-from-library-link' ).attr('class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
-		$( '#choose-from-library-link' ).attr('data-alt-classes', classes );
+		var classes = $( '#choose-from-library-link' ).attr( 'class' );
+		$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) );
+		$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
 
 		// swap the text of the button
-		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr('data-choose-text') );
+		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) );
 
-		$( '#choose-from-library-link' ).attr('data-state', '');
+		$( '#choose-from-library-link' ).attr( 'data-state', '');
 
 		// prevent the default action
 		event.preventDefault();

From d66d62347df5670c955aabd3192eac77462c2928 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 13:25:59 -0400
Subject: [PATCH 16/31] use type of button so default doesn't need to be
 prevented

---
 src/js/_enqueues/admin/site-icon.js | 1 -
 src/wp-admin/options-general.php    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 637504bbd5212..5dc3af8e8a07a 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -45,7 +45,6 @@
 		// Build the choose from library frame.
 		$( '#choose-from-library-link' ).on( 'click', function( event ) {
 			var $el = $(this);
-			event.preventDefault();
 
 			// If the media frame already exists, reopen it.
 			if ( frame ) {
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index cfc9a1e2e2e4a..e86379d18f0fd 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -128,6 +128,7 @@
 	<p>
 		<button type="button"
 			id="choose-from-library-link"
+			type="button"
 			class="<?php echo esc_attr( $classes_for_button ); ?>"
 			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
 			data-size="512"

From f0c4bb58399a35c0eb44163fd5234822fae5986d Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 13:26:41 -0400
Subject: [PATCH 17/31] Improve styling of add site icon button

---
 src/wp-admin/css/forms.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 2534b06cf5345..fcae3db3dd65c 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -786,7 +786,6 @@ ul#add-to-blog-users {
 	width: 100%;
 	cursor: pointer;
 	text-align: center;
-	cursor: default;
 	border: 1px dashed #c3c4c7;
 	box-sizing: border-box;
 	padding: 9px 0;
@@ -794,6 +793,7 @@ ul#add-to-blog-users {
 	max-width: 270px;
 }
 
+.button-add-site-icon:focus,
 .button-add-site-icon:hover{
 	background: white;
 }

From eefc817b922796cb0da369edf3a1c312fc8fdafc Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:58:49 -0400
Subject: [PATCH 18/31] Style the remove button as a link

---
 src/wp-admin/css/forms.css       | 20 ++++++++++++++++++++
 src/wp-admin/options-general.php |  3 ++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index fcae3db3dd65c..03c5dc51a3790 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -798,6 +798,26 @@ ul#add-to-blog-users {
 	background: white;
 }
 
+.button-as-link{
+	background: none;
+	border: none;
+	color: #2271b1;
+	cursor: pointer;
+	padding: 0;
+	text-decoration: underline;
+}
+
+.button-as-link:hover{
+	color: #043959;
+}
+
+.button-as-link:focus{
+	color: #043959;
+	box-shadow: 0 0 0 1px #4f94d4,
+	0 0 2px 1px rgba(79, 148, 212, 0.8);
+	outline: 1px solid transparent;
+}
+
 .button-ad-site-icon:focus{
 	background-color: #fff;
 	border-color: #3582c4;
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index e86379d18f0fd..f3f9ada2cbbbe 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -147,7 +147,8 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 		</button>
 		<button
 			id="js-remove-site-icon"
-			<?php echo has_site_icon() ? 'class="button"' : 'class="button hidden"'; ?>
+			type="button"
+			<?php echo has_site_icon() ? 'class="button-as-link"' : 'class="button-as-link hidden"'; ?>
 		>
 			<?php _e( 'Remove Site Icon' ); ?>
 		</button>

From fa5b46bf9ebf6c86ede22ed6de72c3517d964562 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:00:03 -0400
Subject: [PATCH 19/31] Use Capital Case for Site Icon

---
 src/wp-admin/options-general.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index f3f9ada2cbbbe..ec333abdce065 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -140,7 +140,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 
 		>
 			<?php if ( has_site_icon() ) : ?>
-				<?php _e( 'Change site icon' ); ?>
+				<?php _e( 'Change Site Icon' ); ?>
 			<?php else : ?>
 				<?php _e( 'Choose a Site Icon' ); ?>
 			<?php endif; ?>

From c8103bb00b5675b22e143086e70b640040c8169a Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:00:47 -0400
Subject: [PATCH 20/31] Cleanup remove site icon js

---
 src/js/_enqueues/admin/site-icon.js | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 5dc3af8e8a07a..18219f2e85522 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -57,7 +57,7 @@
 				button: {
 					// Set the text of the button.
 					text: $el.data('update'),
-					// don't close, we might need to crop
+					// Don't close, we might need to crop.
 					close: false
 				},
 				states: [
@@ -84,7 +84,7 @@
 				$( '#site_icon_hidden_field' ).val(attachment.id);
 				switchToUpdate(attachment.url);
 				frame.close();
-				// Startover with a frame that is so fresh and so clean clean.
+				// Start over with a frame that is so fresh and so clean clean.
 				frame = null;
 			});
 
@@ -94,10 +94,9 @@
 				var attachment = frame.state().get('selection').first();
 
 				if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) {
-					// set the value of the hidden input to the attachment id
+					// Set the value of the hidden input to the attachment id.
 					$( '#site_icon_hidden_field').val(attachment.id);
 					switchToUpdate(attachment.attributes.url);
-					// close the model
 					frame.close();
 				} else {
 					frame.setState( 'cropper' );
@@ -109,13 +108,12 @@
 	});
 
 	function switchToUpdate( url ){
-		// set site-icon-img src to the url and remove the hidden class
+		// Set site-icon-img src to the url and remove the hidden class.
 		$( '#site-icon-img' ).attr( 'src', url );
 		$( '#site-icon-img' ).removeClass( 'hidden' );
-		// remove hidden class from remove
+		// Remove hidden class from remove.
 		$( '#js-remove-site-icon' ).removeClass( 'hidden' );
-		// tmp store the classes of the #choose-from-library-link button
-		// if the button is not in the update state, swap the classes
+		// If the button is not in the update state, swap the classes.
 		if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){
 			var classes = $( '#choose-from-library-link' ).attr( 'class' );
 			$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
@@ -128,24 +126,17 @@
 	}
 
 	$( '#js-remove-site-icon' ).on( 'click', function( event ) {
-		// set the value of the hidden input to blank
 		$( '#site_icon_hidden_field' ).val( 'false' );
-		//  toggle hidden class on site-icon-img
 		$( '#site-icon-img' ).toggleClass( 'hidden' );
-		// toggle hidden class on remove button
 		$( this ).toggleClass( 'hidden' );
 
-		// tmp store the classes of the #choose-from-library-link button
 		var classes = $( '#choose-from-library-link' ).attr( 'class' );
 		$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) );
 		$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
 
-		// swap the text of the button
+		// Swap the text of the button.
 		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) );
-
+		// Set the state of the button so it can be changed on new icon.
 		$( '#choose-from-library-link' ).attr( 'data-state', '');
-
-		// prevent the default action
-		event.preventDefault();
 	});
 }(jQuery));

From f9ad50fb69f58f0dcd9d19e96b1a3f4f3744af14 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:16:06 -0400
Subject: [PATCH 21/31] Use same preview style as in customizer

---
 src/js/_enqueues/admin/site-icon.js | 14 +++++---------
 src/wp-admin/css/forms.css          | 12 ++++++++++++
 src/wp-admin/css/site-icon.css      |  1 +
 src/wp-admin/options-general.php    | 19 +++++++++++++------
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 18219f2e85522..0807c6fa57e2e 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -46,12 +46,6 @@
 		$( '#choose-from-library-link' ).on( 'click', function( event ) {
 			var $el = $(this);
 
-			// If the media frame already exists, reopen it.
-			if ( frame ) {
-				frame.open();
-				return;
-			}
-
 			// Create the media frame.
 			frame = wp.media({
 				button: {
@@ -109,8 +103,10 @@
 
 	function switchToUpdate( url ){
 		// Set site-icon-img src to the url and remove the hidden class.
-		$( '#site-icon-img' ).attr( 'src', url );
-		$( '#site-icon-img' ).removeClass( 'hidden' );
+		$( '#site-icon-preview').find('img').not('.browser-preview').each( function(i, img ){
+			$(img).attr('src', url );
+		});
+		$( '#site-icon-preview' ).removeClass( 'hidden' );
 		// Remove hidden class from remove.
 		$( '#js-remove-site-icon' ).removeClass( 'hidden' );
 		// If the button is not in the update state, swap the classes.
@@ -127,7 +123,7 @@
 
 	$( '#js-remove-site-icon' ).on( 'click', function( event ) {
 		$( '#site_icon_hidden_field' ).val( 'false' );
-		$( '#site-icon-img' ).toggleClass( 'hidden' );
+		$( '#site-icon-preview' ).toggleClass( 'hidden' );
 		$( this ).toggleClass( 'hidden' );
 
 		var classes = $( '#choose-from-library-link' ).attr( 'class' );
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 03c5dc51a3790..0f50520707a5e 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -818,6 +818,18 @@ ul#add-to-blog-users {
 	outline: 1px solid transparent;
 }
 
+.site-icon-section .favicon-preview{
+	float: left;
+}
+.site-icon-section .app-icon-preview{
+	float: left;
+	margin: 0 20px;
+}
+
+.site-icon-section .site-icon-preview img{
+	max-width: 100%;
+}
+
 .button-ad-site-icon:focus{
 	background-color: #fff;
 	border-color: #3582c4;
diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index eae9a576357a8..987406e6ad143 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -7,6 +7,7 @@
 	overflow: hidden;
 	position: relative;
 	max-width: 180px;
+	float: left;
 }
 
 .site-icon-preview .favicon,
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index ec333abdce065..936f566531688 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -98,7 +98,7 @@
 </tr>
 
 <?php if( current_user_can( 'upload_files' ) ) : ?>
-<tr class="hide-if-no-js">
+<tr class="hide-if-no-js site-icon-section">
 <th scope="row"><?php _e( 'Site Icon' ); ?></th>
 <td>
 	<?php
@@ -122,8 +122,16 @@
 
 
 	?>
-
-	<img id="site-icon-img" class="<?php echo esc_attr( $classes_for_avatar ); ?>" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
+	<div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
+		<div class="favicon-preview">
+			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
+			<div class="favicon">
+				<img src="<?php site_icon_url( null, 150 ); ?>" alt="Preview as a browser icon">
+			</div>
+			<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
+		</div>
+		<img class="app-icon-preview" src="<?php site_icon_url( null, 150 ); ?>" alt="Preview as an app icon">
+	</div>
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
 	<p>
 		<button type="button"
@@ -132,7 +140,6 @@
 			class="<?php echo esc_attr( $classes_for_button ); ?>"
 			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
 			data-size="512"
-			data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
 			data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"
 			data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
@@ -159,7 +166,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 	</p>
 	<p class="description" id="site-icon-further-description">
 		<?php
-			/* translators: %s: Site icon size in pixels. */
+			/* translators: %s: Site Icon size in pixels. */
 			printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
 		?>
 	</p>
@@ -168,8 +175,8 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 </tr>
 
 <?php
-endif;
 /* End Site Icon */
+endif;
 
 if ( ! is_multisite() ) {
 	$wp_site_url_class = '';

From 6bcd6563598a6578702d149ebbe797c713ce30b3 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:23:50 -0400
Subject: [PATCH 22/31] Fix PHPCS

---
 src/wp-admin/options-general.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 936f566531688..c4fc62fed742a 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -97,7 +97,7 @@
 <p class="description" id="tagline-description"><?php echo $tagline_description; ?></p></td>
 </tr>
 
-<?php if( current_user_can( 'upload_files' ) ) : ?>
+<?php if ( current_user_can( 'upload_files' ) ) : ?>
 <tr class="hide-if-no-js site-icon-section">
 <th scope="row"><?php _e( 'Site Icon' ); ?></th>
 <td>
@@ -174,9 +174,9 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 </td>
 </tr>
 
-<?php
-/* End Site Icon */
+	<?php
 endif;
+	/* End Site Icon */
 
 if ( ! is_multisite() ) {
 	$wp_site_url_class = '';

From c8110ebb7e2a96fc5f4db24f8716bbdafb75298e Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 11:57:37 -0500
Subject: [PATCH 23/31] Update src/wp-admin/options-general.php

Co-authored-by: Erik <11491369+kebbet@users.noreply.github.com>
---
 src/wp-admin/options-general.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index c4fc62fed742a..8768415b68957 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -162,7 +162,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 	</p>
 
 	<p class="description" id="site-icon-description">
-		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>.
+		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
 	</p>
 	<p class="description" id="site-icon-further-description">
 		<?php

From 83a1cd3f20e4e09b98e33c33dee8f90bfe5153e5 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:33:11 -0400
Subject: [PATCH 24/31] Style remove similiar to the delete theme button

---
 src/wp-admin/css/forms.css       | 20 --------------------
 src/wp-admin/css/site-icon.css   | 16 ++++++++++++++++
 src/wp-admin/options-general.php |  2 +-
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 56a0b1a4d1234..db76d6cb05e7a 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -805,26 +805,6 @@ ul#add-to-blog-users {
 	background: white;
 }
 
-.button-as-link{
-	background: none;
-	border: none;
-	color: #2271b1;
-	cursor: pointer;
-	padding: 0;
-	text-decoration: underline;
-}
-
-.button-as-link:hover{
-	color: #043959;
-}
-
-.button-as-link:focus{
-	color: #043959;
-	box-shadow: 0 0 0 1px #4f94d4,
-	0 0 2px 1px rgba(79, 148, 212, 0.8);
-	outline: 1px solid transparent;
-}
-
 .site-icon-section .favicon-preview{
 	float: left;
 }
diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index 987406e6ad143..077f51bcc2956 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -53,3 +53,19 @@
 .customize-control-site_icon .app-icon-preview {
 	margin-top: 9px;
 }
+
+.site-icon-section button.reset {
+	color: #b32d2e;
+	text-decoration: none;
+	border-color: transparent;
+	box-shadow: none;
+	background: transparent;
+}
+
+.site-icon-section button.reset:focus,
+.site-icon-section button.reset:hover {
+	background: #b32d2e;
+	color: #fff;
+	border-color: #b32d2e;
+	box-shadow: 0 0 0 1px #b32d2e;
+}
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index c4fc62fed742a..edac19921a82f 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -155,7 +155,7 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 		<button
 			id="js-remove-site-icon"
 			type="button"
-			<?php echo has_site_icon() ? 'class="button-as-link"' : 'class="button-as-link hidden"'; ?>
+			<?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
 		>
 			<?php _e( 'Remove Site Icon' ); ?>
 		</button>

From 2015624b7e0b2687999ffb0c7262a331af5e22d4 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:45:50 -0400
Subject: [PATCH 25/31] remove variables which are no longer

---
 src/js/_enqueues/admin/site-icon.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 0807c6fa57e2e..5b4bc28a2044f 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -43,7 +43,7 @@
 
 	$( function() {
 		// Build the choose from library frame.
-		$( '#choose-from-library-link' ).on( 'click', function( event ) {
+		$( '#choose-from-library-link' ).on( 'click', function() {
 			var $el = $(this);
 
 			// Create the media frame.
@@ -121,7 +121,7 @@
 		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) );
 	}
 
-	$( '#js-remove-site-icon' ).on( 'click', function( event ) {
+	$( '#js-remove-site-icon' ).on( 'click', function() {
 		$( '#site_icon_hidden_field' ).val( 'false' );
 		$( '#site-icon-preview' ).toggleClass( 'hidden' );
 		$( this ).toggleClass( 'hidden' );

From a14a6fdfa4ded9520a813e8048067c698532d8b0 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:49:29 -0400
Subject: [PATCH 26/31] Let the buttons breath

---
 src/wp-admin/css/site-icon.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index 077f51bcc2956..7c6ce8663e597 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -60,6 +60,7 @@
 	border-color: transparent;
 	box-shadow: none;
 	background: transparent;
+	margin: 0 10px;
 }
 
 .site-icon-section button.reset:focus,

From a9f35782ba580a0d1b70ea4575454372734cd7c6 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:09:15 -0400
Subject: [PATCH 27/31] try not loading JS to see if that affects the tests

---
 src/wp-admin/options-general.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 0a57b6bfcb043..4a7a4f0299882 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -103,9 +103,10 @@
 <td>
 	<?php
 
+/*
 	wp_enqueue_media();
 	wp_enqueue_script( 'site-icon' );
-
+*/
 	$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
 	$classes_for_update_button = 'button';
 

From c3e4d539d200b0e16b408a7943ab23ab2fcaf505 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:21:43 -0400
Subject: [PATCH 28/31] Fix calls to site_icon_url

---
 src/wp-admin/options-general.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 4a7a4f0299882..40646f09cf14d 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -127,11 +127,11 @@
 		<div class="favicon-preview">
 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
 			<div class="favicon">
-				<img src="<?php site_icon_url( null, 150 ); ?>" alt="Preview as a browser icon">
+				<img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon">
 			</div>
 			<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
 		</div>
-		<img class="app-icon-preview" src="<?php site_icon_url( null, 150 ); ?>" alt="Preview as an app icon">
+		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon">
 	</div>
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
 	<p>

From e13e3ffe3de3a83de7f83d96f2dc191813fce52e Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:22:00 -0400
Subject: [PATCH 29/31] Restore js

---
 src/wp-admin/options-general.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 40646f09cf14d..a516757327a8d 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -102,11 +102,9 @@
 <th scope="row"><?php _e( 'Site Icon' ); ?></th>
 <td>
 	<?php
-
-/*
 	wp_enqueue_media();
 	wp_enqueue_script( 'site-icon' );
-*/
+
 	$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
 	$classes_for_update_button = 'button';
 

From 52c4d81b9309b7bde1726f76c64b6454708d32fd Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:22:49 -0500
Subject: [PATCH 30/31] Update src/wp-includes/css/media-views.css

Co-authored-by: Pascal Birchler <pascal.birchler@gmail.com>
---
 src/wp-includes/css/media-views.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 00051072232e1..7ef4f5080974c 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -854,7 +854,6 @@
 	margin-right: 300px;
 }
 
-
 .media-frame-content .crop-content .crop-image {
 	display: block;
 	margin: auto;

From dbfac29a2c1af7c565ab98982acbf0d17f186624 Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <aaronjorbin@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:23:03 -0500
Subject: [PATCH 31/31] Update src/wp-includes/css/media-views.css

Co-authored-by: Pascal Birchler <pascal.birchler@gmail.com>
---
 src/wp-includes/css/media-views.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 7ef4f5080974c..ab392ef890b36 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -2561,7 +2561,7 @@
 		width: 230px;
 	}
 
-	.options-general-php .crop-content.site-icon{
+	.options-general-php .crop-content.site-icon {
 		margin-right: 262px;
 	}