Changeset 57713 for trunk/src/wp-admin/options-general.php

Timestamp:

02/26/2024 08:16:09 PM (3 years ago)

Author:

jorbin

Message:

Site icon: Polish up Site Icon on the general settings screen.

This fixes a number of issues, chief among them:

• Updates to the site title are reflected in the preview.
• Improve alt text for preview
• Make string describing site icon more succinct.
• Add inline documentation to JavaScript

Props kebbet, jorbin, swissspidy, afercia, mukesh27, alexstine, jameskoster, andraganescu.
Fixes #54370.

File:

• trunk/src/wp-admin/options-general.php (modified) (2 diffs)

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

@@ -108 +108 @@
         $classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
         $classes_for_update_button = 'button';
-
-        $classes_for_avatar = 'avatar avatar-150';
+        $classes_for_wrapper       = '';
+
         if ( has_site_icon() ) {
-                $classes_for_avatar          .= ' has-site-icon';
+                $classes_for_wrapper         .= ' 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_wrapper         .= ' hidden';
                 $classes_for_button           = $classes_for_upload_button;
                 $classes_for_button_on_change = $classes_for_update_button;
         }
 
-
-        ?>
-        <div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
+        // Handle alt text for site icon on page load.
+        $site_icon_id           = (int) get_option( 'site_icon' );
+        $app_icon_alt_value     = '';
+        $browser_icon_alt_value = '';
+
+        if ( $site_icon_id ) {
+                $img_alt            = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
+                $filename           = wp_basename( get_site_icon_url() );
+                $app_icon_alt_value = sprintf(
+                        /* translators: %s: The selected image filename. */
+                        __( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
+                        $filename
+                );
+
+                $browser_icon_alt_value = sprintf(
+                        /* translators: %s: The selected image filename. */
+                        __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ),
+                        $filename
+                );
+
+                if ( $img_alt ) {
+                        $app_icon_alt_value = sprintf(
+                                /* translators: %s: The selected image alt text. */
+                                __( 'App icon preview: Current image: %s' ),
+                                $img_alt
+                        );
+
+                        $browser_icon_alt_value = sprintf(
+                                /* translators: %s: The selected image alt text. */
+                                __( 'Browser icon preview: Current image: %s' ),
+                                $img_alt
+                        );
+                }
+        }
+        ?>
+
+
+        <div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
                 <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="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
+                                <img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
                         </div>
-                        <span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
+                        <span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
                 </div>
-                <img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
+                <img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
         </div>
+
         <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
         <div class="action-buttons">
                 <button type="button"
-                        id="choose-from-library-link"
+                        id="choose-from-library-button"
                         type="button"
                         class="<?php echo esc_attr( $classes_for_button ); ?>"
@@ -162 +198 @@
 
         <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">
                 <?php
                         /* translators: %s: Site Icon size in pixels. */
-                        printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
+                        printf( __( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. They should be square and at least %s pixels.' ), '<code>512 &times; 512</code>' );
                 ?>
         </p>