Make WordPress Core


Ignore:
Timestamp:
02/26/2024 08:16:09 PM (17 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/options-general.php

    r57618 r57713  
    108108    $classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
    109109    $classes_for_update_button = 'button';
    110 
    111     $classes_for_avatar = 'avatar avatar-150';
     110    $classes_for_wrapper       = '';
     111
    112112    if ( has_site_icon() ) {
    113         $classes_for_avatar          .= ' has-site-icon';
     113        $classes_for_wrapper         .= ' has-site-icon';
    114114        $classes_for_button           = $classes_for_update_button;
    115115        $classes_for_button_on_change = $classes_for_upload_button;
    116116    } else {
    117         $classes_for_avatar          .= ' hidden';
     117        $classes_for_wrapper         .= ' hidden';
    118118        $classes_for_button           = $classes_for_upload_button;
    119119        $classes_for_button_on_change = $classes_for_update_button;
    120120    }
    121121
    122 
    123     ?>
    124     <div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
     122    // Handle alt text for site icon on page load.
     123    $site_icon_id           = (int) get_option( 'site_icon' );
     124    $app_icon_alt_value     = '';
     125    $browser_icon_alt_value = '';
     126
     127    if ( $site_icon_id ) {
     128        $img_alt            = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
     129        $filename           = wp_basename( get_site_icon_url() );
     130        $app_icon_alt_value = sprintf(
     131            /* translators: %s: The selected image filename. */
     132            __( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
     133            $filename
     134        );
     135
     136        $browser_icon_alt_value = sprintf(
     137            /* translators: %s: The selected image filename. */
     138            __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ),
     139            $filename
     140        );
     141
     142        if ( $img_alt ) {
     143            $app_icon_alt_value = sprintf(
     144                /* translators: %s: The selected image alt text. */
     145                __( 'App icon preview: Current image: %s' ),
     146                $img_alt
     147            );
     148
     149            $browser_icon_alt_value = sprintf(
     150                /* translators: %s: The selected image alt text. */
     151                __( 'Browser icon preview: Current image: %s' ),
     152                $img_alt
     153            );
     154        }
     155    }
     156    ?>
     157
     158
     159    <div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
    125160        <div class="favicon-preview">
    126161            <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
    127162            <div class="favicon">
    128                 <img src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
     163                <img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
    129164            </div>
    130             <span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
     165            <span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
    131166        </div>
    132         <img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
     167        <img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
    133168    </div>
     169
    134170    <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
    135171    <div class="action-buttons">
    136172        <button type="button"
    137             id="choose-from-library-link"
     173            id="choose-from-library-button"
    138174            type="button"
    139175            class="<?php echo esc_attr( $classes_for_button ); ?>"
     
    162198
    163199    <p class="description">
    164         <?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
    165     </p>
    166     <p class="description">
    167200        <?php
    168201            /* translators: %s: Site Icon size in pixels. */
    169             printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
     202            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>' );
    170203        ?>
    171204    </p>
Note: See TracChangeset for help on using the changeset viewer.