WordPress.org

Make WordPress Core

Ticket #16434: 16434.7.diff

File 16434.7.diff, 36.6 KB (added by flixos90, 3 years ago)

fixed image cropping bug when Javascript was disabled

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

     
     1/*------------------------------------------------------------------------------
     2  28.0 - Site Icon
     3------------------------------------------------------------------------------*/
     4
     5.site-icon-image {
     6        float: left;
     7        margin: 0 20px 0 0;
     8}
     9.site-icon-content {
     10        overflow: hidden;
     11        padding: 10px;
     12        position: relative;
     13}
     14.site-icon-crop-shell {
     15        max-width: 720px;
     16}
     17.site-icon-crop-preview-shell {
     18        float: right;
     19        overflow: hidden;
     20        width: 172px;
     21}
     22.site-icon-crop-preview-shell h3 {
     23        margin-top: 0;
     24}
     25.site-icon-crop-favicon-preview-shell {
     26        margin-bottom: 20px;
     27        position: relative;
     28}
     29.site-icon-crop-preview-favicon {
     30        height: 16px;
     31        left: 102px;
     32        overflow: hidden;
     33        position: absolute;
     34        top: 23px;
     35        width: 16px;
     36}
     37.site-icon-browser-title {
     38        height: 16px;
     39        left: 128px;
     40        overflow: hidden;
     41        position: absolute;
     42        top: 23px;
     43        width: 100px;
     44}
     45.site-icon-crop-preview-homeicon {
     46        border-radius: 16px;
     47        height: 64px;
     48        overflow: hidden;
     49        width: 64px;
     50}
  • src/wp-admin/css/wp-admin.css

     
    1111@import url(nav-menus.css);
    1212@import url(widgets.css);
    1313@import url(l10n.css);
     14@import url(site-icon.css);
  • src/wp-admin/includes/admin.php

     
    6464/** WordPress User Administration API */
    6565require_once(ABSPATH . 'wp-admin/includes/user.php');
    6666
     67/** WordPress Site Icon API */
     68require_once(ABSPATH . 'wp-admin/includes/site-icon.php');
     69
    6770/** WordPress Update Administration API */
    6871require_once(ABSPATH . 'wp-admin/includes/update.php');
    6972
  • src/wp-admin/includes/site-icon.php

     
     1<?php
     2
     3/**
     4 * Class WP_Site_Icon.
     5 *
     6 * @since 4.3.0
     7 */
     8class WP_Site_Icon {
     9
     10        /**
     11         * The minimum size of the site icon.
     12         *
     13         * @since 4.3.0
     14         *
     15         * @var int
     16         */
     17        public $min_size  = 512;
     18
     19        /**
     20         * The size to which to crop the image so that we can display it in the UI nicely.
     21         *
     22         * @since 4.3.0
     23         *
     24         * @var int
     25         */
     26        public $page_crop = 512;
     27
     28        /**
     29         *
     30         * @since 4.3.0
     31         *
     32         * @var array
     33         */
     34        public $site_icon_sizes = array(
     35                /**
     36                 * Square, medium sized tiles for IE11+.
     37                 *
     38                 * @link https://msdn.microsoft.com/library/dn455106(v=vs.85).aspx
     39                 */
     40                270,
     41
     42                /**
     43                 * App icons up to iPhone 6 Plus.
     44                 *
     45                 * @link https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
     46                 */
     47                180,
     48
     49                // Our regular Favicon.
     50                32,
     51        );
     52
     53        /**
     54         * Register our actions and filters.
     55         *
     56         * @since 4.3.0
     57         */
     58        public function __construct() {
     59
     60                // Add the favicon to the backend.
     61                add_action( 'admin_head', 'wp_site_icon' );
     62
     63                add_action( 'admin_menu', array( $this, 'admin_menu_upload_site_icon' ) );
     64
     65                add_action( 'admin_action_set_site_icon',    array( $this, 'set_site_icon'    ) );
     66                add_action( 'admin_action_remove_site_icon', array( $this, 'remove_site_icon' ) );
     67
     68                add_action( 'delete_attachment', array( $this, 'delete_attachment_data' ), 10, 1 );
     69                add_filter( 'get_post_metadata', array( $this, 'get_post_metadata' ), 10, 4 );
     70        }
     71
     72        /**
     73         * Add a hidden upload page.
     74         *
     75         * There is no need to access it directly.
     76         *
     77         * @since 4.3.0
     78         */
     79        public function admin_menu_upload_site_icon() {
     80                $hook = add_submenu_page( null, __( 'Site Icon' ), __( 'Site Icon' ), 'manage_options', 'site-icon', array( $this, 'upload_site_icon_page' ) );
     81
     82                add_action( "load-$hook", array( $this, 'add_upload_settings' ) );
     83                add_action( "admin_print_scripts-$hook", array( $this, 'enqueue_scripts' ) );
     84        }
     85
     86        /**
     87         * Add scripts to admin settings pages.
     88         *
     89         * @since 4.3.0
     90         */
     91        public function enqueue_scripts() {
     92                wp_enqueue_style( 'jcrop' );
     93                wp_enqueue_script( 'site-icon-crop' );
     94        }
     95
     96        /**
     97         * Load on when the admin is initialized.
     98         *
     99         * @since 4.3.0
     100         */
     101        public function add_upload_settings() {
     102                add_settings_section( 'site-icon-upload', false, false, 'site-icon-upload' );
     103                add_settings_field( 'site-icon-upload', __( 'Upload Image' ), array( $this, 'upload_field' ), 'site-icon-upload', 'site-icon-upload', array(
     104                        'label_for' => 'site-icon-upload',
     105                ) );
     106        }
     107
     108        /**
     109         * Removes site icon.
     110         *
     111         * @since 4.3.0
     112         */
     113        public function remove_site_icon() {
     114                check_admin_referer( 'remove-site-icon' );
     115
     116                $this->delete_site_icon();
     117
     118                add_settings_error( 'site-icon', 'icon-removed', __( 'Site Icon removed.' ), 'updated' );
     119        }
     120
     121        /**
     122         * Uploading a site_icon is a 3 step process
     123         *
     124         * 1. Select the file to upload
     125         * 2. Crop the file
     126         * 3. Confirmation
     127         *
     128         * @since 4.3.0
     129         */
     130        public function upload_site_icon_page() {
     131                $action = isset( $_REQUEST['action'] ) ? $_REQUEST['action'] : 'select_site_icon';
     132
     133                switch ( $action ) {
     134                        case 'select_site_icon':
     135                                $this->select_page();
     136                                break;
     137
     138                        case 'crop_site_icon':
     139                                $this->crop_page();
     140                                break;
     141
     142                        default:
     143                                wp_safe_redirect( admin_url( 'options-general.php#site-icon' ) );
     144                                exit;
     145                }
     146        }
     147
     148        /**
     149         * Displays the site_icon form to upload the image.
     150         *
     151         * @since 4.3.0
     152         */
     153        public function select_page() {
     154                ?>
     155                <div class="wrap">
     156                        <h2><?php _e( 'Add Site Icon' ); ?></h2>
     157                        <?php settings_errors( 'site-icon' ); ?>
     158                        <?php do_settings_sections( 'site-icon-upload' ); ?>
     159                </div>
     160        <?php
     161        }
     162
     163        /**
     164         * Settings field for file upload.
     165         *
     166         * @since 4.3.0
     167         */
     168        public function upload_field() {
     169                wp_enqueue_media();
     170                wp_enqueue_script( 'site-icon' );
     171                wp_dequeue_script( 'site-icon-crop' );
     172
     173                $update_url = esc_url( add_query_arg( array(
     174                        'page' => 'site-icon',
     175                        'action' => 'crop_site_icon',
     176                ), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
     177                ?>
     178                <p class="hide-if-no-js">
     179                        <label class="screen-reader-text" for="choose-from-library-link"><?php _e( 'Choose an image from your media library:' ); ?></label>
     180                        <button type="button" id="choose-from-library-link" class="button" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"><?php _e( 'Choose Image' ); ?></button>
     181                </p>
     182                <form class="hide-if-js" action="<?php echo esc_url( admin_url( 'options-general.php?page=site-icon' ) ); ?>" method="post" enctype="multipart/form-data">
     183                        <input name="action" value="crop_site_icon" type="hidden" />
     184                        <input name="site-icon" type="file" />
     185                        <input name="submit" value="<?php esc_attr_e( 'Upload Image' ); ?>" type="submit" class="button button-primary" />
     186                        <p class="description">
     187                                <?php printf( __( 'The image is recommended to be a square image of at least %spx in both width and height.' ), "<strong>$this->min_size</strong>" ); ?>
     188                        </p>
     189                        <?php wp_nonce_field( 'crop-site-icon' ); ?>
     190                </form>
     191        <?php
     192        }
     193
     194        /**
     195         * Crop a the image admin view.
     196         *
     197         * @since 4.3.0
     198         */
     199        public function crop_page() {
     200                check_admin_referer( 'crop-site-icon' );
     201
     202                if ( isset( $_GET['file'] ) ) {
     203                        $attachment_id = absint( $_GET['file'] );
     204                        $file          = get_attached_file( $attachment_id, true );
     205                        $url           = wp_get_attachment_image_src( $attachment_id, 'full' );
     206                        $url           = $url[0];
     207                } else {
     208                        $upload        = $this->handle_upload();
     209                        $attachment_id = $upload['attachment_id'];
     210                        $file          = $upload['file'];
     211                        $url           = $upload['url'];
     212                }
     213
     214                $image_size = getimagesize( $file );
     215
     216                if ( $image_size[0] < $this->min_size ) {
     217                        add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in width.' ), $this->min_size ) );
     218
     219                        // back to step one
     220                        $this->select_page();
     221
     222                        return;
     223                }
     224
     225                if ( $image_size[1] < $this->min_size ) {
     226                        add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in height.' ), $this->min_size ) );
     227
     228                        // Back to step one.
     229                        $this->select_page();
     230
     231                        return;
     232                }
     233
     234                // Let's resize the image so that the user can easier crop a image that in the admin view.
     235                $crop_height = absint( $this->page_crop * $image_size[1] / $image_size[0] );
     236                $cropped = wp_crop_image( $attachment_id, 0, 0, 0, 0, $this->page_crop, $crop_height );
     237                if ( ! $cropped || is_wp_error( $cropped ) ) {
     238                        wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
     239                }
     240                $cropped_size = getimagesize( $cropped );
     241
     242                // set default values (in case of no JS)
     243                $crop_ratio     = $image_size[0] / $cropped_size[0];
     244                if ( $cropped_size[0] < $cropped_size[1] ) {
     245                        $crop_x                 = 0;
     246                        $crop_y                 = absint( ( $cropped_size[1] - $cropped_size[0] ) / 2 );
     247                        $crop_size      = $cropped_size[0];
     248                } elseif ( $cropped_size[0] > $cropped_size[1] ) {
     249                        $crop_x                 = absint( ( $cropped_size[0] - $cropped_size[1] ) / 2 );
     250                        $crop_y                 = 0;
     251                        $crop_size      = $cropped_size[1];
     252                } else {
     253                        $crop_x                 = 0;
     254                        $crop_y                 = 0;
     255                        $crop_size      = $cropped_size[0];
     256                }
     257
     258                wp_delete_file( $cropped );
     259
     260                wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', $this->initial_crop_data( $crop_ratio, $cropped_size ) );
     261                ?>
     262
     263                <div class="wrap">
     264                        <h2 class="site-icon-title"><?php esc_html_e( 'Site Icon' ); ?></h2>
     265                        <?php settings_errors( 'site-icon' ); ?>
     266
     267                        <div class="site-icon-crop-shell">
     268                                <form action="options-general.php" method="post" enctype="multipart/form-data">
     269                                        <p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
     270                                        <p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
     271
     272                                        <div class="site-icon-crop-preview-shell hide-if-no-js">
     273                                                <h3><?php esc_html_e( 'Preview' ); ?></h3>
     274                                                <strong><?php esc_html_e( 'As your favicon' ); ?></strong>
     275                                                <div class="site-icon-crop-favicon-preview-shell">
     276                                                        <img src="images/browser.png" class="site-icon-browser-preview" width="172" height="79" alt="<?php esc_attr_e( 'Browser Chrome' ); ?>"/>
     277
     278                                                        <div class="site-icon-crop-preview-favicon">
     279                                                                <img src="<?php echo esc_url( $url ); ?>" id="preview-favicon" alt="<?php esc_attr_e( 'Preview Favicon' ); ?>"/>
     280                                                        </div>
     281                                                        <span class="site-icon-browser-title"><?php bloginfo( 'name' ); ?></span>
     282                                                </div>
     283
     284                                                <strong><?php esc_html_e( 'As a mobile icon' ); ?></strong>
     285                                                <div class="site-icon-crop-preview-homeicon">
     286                                                        <img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
     287                                                </div>
     288                                        </div>
     289                                        <img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="<?php echo esc_attr( $cropped_size[0] ); ?>" height="<?php echo esc_attr( $cropped_size[1] ); ?>" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
     290
     291                                        <input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" />
     292                                        <input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" />
     293                                        <input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $crop_size ); ?>" />
     294                                        <input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $crop_size ); ?>" />
     295
     296                                        <input type="hidden" name="action" value="set_site_icon" />
     297                                        <input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" />
     298                                        <input type="hidden" name="crop_ratio" value="<?php echo esc_attr( $crop_ratio ); ?>" />
     299                                        <?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?>
     300                                                <input type="hidden" name="create-new-attachment" value="true" />
     301                                        <?php endif; ?>
     302                                        <?php wp_nonce_field( 'set-site-icon' ); ?>
     303
     304                                        <p class="submit">
     305                                                <?php submit_button( __( 'Crop and Publish' ), 'primary hide-if-no-js', 'submit', false ); ?>
     306                                                <?php submit_button( __( 'Publish' ), 'primary hide-if-js', 'submit', false ); ?>
     307                                                <a class="button secondary" href="options-general.php"><?php _e( 'Cancel' ); ?></a>
     308                                        </p>
     309                                </form>
     310                        </div>
     311                </div>
     312        <?php
     313        }
     314
     315        /**
     316         * Saves a new Site Icon.
     317         *
     318         * @since 4.3.0
     319         */
     320        public function set_site_icon() {
     321                check_admin_referer( 'set-site-icon' );
     322
     323                // Delete any existing site icon images.
     324                $this->delete_site_icon();
     325
     326                $attachment_id = absint( $_POST['attachment_id'] );
     327
     328                // TODO
     329                if ( empty( $_POST['skip-cropping'] ) ) {
     330                        $crop_ratio = (float) $_POST['crop_ratio'];
     331                        $crop_data = $this->convert_coordinates_from_resized_to_full( $_POST['crop-x'], $_POST['crop-y'], $_POST['crop-w'], $_POST['crop-h'], $crop_ratio );
     332                        $cropped = wp_crop_image( $attachment_id, $crop_data['crop_x'], $crop_data['crop_y'], $crop_data['crop_width'], $crop_data['crop_height'], $this->min_size, $this->min_size );
     333                } elseif ( ! empty( $_POST['create-new-attachment'] ) ) {
     334                        $cropped = _copy_image_file( $attachment_id );
     335                } else {
     336                        $cropped = get_attached_file( $attachment_id );
     337                }
     338
     339                if ( ! $cropped || is_wp_error( $cropped ) ) {
     340                        wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
     341                }
     342
     343                $object = $this->create_attachment_object( $cropped, $attachment_id );
     344
     345                if ( ! empty( $_POST['create-new-attachment'] ) ) {
     346                        unset( $object['ID'] );
     347                }
     348
     349                // Update the attachment
     350                add_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
     351                $attachment_id = $this->insert_attachment( $object, $cropped );
     352                remove_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
     353
     354                // Save the site_icon data into option
     355                update_option( 'site_icon', $attachment_id );
     356
     357                add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' );
     358        }
     359
     360        /**
     361         * This function is used to pass data to the localize script
     362         * so that we can center the cropper and also set the minimum
     363         * cropper if we still want to show the
     364         *
     365         * @since 4.3.0
     366         *
     367         * @param float $ratio
     368         * @param array $cropped_size
     369         * @return array
     370         */
     371        public function initial_crop_data( $ratio, $cropped_size ) {
     372                $init_x = $init_y = $init_size = 0;
     373
     374                $min_crop_size  = ( $this->min_size / $ratio );
     375                $resized_width  = $cropped_size[0];
     376                $resized_height = $cropped_size[1];
     377
     378                // Landscape format ( width > height )
     379                if ( $resized_width > $resized_height ) {
     380                        $init_x    = ( $this->page_crop - $resized_height ) / 2;
     381                        $init_size = $resized_height;
     382                }
     383
     384                // Portrait format ( height > width )
     385                if ( $resized_width < $resized_height ) {
     386                        $init_y    = ( $this->page_crop - $resized_width ) / 2;
     387                        $init_size = $resized_height;
     388                }
     389
     390                // Square height == width
     391                if ( $resized_width == $resized_height ) {
     392                        $init_size = $resized_height;
     393                }
     394
     395                return array(
     396                        'init_x'    => $init_x,
     397                        'init_y'    => $init_y,
     398                        'init_size' => $init_size,
     399                        'min_size'  => $min_crop_size,
     400                );
     401        }
     402
     403        /**
     404         * Converts the coordinates from the downsized image to the original image for accurate cropping.
     405         *
     406         * @since 4.3.0
     407         *
     408         * @param int   $crop_x
     409         * @param int   $crop_y
     410         * @param int   $crop_width
     411         * @param int   $crop_height
     412         * @param float $ratio
     413         * @return array
     414         */
     415        public function convert_coordinates_from_resized_to_full( $crop_x, $crop_y, $crop_width, $crop_height, $ratio ) {
     416                return array(
     417                        'crop_x'      => floor( $crop_x * $ratio ),
     418                        'crop_y'      => floor( $crop_y * $ratio ),
     419                        'crop_width'  => floor( $crop_width * $ratio ),
     420                        'crop_height' => floor( $crop_height * $ratio ),
     421                );
     422        }
     423
     424        /**
     425         * Upload the file to be cropped in the second step.
     426         *
     427         * @since 4.3.0
     428         */
     429        public function handle_upload() {
     430                $uploaded_file = $_FILES['site-icon'];
     431                $file_type     = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] );
     432                if ( ! wp_match_mime_types( 'image', $file_type['type'] ) ) {
     433                        wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) );
     434                }
     435
     436                $file = wp_handle_upload( $uploaded_file, array( 'test_form' => false ) );
     437
     438                if ( isset( $file['error'] ) ) {
     439                        wp_die( $file['error'], __( 'Image Upload Error' ) );
     440                }
     441
     442                $url      = $file['url'];
     443                $type     = $file['type'];
     444                $file     = $file['file'];
     445                $filename = basename( $file );
     446
     447                // Construct the object array
     448                $object = array(
     449                        'post_title'     => $filename,
     450                        'post_content'   => $url,
     451                        'post_mime_type' => $type,
     452                        'guid'           => $url,
     453                        'context'        => 'site-icon',
     454                );
     455
     456                // Save the data
     457                $attachment_id = wp_insert_attachment( $object, $file );
     458
     459                return compact( 'attachment_id', 'file', 'filename', 'url', 'type' );
     460        }
     461
     462        /**
     463         * Create an attachment 'object'.
     464         *
     465         * @since 4.3.0
     466         *
     467         * @param string $cropped              Cropped image URL.
     468         * @param int    $parent_attachment_id Attachment ID of parent image.
     469         * @return array Attachment object.
     470         */
     471        public function create_attachment_object( $cropped, $parent_attachment_id ) {
     472                $parent     = get_post( $parent_attachment_id );
     473                $parent_url = $parent->guid;
     474                $url        = str_replace( basename( $parent_url ), basename( $cropped ), $parent_url );
     475
     476                $size       = @getimagesize( $cropped );
     477                $image_type = ( $size ) ? $size['mime'] : 'image/jpeg';
     478
     479                $object = array(
     480                        'ID'             => $parent_attachment_id,
     481                        'post_title'     => basename( $cropped ),
     482                        'post_content'   => $url,
     483                        'post_mime_type' => $image_type,
     484                        'guid'           => $url,
     485                        'context'        => 'site-icon'
     486                );
     487
     488                return $object;
     489        }
     490
     491        /**
     492         * Insert an attachment and its metadata.
     493         *
     494         * @since 4.3.0
     495         *
     496         * @param array  $object  Attachment object.
     497         * @param string $cropped Cropped image URL.
     498         * @return int Attachment ID.
     499         */
     500        public function insert_attachment( $object, $cropped ) {
     501                $attachment_id = wp_insert_attachment( $object, $cropped );
     502                $metadata      = wp_generate_attachment_metadata( $attachment_id, $cropped );
     503
     504                /**
     505                 * Filter the site icon attachment metadata.
     506                 *
     507                 * @since 4.3.0
     508                 *
     509                 * @see wp_generate_attachment_metadata()
     510                 *
     511                 * @param array $metadata Attachment metadata.
     512                 */
     513                $metadata = apply_filters( 'site_icon_attachment_metadata', $metadata );
     514                wp_update_attachment_metadata( $attachment_id, $metadata );
     515
     516                return $attachment_id;
     517        }
     518
     519        /**
     520         * Add additional sizes to be made when creating the site_icon images.
     521         *
     522         * @since 4.3.0
     523         *
     524         * @param array $sizes
     525         * @return array
     526         */
     527        public function additional_sizes( $sizes = array() ) {
     528                $only_crop_sizes = array();
     529
     530                /**
     531                 * Filters the different dimensions that a site icon is saved in.
     532                 *
     533                 * @since 4.3.0
     534                 *
     535                 * @param array $site_icon_sizes Sizes available for the Site Icon.
     536                 */
     537                $this->site_icon_sizes = apply_filters( 'site_icon_image_sizes', $this->site_icon_sizes );
     538                // use a natural sort of numbers
     539                natsort( $this->site_icon_sizes );
     540                $this->site_icon_sizes = array_reverse( $this->site_icon_sizes );
     541
     542                // ensure that we only resize the image into
     543                foreach ( $sizes as $name => $size_array ) {
     544                        if ( $size_array['crop'] ) {
     545                                $only_crop_sizes[ $name ] = $size_array;
     546                        }
     547                }
     548
     549                foreach ( $this->site_icon_sizes as $size ) {
     550                        if ( $size < $this->min_size ) {
     551                                $only_crop_sizes[ 'site_icon-' . $size ] = array(
     552                                        'width ' => $size,
     553                                        'height' => $size,
     554                                        'crop'   => true,
     555                                );
     556                        }
     557                }
     558
     559                return $only_crop_sizes;
     560        }
     561
     562        /**
     563         * Add Site Icon sizes to the array of image sizes on demand.
     564         *
     565         * @since 4.3.0
     566         *
     567         * @param array $sizes
     568         * @return array
     569         */
     570        public function intermediate_image_sizes( $sizes = array() ) {
     571                /** This filter is documented in wp-admin/site-icon.php */
     572                $this->site_icon_sizes = apply_filters( 'site_icon_image_sizes', $this->site_icon_sizes );
     573                foreach ( $this->site_icon_sizes as $size ) {
     574                        $sizes[] = 'site_icon-' . $size;
     575                }
     576
     577                return $sizes;
     578        }
     579
     580        /**
     581         * Deletes all additional image sizes, used for site icons.
     582         *
     583         * @since 4.3.0
     584         *
     585         * @return bool
     586         */
     587        public function delete_site_icon() {
     588                // We add the filter to make sure that we also delete all the added images
     589                add_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) );
     590                wp_delete_attachment( get_option( 'site_icon' ), true );
     591                remove_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) );
     592
     593                return delete_option( 'site_icon' );
     594        }
     595
     596        /**
     597         * Deletes the Site Icon when the image file is deleted.
     598         *
     599         * @since 4.3.0
     600         *
     601         * @param int $post_id Attachment ID.
     602         */
     603        public function delete_attachment_data( $post_id ) {
     604                // The user could be deleting the site_icon image
     605                $site_icon_id = get_option( 'site_icon' );
     606
     607                if ( $site_icon_id && $post_id == $site_icon_id ) {
     608                        delete_option( 'site_icon' );
     609                }
     610        }
     611
     612        /**
     613         * Adds custom image sizes when meta data for an image is requested, that happens to be used as Site Icon.
     614         *
     615         * @since 4.3.0
     616         *
     617         * @param null|array|string $value    The value get_metadata() should
     618         *                                    return - a single metadata value,
     619         *                                    or an array of values.
     620         * @param int               $post_id  Post ID.
     621         * @param string            $meta_key Meta key.
     622         * @param string|array      $single   Meta value, or an array of values.
     623         * @return array|null|string
     624         */
     625        public function get_post_metadata( $value, $post_id, $meta_key, $single ) {
     626                $site_icon_id = get_option( 'site_icon' );
     627
     628                if ( $post_id == $site_icon_id && '_wp_attachment_backup_sizes' == $meta_key && $single ) {
     629                        add_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) );
     630                }
     631
     632                return $value;
     633        }
     634}
     635
     636$GLOBALS['wp_site_icon'] = new WP_Site_Icon;
  • src/wp-admin/includes/template.php

     
    17781778                        $media_states[] = __( 'Background Image' );
    17791779        }
    17801780
     1781        if ( $post->ID == get_option( 'site_icon_id' ) ) {
     1782                $media_states[] = __( 'Site Icon' );
     1783        }
     1784
    17811785        /**
    17821786         * Filter the default media display states for items in the Media list table.
    17831787         *
  • src/wp-admin/js/site-icon-crop.js

     
     1/* global wpSiteIconCropData, jQuery */
     2(function($) {
     3        var jcrop_api = {},
     4                siteIconCrop = {
     5
     6                updateCoords : function ( coords ) {
     7
     8                        $('#crop-x').val( coords.x );
     9                        $('#crop-y').val( coords.y );
     10                        $('#crop-width').val( coords.w );
     11                        $('#crop-height').val( coords.h );
     12
     13                        siteIconCrop.showPreview( coords );
     14                },
     15
     16                showPreview : function( coords ){
     17                        var rx, ry, crop_image, home_icon, preview_rx, preview_ry, favicon;
     18                        rx = 64 / coords.w;
     19                        ry = 64 / coords.h;
     20                        crop_image = $('#crop-image');
     21                        home_icon = $('#preview-homeicon');
     22                        home_icon.css({
     23                                width: Math.round(rx * crop_image.attr( 'width' ) ) + 'px',
     24                                height: Math.round(ry * crop_image.attr( 'height' ) ) + 'px',
     25                                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
     26                                marginTop: '-' + Math.round(ry * coords.y) + 'px'
     27                        });
     28                        preview_rx = 16 / coords.w;
     29                        preview_ry = 16 / coords.h;
     30                        favicon = $('#preview-favicon');
     31                        favicon.css({
     32                                width: Math.round( preview_rx *  crop_image.attr( 'width' ) ) + 'px',
     33                                height: Math.round( preview_ry * crop_image.attr( 'height' ) ) + 'px',
     34                                marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px',
     35                                marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px'
     36                        });
     37                },
     38
     39                ready: function() {
     40                        jcrop_api = $.Jcrop('#crop-image');
     41                        jcrop_api.setOptions({
     42                                aspectRatio: 1,
     43                                onSelect: siteIconCrop.updateCoords,
     44                                onChange: siteIconCrop.updateCoords,
     45                                minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
     46                        });
     47                        jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);
     48                }
     49
     50        };
     51
     52        siteIconCrop.ready();
     53
     54})(jQuery);
     55 No newline at end of file
  • src/wp-admin/js/site-icon.js

     
     1(function($) {
     2        var frame;
     3
     4        $( function() {
     5                // Build the choose from library frame.
     6                $( '#choose-from-library-link' ).click( function( event ) {
     7                        var $el = $(this);
     8                        event.preventDefault();
     9
     10                        // If the media frame already exists, reopen it.
     11                        if ( frame ) {
     12                                frame.open();
     13                                return;
     14                        }
     15
     16                        // Create the media frame.
     17                        frame = wp.media.frames.customHeader = wp.media({
     18                                // Set the title of the modal.
     19                                title: $el.data('choose'),
     20
     21                                // Tell the modal to show only images.
     22                                library: {
     23                                        type: 'image'
     24                                },
     25
     26                                // Customize the submit button.
     27                                button: {
     28                                        // Set the text of the button.
     29                                        text: $el.data('update'),
     30                                        // Tell the button not to close the modal, since we're
     31                                        // going to refresh the page when the image is selected.
     32                                        close: false
     33                                }
     34                        });
     35
     36                        // When an image is selected, run a callback.
     37                        frame.on( 'select', function() {
     38                                // Grab the selected attachment.
     39                                var attachment = frame.state().get('selection').first(),
     40                                        link = $el.data('updateLink');
     41
     42                                // Tell the browser to navigate to the crop step.
     43                                window.location = link + '&file=' + attachment.id;
     44                        });
     45
     46                        frame.open();
     47                });
     48        });
     49}(jQuery));
  • src/wp-admin/options-general.php

     
    124124<td><input name="blogdescription" type="text" id="blogdescription" aria-describedby="tagline-description" value="<?php form_option('blogdescription'); ?>" class="regular-text" />
    125125<p class="description" id="tagline-description"><?php _e( 'In a few words, explain what this site is about.' ) ?></p></td>
    126126</tr>
     127<tr>
     128<th scope="row"><label for="site_icon"><?php _e( 'Site Icon' ); ?></label></th>
     129<td>
     130        <?php
     131        $upload_url = admin_url( 'options-general.php?page=site-icon' );
     132        $update_url = esc_url( add_query_arg( array(
     133                'page'   => 'site-icon',
     134                'action' => 'crop_site_icon',
     135        ), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
     136
     137        wp_enqueue_media();
     138        wp_enqueue_script( 'site-icon' );
     139
     140        if ( has_site_icon() ) :
     141                $remove_url = add_query_arg( array(
     142                        'action' => 'remove_site_icon',
     143                ), wp_nonce_url( admin_url( 'options-general.php' ), 'remove-site-icon' ) );
     144
     145                ?>
     146                <img class="avatar avatar-150" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" />
     147                <p class="hide-if-no-js">
     148                        <label class="screen-reader-text" for="choose-from-library-link"><?php _e( 'Choose an image from your media library:' ); ?></label>
     149                        <button type="button" id="choose-from-library-link" class="button" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"><?php _e( 'Update Site Icon' ); ?></button>
     150                        <a href="<?php echo esc_url( $remove_url ); ?>" id="site-icon-remove"><?php esc_html_e( 'Remove Site Icon' ); ?></a>
     151                </p>
     152                <p class="hide-if-js">
     153                        <a href="<?php echo esc_url( $upload_url ); ?>" class="button"><?php _e( 'Update Site Icon' ); ?></a>
     154                        <a href="<?php echo esc_url( $remove_url ); ?>" id="site-icon-remove"><?php esc_html_e( 'Remove Site Icon' ); ?></a>
     155                </p>
     156
     157        <?php else : ?>
     158
     159                <p class="hide-if-no-js">
     160                        <label class="screen-reader-text" for="choose-from-library-link"><?php _e( 'Choose an image from your media library:' ); ?></label>
     161                        <button type="button" id="choose-from-library-link" class="button" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"><?php _e( 'Choose Image' ); ?></button>
     162                </p>
     163                <a class="button hide-if-js" href="<?php echo esc_url( $upload_url ); ?>"><?php _e( 'Add a Site Icon' ); ?></a>
     164
     165        <?php endif; ?>
     166<p class="description" id="site-icon-description"><?php _e( 'Site Icon creates a favicon and app icons for your site.' ) ?></p></td>
     167</tr>
    127168<?php if ( !is_multisite() ) { ?>
    128169<tr>
    129170<th scope="row"><label for="siteurl"><?php _e('WordPress Address (URL)') ?></label></th>
  • src/wp-admin/options.php

     
    7272        wp_die( __( 'Cheatin&#8217; uh?' ), 403 );
    7373
    7474$whitelist_options = array(
    75         'general' => array( 'blogname', 'blogdescription', 'gmt_offset', 'date_format', 'time_format', 'start_of_week', 'timezone_string', 'WPLANG' ),
     75        'general' => array( 'blogname', 'blogdescription', 'site_icon', 'gmt_offset', 'date_format', 'time_format', 'start_of_week', 'timezone_string', 'WPLANG' ),
    7676        'discussion' => array( 'default_pingback_flag', 'default_ping_status', 'default_comment_status', 'comments_notify', 'moderation_notify', 'comment_moderation', 'require_name_email', 'comment_whitelist', 'comment_max_links', 'moderation_keys', 'blacklist_keys', 'show_avatars', 'avatar_rating', 'avatar_default', 'close_comments_for_old_posts', 'close_comments_days_old', 'thread_comments', 'thread_comments_depth', 'page_comments', 'comments_per_page', 'default_comments_page', 'comment_order', 'comment_registration' ),
    7777        'media' => array( 'thumbnail_size_w', 'thumbnail_size_h', 'thumbnail_crop', 'medium_size_w', 'medium_size_h', 'large_size_w', 'large_size_h', 'image_default_size', 'image_default_align', 'image_default_link_type' ),
    7878        'reading' => array( 'posts_per_page', 'posts_per_rss', 'rss_use_excerpt', 'show_on_front', 'page_on_front', 'page_for_posts', 'blog_public' ),
  • src/wp-includes/default-filters.php

     
    222222add_action( 'wp_head',             'wp_print_head_scripts',            9    );
    223223add_action( 'wp_head',             'wp_generator'                           );
    224224add_action( 'wp_head',             'rel_canonical'                          );
     225add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
     226add_action( 'wp_head',             'wp_site_icon',                    99    );
    225227add_action( 'wp_footer',           'wp_print_footer_scripts',         20    );
    226 add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
    227228add_action( 'template_redirect',   'wp_shortlink_header',             11, 0 );
    228229add_action( 'wp_print_footer_scripts', '_wp_footer_scripts'                 );
    229230add_action( 'init',                'check_theme_switched',            99    );
     
    243244        add_action( $action, 'the_generator' );
    244245}
    245246
     247// Feed Site Icon
     248add_action( 'atom_head', 'atom_site_icon' );
     249add_action( 'rss2_head', 'rss2_site_icon' );
     250
     251
    246252// WP Cron
    247253if ( !defined( 'DOING_CRON' ) )
    248254        add_action( 'init', 'wp_cron' );
  • src/wp-includes/feed.php

     
    588588}
    589589
    590590/**
     591 * Display Site Icon in atom feeds.
     592 *
     593 * @since 4.3.0
     594 */
     595function atom_site_icon() {
     596        $url = get_site_icon_url( null, 32 );
     597        if ( $url ) {
     598                echo "<icon>$url</icon>\n";
     599        }
     600}
     601
     602/**
     603 * Display Site Icon in RSS2.
     604 *
     605 * @since 4.3.0
     606 */
     607function rss2_site_icon() {
     608        $rss_title = get_wp_title_rss();
     609        if ( empty( $rss_title ) ) {
     610                $rss_title = get_bloginfo_rss( 'name' );
     611        }
     612
     613        $url = get_site_icon_url( null, 32 );
     614        if ( $url ) {
     615                echo '
     616<image>
     617        <url>' . convert_chars( $url ) . '</url>
     618        <title>' . $rss_title . '</title>
     619        <link>' . get_bloginfo_rss( 'url' ) . '</link>
     620        <width>32</width>
     621        <height>32</height>
     622</image> ' . "\n";
     623        }
     624}
     625
     626/**
    591627 * Display the link for the currently displayed feed in a XSS safe way.
    592628 *
    593629 * Generate a correct link for the atom:self element.
  • src/wp-includes/formatting.php

     
    34213421                case 'thread_comments_depth':
    34223422                case 'users_can_register':
    34233423                case 'start_of_week':
     3424                case 'site_icon':
    34243425                        $value = absint( $value );
    34253426                        break;
    34263427
  • src/wp-includes/general-template.php

     
    722722}
    723723
    724724/**
     725 * Returns the Site Icon URL.
     726 *
     727 * @param  null|int $blog_id Id of the blog to get the site icon for.
     728 * @param  int      $size    Size of the site icon.
     729 * @param  string   $url     Fallback url if no site icon is found.
     730 * @return string            Site Icon URL.
     731 */
     732function get_site_icon_url( $blog_id = null, $size = 512, $url = '' ) {
     733        if ( function_exists( 'get_blog_option' ) ) {
     734                if ( ! is_int( $blog_id ) ) {
     735                        $blog_id = get_current_blog_id();
     736                }
     737                $site_icon_id = get_blog_option( $blog_id, 'site_icon' );
     738        } else {
     739                $site_icon_id = get_option( 'site_icon' );
     740        }
     741
     742        if ( $site_icon_id  ) {
     743                if ( $size >= 512 ) {
     744                        $size_data = 'full';
     745                } else {
     746                        $size_data = array( $size, $size );
     747                }
     748                $url_data = wp_get_attachment_image_src( $site_icon_id, $size_data );
     749                $url = $url_data[0];
     750        }
     751
     752        return $url;
     753}
     754
     755/**
     756 * Displays the Site Icon URL.
     757 *
     758 * @param null|int $blog_id Id of the blog to get the site icon for.
     759 * @param int      $size    Size of the site icon.
     760 * @param string   $url     Fallback url if no site icon is found.
     761 */
     762function site_icon_url( $blog_id = null, $size = 512, $url = '' ) {
     763        echo esc_url( get_site_icon_url( $blog_id, $size, $url ) );
     764}
     765
     766/**
     767 * Whether the site has a Site Icon.
     768 *
     769 * @param int|null $blog_id Optional. Blog ID. Default: Current blog.
     770 * @return bool
     771 */
     772function has_site_icon( $blog_id = null ) {
     773        return !! get_site_icon_url( $blog_id, 512 );
     774}
     775
     776/**
    725777 * Display title tag with contents.
    726778 *
    727779 * @ignore
     
    23862438}
    23872439
    23882440/**
     2441 * Display site icon meta tags.
     2442 *
     2443 * @since 4.3.0
     2444 *
     2445 * @link http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon HTML5 specification link icon.
     2446 */
     2447function wp_site_icon() {
     2448        if ( ! has_site_icon() ) {
     2449                return;
     2450        }
     2451
     2452        $meta_tags = array(
     2453                sprintf( '<link rel="icon" href="%s" sizes="32x32" />', esc_url( get_site_icon_url( null, 32 ) ) ),
     2454                sprintf( '<link rel="apple-touch-icon-precomposed" href="%s">', esc_url( get_site_icon_url( null, 180 ) ) ),
     2455                sprintf( '<meta name="msapplication-TileImage" content="%s">', esc_url( get_site_icon_url( null, 270 ) ) ),
     2456        );
     2457
     2458        /**
     2459         * Filters the site icon meta tags, so Plugins can add their own.
     2460         *
     2461         * @since 4.3.0
     2462         *
     2463         * @param array $meta_tags Site Icon meta elements.
     2464         */
     2465        $meta_tags = apply_filters( 'site_icon_meta_tags', $meta_tags );
     2466        $meta_tags = array_filter( $meta_tags );
     2467
     2468        foreach ( $meta_tags as $meta_tag ) {
     2469                echo "$meta_tag\n";
     2470        }
     2471}
     2472
     2473/**
    23892474 * Whether the user should have a WYSIWIG editor.
    23902475 *
    23912476 * Checks that the user requires a WYSIWIG editor and that the editor is
  • src/wp-includes/script-loader.php

     
    612612                        'untitled' => _x( '(no label)', 'missing menu item navigation label' )
    613613                ) );
    614614
     615                $scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery' ), false, 1 );
     616                $scripts->add( 'site-icon-crop', '/wp-admin/js/site-icon-crop.js', array( 'jcrop' ), false, 1 );
     617
    615618                $scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );
    616619                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
    617620                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );