Make WordPress Core

Changeset 57602


Ignore:
Timestamp:
02/12/2024 09:55:44 PM (4 months 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.