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

Timestamp:

08/23/2024 10:45:54 PM (8 months ago)

Author:

peterwilsoncc

Message:

Administration: Modernize Site Icon UI in settings, customizer.

Updates the UI for previewing a site icon in general settings and the customizer to account for changes to browser designs over the past years.

Props joedolson, joen, kebbet, nhrrob, swissspidy, mukesh27, afercia, jorbin.
Fixes #60625.

File:

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

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

@@ -125 +125 @@
     $browser_icon_alt_value = '';
 
+    $site_icon_url = get_site_icon_url();
+
     if ( $site_icon_id ) {
         $img_alt            = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
-        $filename           = wp_basename( get_site_icon_url() );
+        $filename           = wp_basename( $site_icon_url );
         $app_icon_alt_value = sprintf(
             /* translators: %s: The selected image filename. */
@@ -156 +158 @@
     ?>
 
-
-    <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 id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
+    <style>
+    :root {
+        --site-icon-url: url( '<?php echo esc_url( $site_icon_url ); ?>' );
+    }
+    </style>
+
+    <div id="site-icon-preview" class="site-icon-preview settings <?php echo esc_attr( $classes_for_wrapper ); ?>">
+        <div class="direction-wrap">
+            <img id="app-icon-preview" src="<?php echo esc_url( $site_icon_url ); ?>" class="app-icon-preview" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>" />
+            <div class="site-icon-preview-browser">
+                <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="browser-buttons"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm18 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm24-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" /></svg>
+                <div class="site-icon-preview-tab">
+                    <img id="browser-icon-preview" src="<?php echo esc_url( $site_icon_url ); ?>" class="browser-icon-preview" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>" />
+                    <div class="site-icon-preview-site-title" id="site-icon-preview-site-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></div>
+                        <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
+                            <path d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z" />
+                        </svg>
+                    </div>
+                </div>
             </div>
-            <span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
         </div>
-        <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">
+    <div class="site-icon-action-buttons">
         <button type="button"
             id="choose-from-library-button"
@@ -191 +204 @@
             id="js-remove-site-icon"
             type="button"
-            <?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
+            <?php echo has_site_icon() ? 'class="button button-secondary reset remove-site-icon"' : 'class="button button-secondary reset hidden"'; ?>
         >
             <?php _e( 'Remove Site Icon' ); ?>
@@ -199 +212 @@
     <p class="description">
         <?php
-            /* translators: %s: Site Icon size in pixels. */
-            printf( __( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least %s pixels.' ), '<code>512 &times; 512</code>' );
+            printf(
+                /* translators: 1: pixel value for icon size. 2: pixel value for icon size. */
+                __( 'The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least <code>%1$s by %2$s</code> pixels.' ),
+                512,
+                512
+            );
         ?>
     </p>