From 19b83fff089a52472011834089962322647e5420 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Tue, 13 Feb 2024 13:07:29 +0000
Subject: [PATCH] General: Some minor adjustments for the Site Icon option:

* Improve buttons flow on small viewports, taking longer translations into account.
* Make `alt` attributes translatable.
* Remove unused `id` attributes.

Follow-up to [57602].

Props kebbet, afercia, mukesh27.
See #54370.

git-svn-id: https://develop.svn.wordpress.org/trunk@57618 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/site-icon.css   |  7 ++++++-
 src/wp-admin/options-general.php | 12 ++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index 7c6ce8663e..5660e9a39e 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -60,7 +60,6 @@
 	border-color: transparent;
 	box-shadow: none;
 	background: transparent;
-	margin: 0 10px;
 }
 
 .site-icon-section button.reset:focus,
@@ -70,3 +69,9 @@
 	border-color: #b32d2e;
 	box-shadow: 0 0 0 1px #b32d2e;
 }
+
+.site-icon-section .action-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index a516757327..56020d533f 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -125,14 +125,14 @@ $tagline_description = sprintf(
 		<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(); ?>" alt="Preview as a browser icon">
+				<img src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( '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(); ?>" alt="Preview as an app icon">
+		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
 	</div>
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
-	<p>
+	<div class="action-buttons">
 		<button type="button"
 			id="choose-from-library-link"
 			type="button"
@@ -158,12 +158,12 @@ $tagline_description = sprintf(
 		>
 			<?php _e( 'Remove Site Icon' ); ?>
 		</button>
-	</p>
+	</div>
 
-	<p class="description" id="site-icon-description">
+	<p class="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">
+	<p class="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>' );