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


git-svn-id: https://develop.svn.wordpress.org/trunk@37471 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/formatting.php

@@ -4517,12 +4517,12 @@ img.emoji {
 }
 
 /**
+ * Print the inline Emoji detection script if it is not already printed.
  *
- * @global string $wp_version
+ * @since 4.2.0
  * @staticvar bool $printed
  */
 function print_emoji_detection_script() {
-	global $wp_version;
 	static $printed = false;
 
 	if ( $printed ) {
@@ -4531,24 +4531,57 @@ function print_emoji_detection_script() {
 
 	$printed = true;
 
+	_print_emoji_detection_script();
+}
+
+/**
+ * Print inline Emoji dection script
+ *
+ * @ignore
+ * @since 4.6.0
+ * @access private
+ *
+ * @global string $wp_version
+ */
+function _print_emoji_detection_script() {
+	global $wp_version;
+
 	$settings = array(
 		/**
-		 * Filter the URL where emoji images are hosted.
+		 * Filter the URL where emoji png images are hosted.
 		 *
 		 * @since 4.2.0
 		 *
-		 * @param string The emoji base URL.
+		 * @param string The emoji base URL for png images.
 		 */
 		'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/72x72/' ),
 
 		/**
-		 * Filter the extension of the emoji files.
+		 * Filter the extension of the emoji png files.
 		 *
 		 * @since 4.2.0
 		 *
-		 * @param string The emoji extension. Default .png.
+		 * @param string The emoji extension for png files. Default .png.
 		 */
 		'ext' => apply_filters( 'emoji_ext', '.png' ),
+
+		/**
+		 * Filter the URL where emoji SVG images are hosted.
+		 *
+		 * @since 4.2.0
+		 *
+		 * @param string The emoji base URL for svg images.
+		 */
+		'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/svg/' ),
+
+		/**
+		 * Filter the extension of the emoji SVG files.
+		 *
+		 * @since 4.2.0
+		 *
+		 * @param string The emoji extension for svg files. Default .svg.
+		 */
+		'svgExt' => apply_filters( 'emoji_svg_ext', '.svg' ),
 	);
 
 	$version = 'ver=' . $wp_version;

src/wp-includes/js/wp-emoji.js

@@ -3,12 +3,34 @@
 	function wpEmoji() {
 		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
+		// Compression and maintain local scope
+		document = window.document,
+
 		// Private
 		twemoji, timer,
 		loaded = false,
 		count = 0,
 		ie11 = window.navigator.userAgent.indexOf( 'Trident/7.0' ) > 0;
 
+		/**
+		 * Detect if the browser supports SVG.
+		 *
+		 * @since 4.6.0
+		 *
+		 * @return {Boolean} True if the browser supports svg, false if not.
+		 */
+		function browserSupportsSvgAsImage() {
+			if ( !! document.implementation.hasFeature ) {
+				// Source: Modernizr
+				// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
+				return document.implementation.hasFeature( 'http://www.w3.org/TR/SVG11/feature#Image', '1.1' );
+			}
+
+			// document.implementation.hasFeature is deprecated. It can be presumed
+			// if future browsers remove it, the browser will support SVGs as images.
+			return true;
+		}
+
 		/**
 		 * Runs when the document load event is fired, so we can do our first parse of the page.
 		 *
@@ -141,8 +163,8 @@
 
 			args = args || {};
 			params = {
-				base: settings.baseUrl,
-				ext: settings.ext,
+				base: browserSupportsSvgAsImage() ? settings.svgUrl : settings.baseUrl,
+				ext:  browserSupportsSvgAsImage() ? settings.svgExt : settings.ext,
 				className: args.className || 'emoji',
 				callback: function( icon, options ) {
 					// Ignore some standard characters that TinyMCE recommends in its character map.

tests/phpunit/tests/formatting/Emoji.php

@@ -0,0 +1,68 @@
+<?php
+
+/**
+ * @group formatting
+ */
+class Tests_Formatting_Emoji extends WP_UnitTestCase {
+	/**
+	 * @ticket 36525
+	 */
+	public function test_unfiltered_emoji_cdns() {
+		$png_cdn = 'https://s.w.org/images/core/emoji/72x72/';
+		$svn_cdn = 'https://s.w.org/images/core/emoji/svg/';
+
+		$output = get_echo( '_print_emoji_detection_script' );
+
+		$this->assertContains( wp_json_encode( $png_cdn ), $output );
+		$this->assertContains( wp_json_encode( $svn_cdn ), $output );
+	}
+
+	public function _filtered_emoji_svn_cdn( $cdn = '' ) {
+		return 'https://s.wordpress.org/images/core/emoji/svg/';
+	}
+
+	/**
+	 * @ticket 36525
+	 */
+	public function test_filtered_emoji_svn_cdn() {
+		$png_cdn = 'https://s.w.org/images/core/emoji/72x72/';
+		$svn_cdn = 'https://s.w.org/images/core/emoji/svg/';
+
+		$filtered_svn_cdn = $this->_filtered_emoji_svn_cdn();
+
+		add_filter( 'emoji_svg_url', array( $this, '_filtered_emoji_svn_cdn' ) );
+
+		$output = get_echo( '_print_emoji_detection_script' );
+
+		$this->assertContains( wp_json_encode( $png_cdn ), $output );
+		$this->assertNotContains( wp_json_encode( $svn_cdn ), $output );
+		$this->assertContains( wp_json_encode( $filtered_svn_cdn ), $output );
+
+		remove_filter( 'emoji_svg_url', array( $this, '_filtered_emoji_svn_cdn' ) );
+	}
+
+	public function _filtered_emoji_png_cdn( $cdn = '' ) {
+		return 'https://s.wordpress.org/images/core/emoji/png_cdn/';
+	}
+
+	/**
+	 * @ticket 36525
+	 */
+	public function test_filtered_emoji_png_cdn() {
+		$png_cdn = 'https://s.w.org/images/core/emoji/72x72/';
+		$svn_cdn = 'https://s.w.org/images/core/emoji/svg/';
+
+		$filtered_png_cdn = $this->_filtered_emoji_png_cdn();
+
+		add_filter( 'emoji_url', array( $this, '_filtered_emoji_png_cdn' ) );
+
+		$output = get_echo( '_print_emoji_detection_script' );
+
+		$this->assertContains( wp_json_encode( $filtered_png_cdn ), $output );
+		$this->assertNotContains( wp_json_encode( $png_cdn ), $output );
+		$this->assertContains( wp_json_encode( $svn_cdn ), $output );
+
+		remove_filter( 'emoji_url', array( $this, '_filtered_emoji_png_cdn' ) );
+	}
+
+}