Changeset 57618

Timestamp:

02/13/2024 01:07:29 PM (3 years ago)

Author:

SergeyBiryukov

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/site-icon.css (modified) (2 diffs)
• options-general.php (modified) (2 diffs)

trunk/src/wp-admin/css/site-icon.css

@@ -61 +61 @@
         box-shadow: none;
         background: transparent;
-        margin: 0 10px;
 }
 
@@ -71 +70 @@
         box-shadow: 0 0 0 1px #b32d2e;
 }
+
+.site-icon-section .action-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+}

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

@@ -126 +126 @@
                         <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"
@@ -159 +159 @@
                         <?php _e( 'Remove Site Icon' ); ?>
                 </button>
-        </p>
-
-        <p class="description" id="site-icon-description">
+        </div>
+
+        <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. */