WordPress.org
Get WordPress

Make WordPress Core

Changeset 58927


Ignore:
Timestamp:
08/23/2024 10:45:54 PM (2 years 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.

Location:
trunk/src
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/site-icon.js

    r57713 r58927  
    189189                $removeButton.removeClass( 'hidden' );
    190190
     191                // Set the global CSS variable for --site-icon-url to the selected image URL.
     192                document.documentElement.style.setProperty(
     193                        '--site-icon-url',
     194                        'url(' + attributes.url + ')'
     195                );
     196
    191197                // If the choose button is not in the update state, swap the classes.
    192198                if ( $chooseButton.attr( 'data-state' ) !== '1' ) {

  • trunk/src/js/media/views/site-icon-preview.js

    r46586 r58927  
    1616 */
    1717SiteIconPreview = View.extend(/** @lends wp.media.view.SiteIconPreview.prototype */{
    18         className: 'site-icon-preview',
    19         template: wp.template( 'site-icon-preview' ),
     18        className: 'site-icon-preview-crop-modal',
     19        template: wp.template( 'site-icon-preview-crop' ),
    2020
    2121        ready: function() {
    … …  
    3535                var rx = 64 / coords.width,
    3636                        ry = 64 / coords.height,
    37                         preview_rx = 16 / coords.width,
    38                         preview_ry = 16 / coords.height;
     37                        preview_rx = 24 / coords.width,
     38                        preview_ry = 24 / coords.height;
    3939
    4040                $( '#preview-app-icon' ).css({

  • trunk/src/wp-admin/css/customize-controls.css

    r58146 r58927  
    394394}
    395395
     396#customize-control-site_icon .customize-control-description,
    396397#customize-control-changeset_scheduled_date .customize-control-description {
    397398        font-style: normal;
    … …  
    10671068}
    10681069
    1069 /* Remove descender space. */
    1070 .customize-control-site_icon .favicon-preview .browser-preview {
    1071         vertical-align: top;
    1072 }
    10731070
    10741071.customize-control .thumbnail-image img {

  • trunk/src/wp-admin/css/forms.css

    r58146 r58927  
    804804        line-height: 1.6;
    805805        max-width: 270px;
     806        border-radius: 4px;
     807        background: #f0f0f1;
    806808}
    807809
    … …  
    809811.button-add-site-icon:hover {
    810812        background: #fff;
    811 }
    812 
    813 .site-icon-section .favicon-preview {
    814         float: left;
    815 }
    816 .site-icon-section .app-icon-preview {
    817         float: left;
    818         margin: 0 20px;
    819 }
    820 
    821 .site-icon-section .site-icon-preview img {
    822         max-width: 100%;
    823813}
    824814

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

    r57713 r58927  
    33------------------------------------------------------------------------------*/
    44
    5 .site-icon-preview .favicon-preview {
    6         margin: 5px 0 20px;
     5.site-icon-section {
     6        --site-icon-removal: #b32d2e;
     7}
     8
     9.site-icon-preview {
     10        --site-icon-input-border: #8c8f94;
     11        --site-icon-preview-background: #fff;
     12        --site-icon-preview-browser-top: #dcdcde;
     13        --site-icon-preview-browser-bottom: #a7aaad;
     14        --site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);
     15        --site-icon-address-bar-background: #f0f0f1;
     16        --site-icon-address-bar-close: #646970;
     17        --site-icon-address-bar-text: #3c434a;
     18        --site-icon-shadow-1: rgba(0, 0, 0, 0.1);
     19        --site-icon-shadow-2: rgba(0, 0, 0, 0.2);
     20        --site-icon-shadow-3: rgba(0, 0, 0, 0.5);
     21
     22        direction: initial;
     23        display: flex;
     24        height: 60px;
     25        padding: 8px 0 0 8px;
     26        align-items: flex-start;
     27        position: relative;
    728        overflow: hidden;
    8         position: relative;
    9         max-width: 180px;
    10 }
    11 
    12 .site-icon-preview .favicon,
    13 .site-icon-preview .browser-title {
    14         height: 16px;
    15         left: 88px;
     29        box-sizing: border-box;
     30        border: 1px solid var(--site-icon-input-border);
     31        border-radius: 4px;
     32        background-color: var(--site-icon-preview-background);
     33        width: 275px;
     34}
     35
     36@media (prefers-color-scheme: dark) {
     37        .site-icon-preview {
     38                --site-icon-preview-browser-top: #2c3338;
     39                --site-icon-preview-browser-bottom: #111;
     40                --site-icon-address-bar-background: #3c434a;
     41                --site-icon-address-bar-close: #f0f0f1;
     42                --site-icon-address-bar-text: #f0f0f1;
     43        }
     44}
     45
     46.site-icon-preview.settings {
     47        height: 88px;
     48        padding: 16px 0 0 16px;
     49        width: 350px;
     50        margin: 0 0 16px 0;
     51}
     52
     53.site-icon-preview.crop {
     54        width: 258px;
     55        height: 100%;
     56        display: grid;
     57        grid-template-columns: 8px 1fr;
     58        grid-template-rows: 64px 1fr;
     59        padding-left: 0;
     60        row-gap: 16px;
     61        direction: inherit;
     62}
     63
     64.site-icon-preview.hidden {
     65        display: none;
     66}
     67
     68.site-icon-preview .direction-wrap {
     69        grid-template-columns: 44px 1fr;
     70        gap: 8px;
     71        display: grid;
     72        direction: ltr;
     73        height: 100%;
     74        width: 100%;
     75}
     76
     77.site-icon-preview.settings .direction-wrap {
     78        grid-template-columns: 58px 1fr;
     79        gap: 16px;
     80}
     81
     82.site-icon-preview:after {
     83        --after-size: 150%;
     84        aspect-ratio: 1/1;
     85        content: "";
     86        display: block;
     87        position: absolute;
     88        top: 0;
     89        left: 0;
     90        width: var(--after-size);;
     91        transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125));
     92        filter: blur(5px);
     93        opacity: 0.5;
     94        background: var(--site-icon-url);
     95}
     96
     97.site-icon-preview .app-icon-preview {
     98        aspect-ratio: 1/1;
     99        border-radius: 10px;
     100        box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);
     101        flex-shrink: 0;
     102        width: 100%;
     103        z-index: 1;
     104}
     105
     106.site-icon-preview-browser {
     107        display: flex;
     108        padding: 4px 4px 0 12px;
     109        align-items: flex-start;
     110        gap: 16px;
     111        flex: 1 0 0;
     112        z-index: 1;
     113        border-top-left-radius: 10px;
     114        border-top: 1px solid var(--site-icon-preview-browser-border);
     115        border-left: 1px solid var(--site-icon-preview-browser-border);
     116        background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);
     117        box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);
     118}
     119
     120.site-icon-preview .browser-buttons {
     121        width: 48px;
     122        height: 40px;
     123        fill: var(--site-icon-input-border);
     124}
     125
     126.site-icon-preview-tab {
     127        padding: 8px;
     128        align-items: center;
     129        gap: 8px;
     130        flex: 1 0 0;
     131        border-radius: 4px;
     132        background-color: var(--site-icon-address-bar-background);
     133        box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);
     134        display: grid;
     135        grid-template-columns: 24px auto 24px;
     136}
     137
     138.site-icon-preview-browser .browser-icon-preview {
     139        box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);
     140}
     141
     142.site-icon-preview-tab > img,
     143.site-icon-preview-tab > svg {
     144        width: 24px;
     145        height: 24px;
     146}
     147
     148.site-icon-preview-tab > svg {
     149        fill: var(--site-icon-address-bar-close);
     150}
     151
     152.site-icon-preview-site-title {
     153        color: var(--site-icon-address-bar-text);
     154        text-overflow: ellipsis;
     155        white-space: nowrap;
    16156        overflow: hidden;
    17         position: absolute;
    18         top: 16px;
    19 }
    20 
    21 .site-icon-preview .favicon {
    22         width: 16px;
    23 }
    24 
    25 .site-icon-preview .browser-title {
    26         left: 109px;
    27         width: 72px;
    28         white-space: nowrap;
    29 }
    30 
    31 .site-icon-preview .app-icon-preview {
    32         background-color: #000;
    33         border-radius: 16px;
     157        font-weight: 500;
     158}
     159
     160.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
     161        width: 64px;
    34162        height: 64px;
     163        margin: 0;
     164        grid-column: 2;
     165}
     166
     167.site-icon-preview-crop-modal .site-icon-preview-browser {
     168        grid-column: 2;
     169}
     170
     171.site-icon-preview-crop-modal .image-preview-wrap {
    35172        overflow: hidden;
    36         width: 64px;
    37         margin-top: 5px;
    38 }
    39 
    40 /* rtl:ignore */
    41 .site-icon-preview .favicon,
    42 .site-icon-preview .app-icon-preview {
    43         direction: ltr;
    44 }
    45 
    46 .customize-control-site_icon .favicon-preview {
    47         float: left;
    48         margin-right: 12px;
    49         margin-bottom: 0;
    50 }
    51 
    52 .customize-control-site_icon .app-icon-preview {
    53         margin-top: 9px;
    54 }
    55 
    56 .site-icon-section button.reset {
    57         color: #b32d2e;
     173        aspect-ratio: 1/1;
     174}
     175
     176.site-icon-preview-crop-modal .image-preview-wrap.browser {
     177        width: 24px;
     178        height: 24px;
     179}
     180
     181button.reset.remove-site-icon {
     182        color: var(--site-icon-removal);
    58183        text-decoration: none;
    59184        border-color: transparent;
    … …  
    62187}
    63188
    64 .site-icon-section button.reset:focus,
    65 .site-icon-section button.reset:hover {
    66         background: #b32d2e;
     189button.reset.remove-site-icon:focus,
     190button.reset.remove-site-icon:hover {
     191        background: var(--site-icon-removal);
    67192        color: #fff;
    68         border-color: #b32d2e;
    69         box-shadow: 0 0 0 1px #b32d2e;
    70 }
    71 
    72 .site-icon-section .action-buttons {
     193        border-color: var(--site-icon-removal);
     194        box-shadow: 0 0 0 1px var(--site-icon-removal);
     195}
     196
     197.site-icon-action-buttons {
    73198        display: flex;
    74199        flex-wrap: wrap;

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

    r57833 r58927  
    125125        $browser_icon_alt_value = '';
    126126
     127        $site_icon_url = get_site_icon_url();
     128
    127129        if ( $site_icon_id ) {
    128130                $img_alt            = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
    129                 $filename           = wp_basename( get_site_icon_url() );
     131                $filename           = wp_basename( $site_icon_url );
    130132                $app_icon_alt_value = sprintf(
    131133                        /* translators: %s: The selected image filename. */
    … …  
    156158        ?>
    157159
    158 
    159         <div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
    160                 <div class="favicon-preview">
    161                         <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
    162                         <div class="favicon">
    163                                 <img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
     160        <style>
     161        :root {
     162                --site-icon-url: url( '<?php echo esc_url( $site_icon_url ); ?>' );
     163        }
     164        </style>
     165
     166        <div id="site-icon-preview" class="site-icon-preview settings <?php echo esc_attr( $classes_for_wrapper ); ?>">
     167                <div class="direction-wrap">
     168                        <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 ); ?>" />
     169                        <div class="site-icon-preview-browser">
     170                                <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>
     171                                <div class="site-icon-preview-tab">
     172                                        <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 ); ?>" />
     173                                        <div class="site-icon-preview-site-title" id="site-icon-preview-site-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></div>
     174                                                <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
     175                                                        <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" />
     176                                                </svg>
     177                                        </div>
     178                                </div>
    164179                        </div>
    165                         <span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
    166180                </div>
    167                 <img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
    168181        </div>
    169182
    170183        <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
    171         <div class="action-buttons">
     184        <div class="site-icon-action-buttons">
    172185                <button type="button"
    173186                        id="choose-from-library-button"
    … …  
    191204                        id="js-remove-site-icon"
    192205                        type="button"
    193                         <?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
     206                        <?php echo has_site_icon() ? 'class="button button-secondary reset remove-site-icon"' : 'class="button button-secondary reset hidden"'; ?>
    194207                >
    195208                        <?php _e( 'Remove Site Icon' ); ?>
    … …  
    199212        <p class="description">
    200213                <?php
    201                         /* translators: %s: Site Icon size in pixels. */
    202                         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>' );
     214                        printf(
     215                                /* translators: 1: pixel value for icon size. 2: pixel value for icon size. */
     216                                __( '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.' ),
     217                                512,
     218                                512
     219                        );
    203220                ?>
    204221        </p>

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r58682 r58927  
    52045204                                        'label'       => __( 'Site Icon' ),
    52055205                                        'description' => sprintf(
    5206                                                 /* translators: %s: Site Icon size in pixels. */
    5207                                                 '<p>' . __( '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.' ) . '</p>',
    5208                                                 '<code>512 &times; 512</code>'
     5206                                                /* translators: 1: pixel value for icon size. 2: pixel value for icon size. */
     5207                                                '<p>' . __( '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.' ) . '</p>',
     5208                                                512,
     5209                                                512
    52095210                                        ),
    52105211                                        'section'     => 'title_tagline',

  • trunk/src/wp-includes/css/media-views.css

    r58917 r58927  
    25332533        }
    25342534
    2535         .options-general-php .crop-content.site-icon {
     2535        .options-general-php .crop-content.site-icon,
     2536        .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
    25362537                margin-right: 262px;
    25372538        }
    … …  
    28332834        }
    28342835
    2835         .options-general-php .crop-content.site-icon {
     2836        .options-general-php .crop-content.site-icon,
     2837        .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
    28362838                margin-right: 0;
    28372839        }

  • trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php

    r57730 r58927  
    5555                        <span class="customize-control-title">{{ data.label }}</span>
    5656                <# } #>
    57                 <# if ( data.description ) { #>
    58                         <span class="description customize-control-description">{{{ data.description }}}</span>
    59                 <# } #>
    6057
    6158                <# if ( data.attachment && data.attachment.id ) { #>
    6259                        <div class="attachment-media-view">
    6360                                <# if ( data.attachment.sizes ) { #>
    64                                         <div class="site-icon-preview wp-clearfix">
    65                                                 <div class="favicon-preview">
    66                                                         <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="" />
    67 
    68                                                         <div class="favicon">
    69                                                                 <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{
    70                                                                         data.attachment.alt ?
    71                                                                                 wp.i18n.sprintf(
    72                                                                                         <?php
    73                                                                                         /* translators: %s: The selected image alt text. */
    74                                                                                         echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
    75                                                                                         ?>
    76                                                                                         ,
    77                                                                                         data.attachment.alt
    78                                                                                 ) :
    79                                                                                 wp.i18n.sprintf(
    80                                                                                         <?php
    81                                                                                         /* translators: %s: The selected image filename. */
    82                                                                                         echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
    83                                                                                         ?>
    84                                                                                         ,
    85                                                                                         data.attachment.filename
    86                                                                                 )
    87                                                                 }}" />
     61                                        <style>
     62                                                :root{
     63                                                        --site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' );
     64                                                }
     65                                        </style>
     66                                        <div class="site-icon-preview customizer">
     67                                                <div class="direction-wrap">
     68                                                        <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{
     69                                                                data.attachment.alt ?
     70                                                                        wp.i18n.sprintf(
     71                                                                                <?php
     72                                                                                /* translators: %s: The selected image alt text. */
     73                                                                                echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
     74                                                                                ?>
     75                                                                                ,
     76                                                                                data.attachment.alt
     77                                                                        ) :
     78                                                                        wp.i18n.sprintf(
     79                                                                                <?php
     80                                                                                /* translators: %s: The selected image filename. */
     81                                                                                echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) );
     82                                                                                ?>
     83                                                                                ,
     84                                                                                data.attachment.filename
     85                                                                        )
     86                                                        }}" />
     87                                                        <div class="site-icon-preview-browser">
     88                                                                <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>
     89                                                                <div class="site-icon-preview-tab">
     90                                                                        <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="browser-icon-preview" alt="{{
     91                                                                                data.attachment.alt ?
     92                                                                                        wp.i18n.sprintf(
     93                                                                                                <?php
     94                                                                                                /* translators: %s: The selected image alt text. */
     95                                                                                                echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) );
     96                                                                                                ?>
     97                                                                                                ,
     98                                                                                                data.attachment.alt
     99                                                                                        ) :
     100                                                                                        wp.i18n.sprintf(
     101                                                                                                <?php
     102                                                                                                /* translators: %s: The selected image filename. */
     103                                                                                                echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) );
     104                                                                                                ?>
     105                                                                                                ,
     106                                                                                                data.attachment.filename
     107                                                                                        )
     108                                                                        }}" />
     109                                                                        <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></div>
     110                                                                                <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
     111                                                                                        <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" />
     112                                                                                </svg>
     113                                                                        </div>
     114                                                                </div>
    88115                                                        </div>
    89                                                         <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
    90116                                                </div>
    91                                                 <img class="app-icon-preview" src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{
    92                                                         data.attachment.alt ?
    93                                                                 wp.i18n.sprintf(
    94                                                                         <?php
    95                                                                         /* translators: %s: The selected image alt text. */
    96                                                                         echo wp_json_encode( __( 'App icon preview: Current image: %s' ) )
    97                                                                         ?>
    98                                                                         ,
    99                                                                         data.attachment.alt
    100                                                                 ) :
    101                                                                 wp.i18n.sprintf(
    102                                                                         <?php
    103                                                                         /* translators: %s: The selected image filename. */
    104                                                                         echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) );
    105                                                                         ?>
    106                                                                         ,
    107                                                                         data.attachment.filename
    108                                                                 )
    109                                                 }}"/>
    110117                                        </div>
    111118                                <# } #>
    … …  
    129136                        </div>
    130137                <# } #>
     138                <# if ( data.description ) { #>
     139                        <span class="description customize-control-description">{{{ data.description }}}</span>
     140                <# } #>
    131141                <?php
    132142        }

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

    r58774 r58927  
    15431543
    15441544        <?php // Template for the Site Icon preview, used for example in the Customizer. ?>
    1545         <script type="text/html" id="tmpl-site-icon-preview">
    1546                 <h2><?php _e( 'Preview' ); ?></h2>
    1547                 <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
    1548                 <div class="favicon-preview">
    1549                         <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
    1550 
    1551                         <div class="favicon">
    1552                                 <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
    1553                         </div>
    1554                         <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span>
    1555                 </div>
    1556 
    1557                 <strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
    1558                 <div class="app-icon-preview">
    1559                         <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
     1545        <script type="text/html" id="tmpl-site-icon-preview-crop">
     1546                <style>
     1547                        :root{
     1548                                --site-icon-url: url( "{{ data.url }}" );
     1549                        }
     1550                </style>
     1551                <h2><?php _ex( 'Site Icon Preview', 'noun' ); ?></h2>
     1552                <p><?php _e( 'As an app icon and a browser icon.' ); ?></p>
     1553                <div class="site-icon-preview crop">
     1554                        <div class="image-preview-wrap app-icon-preview">
     1555                                <img id="preview-app-icon" src="{{ data.url }}" class="app-icon-preview" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" />
     1556                        </div>
     1557                        <div class="site-icon-preview-browser">
     1558                                <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>
     1559                                <div class="site-icon-preview-tab">
     1560                                        <div class="image-preview-wrap browser">
     1561                                                <img id="preview-favicon" src="{{ data.url }}" class="browser-icon-preview" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" />
     1562                                        </div>
     1563                                        <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></div>
     1564                                                <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button">
     1565                                                        <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" />
     1566                                                </svg>
     1567                                        </div>
     1568                                </div>
     1569                        </div>
    15601570                </div>
    15611571        </script>
Note: See TracChangeset for help on using the changeset viewer.