WordPress.org
Get WordPress

Make WordPress Core

Changeset 57602


Ignore:
Timestamp:
02/12/2024 09:55:44 PM (3 years ago)
Author:
jorbin
Message:

General: Add an option to configure the site icon in general settings.

This restores the site icon setting to its original home on the settings page where it lives with the title and tagline.

The base for this code was originally added in [32994] and then removed in [33329]. The majority of the modification to that version are to remove the no-js pieces and make the workflow completely inline rather than putting the cropping on a separate page.

Additionally, since image crops rely on the ability to upload an image, this setting is gated by the upload_files capability.

Follow-up to: [32994], [33329].

Props jorbin, audrasjb, mukesh27, joedolson, afercia, kebbet, swissspidy, obenland, jameskoster, kjellr, andraganescu, stacimc, mikeschroder, h71, krupajnanda, huzaifaalmesbah.
Fixes #54370.
See #16434.

Location:
trunk
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Gruntfile.js

    r57492 r57602  
    333333                                        [ WORKING_DIR + 'wp-admin/js/tags.js' ]: [ './src/js/_enqueues/admin/tags.js' ],
    334334                                        [ WORKING_DIR + 'wp-admin/js/site-health.js' ]: [ './src/js/_enqueues/admin/site-health.js' ],
     335                                        [ WORKING_DIR + 'wp-admin/js/site-icon.js' ]: [ './src/js/_enqueues/admin/site-icon.js' ],
    335336                                        [ WORKING_DIR + 'wp-admin/js/privacy-tools.js' ]: [ './src/js/_enqueues/admin/privacy-tools.js' ],
    336337                                        [ WORKING_DIR + 'wp-admin/js/theme-plugin-editor.js' ]: [ './src/js/_enqueues/wp/theme-plugin-editor.js' ],

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

    r57572 r57602  
    790790}
    791791
     792.button-add-site-icon{
     793        width: 100%;
     794        cursor: pointer;
     795        text-align: center;
     796        border: 1px dashed #c3c4c7;
     797        box-sizing: border-box;
     798        padding: 9px 0;
     799        line-height: 1.6;
     800        max-width: 270px;
     801}
     802
     803.button-add-site-icon:focus,
     804.button-add-site-icon:hover{
     805        background: white;
     806}
     807
     808.site-icon-section .favicon-preview{
     809        float: left;
     810}
     811.site-icon-section .app-icon-preview{
     812        float: left;
     813        margin: 0 20px;
     814}
     815
     816.site-icon-section .site-icon-preview img{
     817        max-width: 100%;
     818}
     819
     820.button-ad-site-icon:focus{
     821        background-color: #fff;
     822        border-color: #3582c4;
     823        border-style: solid;
     824        box-shadow: 0 0 0 1px #3582c4;
     825        outline: 2px solid transparent;
     826}
     827
    792828/*------------------------------------------------------------------------------
    793829  15.0 - Comments Screen

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

    r46586 r57602  
    88        position: relative;
    99        max-width: 180px;
     10        float: left;
    1011}
    1112
    … …  
    5354        margin-top: 9px;
    5455}
     56
     57.site-icon-section button.reset {
     58        color: #b32d2e;
     59        text-decoration: none;
     60        border-color: transparent;
     61        box-shadow: none;
     62        background: transparent;
     63        margin: 0 10px;
     64}
     65
     66.site-icon-section button.reset:focus,
     67.site-icon-section button.reset:hover {
     68        background: #b32d2e;
     69        color: #fff;
     70        border-color: #b32d2e;
     71        box-shadow: 0 0 0 1px #b32d2e;
     72}

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

    r56680 r57602  
    9898</tr>
    9999
    100 <?php
     100<?php if ( current_user_can( 'upload_files' ) ) : ?>
     101<tr class="hide-if-no-js site-icon-section">
     102<th scope="row"><?php _e( 'Site Icon' ); ?></th>
     103<td>
     104        <?php
     105        wp_enqueue_media();
     106        wp_enqueue_script( 'site-icon' );
     107
     108        $classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
     109        $classes_for_update_button = 'button';
     110
     111        $classes_for_avatar = 'avatar avatar-150';
     112        if ( has_site_icon() ) {
     113                $classes_for_avatar          .= ' has-site-icon';
     114                $classes_for_button           = $classes_for_update_button;
     115                $classes_for_button_on_change = $classes_for_upload_button;
     116        } else {
     117                $classes_for_avatar          .= ' hidden';
     118                $classes_for_button           = $classes_for_upload_button;
     119                $classes_for_button_on_change = $classes_for_update_button;
     120        }
     121
     122
     123        ?>
     124        <div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
     125                <div class="favicon-preview">
     126                        <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
     127                        <div class="favicon">
     128                                <img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon">
     129                        </div>
     130                        <span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
     131                </div>
     132                <img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon">
     133        </div>
     134        <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
     135        <p>
     136                <button type="button"
     137                        id="choose-from-library-link"
     138                        type="button"
     139                        class="<?php echo esc_attr( $classes_for_button ); ?>"
     140                        data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
     141                        data-size="512"
     142                        data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>"
     143                        data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>"
     144                        data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"
     145                        data-state="<?php echo esc_attr( has_site_icon() ); ?>"
     146
     147                >
     148                        <?php if ( has_site_icon() ) : ?>
     149                                <?php _e( 'Change Site Icon' ); ?>
     150                        <?php else : ?>
     151                                <?php _e( 'Choose a Site Icon' ); ?>
     152                        <?php endif; ?>
     153                </button>
     154                <button
     155                        id="js-remove-site-icon"
     156                        type="button"
     157                        <?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?>
     158                >
     159                        <?php _e( 'Remove Site Icon' ); ?>
     160                </button>
     161        </p>
     162
     163        <p class="description" id="site-icon-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" id="site-icon-further-description">
     167                <?php
     168                        /* translators: %s: Site Icon size in pixels. */
     169                        printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
     170                ?>
     171        </p>
     172
     173</td>
     174</tr>
     175
     176        <?php
     177endif;
     178        /* End Site Icon */
     179
    101180if ( ! is_multisite() ) {
    102181        $wp_site_url_class = '';

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

    r56949 r57602  
    9191                'blogname',
    9292                'blogdescription',
     93                'site_icon',
    9394                'gmt_offset',
    9495                'date_format',

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

    r57553 r57602  
    850850}
    851851
     852.options-general-php .crop-content.site-icon,
    852853.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
    853854        margin-right: 300px;
    … …  
    25592560        .media-sidebar {
    25602561                width: 230px;
     2562        }
     2563
     2564        .options-general-php .crop-content.site-icon {
     2565                margin-right: 262px;
    25612566        }
    25622567
    … …  
    28282833        }
    28292834
     2835        .options-general-php .crop-content.site-icon {
     2836                margin-right: 0;
     2837        }
     2838
    28302839        .media-sidebar {
    28312840                z-index: 1900;

  • trunk/src/wp-includes/script-loader.php

    r57557 r57602  
    849849
    850850        $scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 );
     851
     852        $scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery', 'jcrop' ), false, 1 );
    851853
    852854        // WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source.
Note: See TracChangeset for help on using the changeset viewer.