WordPress.org

Make WordPress Core

Changeset 37471


Ignore:
Timestamp:
05/20/2016 06:02:55 AM (3 years ago)
Author:
peterwilsoncc
Message:

Emoji: Use SVG in supported browsers

Use SVG images in supporting browsers, otherwise fall back to PNG images. Add the filters emoji_svg_url and emoji_svg_ext.

Introduces unit tests to check the Emoji CDN filters.

Fixes #36525

Location:
trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/formatting.php

    r37469 r37471  
    45184518
    45194519/**
    4520  *
    4521  * @global string $wp_version
     4520 * Print the inline Emoji detection script if it is not already printed.
     4521 *
     4522 * @since 4.2.0
    45224523 * @staticvar bool $printed
    45234524 */
    45244525function print_emoji_detection_script() {
    4525     global $wp_version;
    45264526    static $printed = false;
    45274527
     
    45324532    $printed = true;
    45334533
     4534    _print_emoji_detection_script();
     4535}
     4536
     4537/**
     4538 * Print inline Emoji dection script
     4539 *
     4540 * @ignore
     4541 * @since 4.6.0
     4542 * @access private
     4543 *
     4544 * @global string $wp_version
     4545 */
     4546function _print_emoji_detection_script() {
     4547    global $wp_version;
     4548
    45344549    $settings = array(
    45354550        /**
    4536          * Filter the URL where emoji images are hosted.
     4551         * Filter the URL where emoji png images are hosted.
    45374552         *
    45384553         * @since 4.2.0
    45394554         *
    4540          * @param string The emoji base URL.
     4555         * @param string The emoji base URL for png images.
    45414556         */
    45424557        'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/72x72/' ),
    45434558
    45444559        /**
    4545          * Filter the extension of the emoji files.
     4560         * Filter the extension of the emoji png files.
    45464561         *
    45474562         * @since 4.2.0
    45484563         *
    4549          * @param string The emoji extension. Default .png.
     4564         * @param string The emoji extension for png files. Default .png.
    45504565         */
    45514566        'ext' => apply_filters( 'emoji_ext', '.png' ),
     4567
     4568        /**
     4569         * Filter the URL where emoji SVG images are hosted.
     4570         *
     4571         * @since 4.2.0
     4572         *
     4573         * @param string The emoji base URL for svg images.
     4574         */
     4575        'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/svg/' ),
     4576
     4577        /**
     4578         * Filter the extension of the emoji SVG files.
     4579         *
     4580         * @since 4.2.0
     4581         *
     4582         * @param string The emoji extension for svg files. Default .svg.
     4583         */
     4584        'svgExt' => apply_filters( 'emoji_svg_ext', '.svg' ),
    45524585    );
    45534586
  • trunk/src/wp-includes/js/wp-emoji.js

    r36981 r37471  
    33    function wpEmoji() {
    44        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
     5
     6        // Compression and maintain local scope
     7        document = window.document,
    58
    69        // Private
     
    912        count = 0,
    1013        ie11 = window.navigator.userAgent.indexOf( 'Trident/7.0' ) > 0;
     14
     15        /**
     16         * Detect if the browser supports SVG.
     17         *
     18         * @since 4.6.0
     19         *
     20         * @return {Boolean} True if the browser supports svg, false if not.
     21         */
     22        function browserSupportsSvgAsImage() {
     23            if ( !! document.implementation.hasFeature ) {
     24                // Source: Modernizr
     25                // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
     26                return document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' );
     27            }
     28
     29            // document.implementation.hasFeature is deprecated. It can be presumed
     30            // if future browsers remove it, the browser will support SVGs as images.
     31            return true;
     32        }
    1133
    1234        /**
     
    142164            args = args || {};
    143165            params = {
    144                 base: settings.baseUrl,
    145                 ext: settings.ext,
     166                base: browserSupportsSvgAsImage() ? settings.svgUrl : settings.baseUrl,
     167                ext:  browserSupportsSvgAsImage() ? settings.svgExt : settings.ext,
    146168                className: args.className || 'emoji',
    147169                callback: function( icon, options ) {
Note: See TracChangeset for help on using the changeset viewer.