Changeset 58927 for trunk/src/wp-includes/media-template.php

Timestamp:

08/23/2024 10:45:54 PM (10 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-includes/media-template.php (modified) (1 diff)

trunk/src/wp-includes/media-template.php

@@ -1543 +1543 @@
 
     <?php // Template for the Site Icon preview, used for example in the Customizer. ?>
-    <script type="text/html" id="tmpl-site-icon-preview">
-        <h2><?php _e( 'Preview' ); ?></h2>
-        <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
-        <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" height="" alt="" />
-
-            <div class="favicon">
-                <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
-            </div>
-            <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
-        </div>
-
-        <strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
-        <div class="app-icon-preview">
-            <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
+    <script type="text/html" id="tmpl-site-icon-preview-crop">
+        <style>
+            :root{
+                --site-icon-url: url( "{{ data.url }}" );
+            }
+        </style>
+        <h2><?php _ex( 'Site Icon Preview', 'noun' ); ?></h2>
+        <p><?php _e( 'As an app icon and a browser icon.' ); ?></p>
+        <div class="site-icon-preview crop">
+            <div class="image-preview-wrap app-icon-preview">
+                <img id="preview-app-icon" src="{{ data.url }}" class="app-icon-preview" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
+            </div>
+            <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">
+                    <div class="image-preview-wrap browser">
+                        <img id="preview-favicon" src="{{ data.url }}" class="browser-icon-preview" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
+                    </div>
+                    <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_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>
         </div>
     </script>