WordPress.org
Get WordPress

Make WordPress Core

Changeset 58927


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