Emoji:

- Add the styling for the replacement images to the admin CSS.
- Revert to using `.emoji` as replacement image class.
- When pasting in the editor, convert emoji images to our format so we can replace them with chars on saving.
- Some more clean up of both the plugin and wp-emoji.js.
See #31242.
Built from https://develop.svn.wordpress.org/trunk@31786


git-svn-id: http://core.svn.wordpress.org/trunk@31766 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -679,6 +679,20 @@ td.help {
 	color: #999;
 }
 
+/* For emoji replacement images */
+img.emoji {
+	display: inline !important;
+	border: none !important;
+	height: 1em !important;
+	width: 1em !important;
+	margin: 0 .07em !important;
+	vertical-align: -0.1em !important;
+	background: none !important;
+	padding: 0 !important;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+}
+
 /*------------------------------------------------------------------------------
   1.0 - Text Styles
 ------------------------------------------------------------------------------*/

wp-admin/css/common.css

@@ -679,6 +679,20 @@ td.help {
 	color: #999;
 }
 
+/* For emoji replacement images */
+img.emoji {
+	display: inline !important;
+	border: none !important;
+	height: 1em !important;
+	width: 1em !important;
+	margin: 0 .07em !important;
+	vertical-align: -0.1em !important;
+	background: none !important;
+	padding: 0 !important;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+}
+
 /*------------------------------------------------------------------------------
   1.0 - Text Styles
 ------------------------------------------------------------------------------*/

wp-includes/default-filters.php

@@ -254,7 +254,6 @@ add_action( 'sanitize_comment_cookies',   'sanitize_comment_cookies'
 add_action( 'admin_print_scripts',        'print_head_scripts',                      20    );
 add_action( 'admin_print_footer_scripts', '_wp_footer_scripts'                             );
 add_action( 'admin_print_styles',         'print_admin_styles',                      20    );
-add_action( 'admin_print_styles',         'print_emoji_styles'                             );
 add_action( 'init',                       'smilies_init',                             5    );
 add_action( 'plugins_loaded',             'wp_maybe_load_widgets',                    0    );
 add_action( 'plugins_loaded',             'wp_maybe_load_embeds',                     0    );

wp-includes/formatting.php

@@ -4046,7 +4046,7 @@ img.emoji {
 	box-shadow: none !important;
 	height: 1em !important;
 	width: 1em !important;
-	margin: 0 .05em 0 .1em !important;
+	margin: 0 .07em !important;
 	vertical-align: -0.1em !important;
 	background: none !important;
 	padding: 0 !important;

wp-includes/js/tinymce/plugins/wpemoji/plugin.js

@@ -1,52 +1,76 @@
-( function( tinymce, wp ) {
+( function( tinymce, wp, twemoji ) {
 	tinymce.PluginManager.add( 'wpemoji', function( editor ) {
 		var typing,
 			isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
 
-		if ( ! wp || ! wp.emoji ) {
+		if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
 			return;
 		}
 
+		function setImgAttr( image ) {
+			image.className = 'emoji';
+			image.setAttribute( 'data-mce-resize', 'false' );
+			image.setAttribute( 'data-mce-placeholder', '1' );
+			image.setAttribute( 'data-wp-emoji', image.alt );
+		}
+
+		function replaceEmoji( node ) {
+			wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
+			tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
+		}
+
 		editor.on( 'keydown keyup', function( event ) {
 			typing = event.type === 'keydown';
 		} );
 
-		editor.on( 'input setcontent', function( event ) {
-			var selection, node, bookmark, images;
-
-			if ( typing && event.type === 'input' ) {
+		editor.on( 'input', function( event ) {
+			if ( typing ) {
 				return;
 			}
 
-			selection = editor.selection;
-			node = selection.getNode();
+			var bookmark,
+				selection = editor.selection,
+				node = selection.getNode();
 
-			if ( isMacWebKit ) {
-				bookmark = selection.getBookmark();
+			if ( twemoji.test( node.textContent || node.innerText ) ) {
+				if ( isMacWebKit ) {
+					bookmark = selection.getBookmark();
+				}
+
+				replaceEmoji( node );
+
+				if ( isMacWebKit ) {
+					selection.moveToBookmark( bookmark );
+				}
 			}
+		});
 
-			wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
+		editor.on( 'setcontent', function( event ) {
+			var selection = editor.selection,
+				node = selection.getNode();
 
-			images = editor.dom.select( 'img.new-emoji', node );
+			if ( twemoji.test( node.textContent || node.innerText ) ) {
+				replaceEmoji( node );
 
-			tinymce.each( images, function( image ) {
-				image.className = 'wp-emoji';
-				image.setAttribute( 'data-mce-resize', 'false' );
-				image.setAttribute( 'data-mce-placeholder', '1' );
-				image.setAttribute( 'data-wp-emoji', image.alt );
-			} );
-
-			// In IE all content in the editor is left selected aftrer wp.emoji.parse()...
-			// Collapse the selection to the beginning.
-			if ( tinymce.Env.ie && node && node.nodeName === 'BODY' ) {
-				selection.collapse( true );
-			}
-
-			if ( isMacWebKit ) {
-				selection.moveToBookmark( bookmark );
+				// In IE all content in the editor is left selected aftrer wp.emoji.parse()...
+				// Collapse the selection to the beginning.
+				if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
+					selection.collapse( true );
+				}
 			}
 		} );
 
+		// Convert Twemoji compatible pasted emoji repacement images into our format.
+		editor.on( 'PastePostProcess', function( event ) {
+			if ( twemoji ) {
+				tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
+					if ( image.alt && twemoji.test( image.alt ) ) {
+						setImgAttr( image );
+					}
+				});
+			}
+		});
+
 		editor.on( 'postprocess', function( event ) {
 			if ( event.content ) {
 				event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, function( match, emoji ) {
@@ -61,4 +85,4 @@
 			}
 		} );
 	} );
-} )( window.tinymce, window.wp );
+} )( window.tinymce, window.wp, window.twemoji );

wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js

@@ -1 +1 @@
-!function(a,b){a.PluginManager.add("wpemoji",function(c){var d,e=a.Env.mac&&a.Env.webkit;b&&b.emoji&&(c.on("keydown keyup",function(a){d="keydown"===a.type}),c.on("input setcontent",function(f){var g,h,i,j;d&&"input"===f.type||(g=c.selection,h=g.getNode(),e&&(i=g.getBookmark()),b.emoji.parse(h,{className:"wp-emoji new-emoji"}),j=c.dom.select("img.new-emoji",h),a.each(j,function(a){a.className="wp-emoji",a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt)}),a.Env.ie&&h&&"BODY"===h.nodeName&&g.collapse(!0),e&&g.moveToBookmark(i))}),c.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,function(a,b){return b}))}),c.on("resolvename",function(a){"IMG"===a.target.nodeName&&c.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp);
+!function(a,b,c){a.PluginManager.add("wpemoji",function(d){function e(a){a.className="emoji",a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt)}function f(c){b.emoji.parse(c,{className:"emoji _inserted-emoji"}),a.each(d.dom.$("img._inserted-emoji",c),e)}var g,h=a.Env.mac&&a.Env.webkit;b&&b.emoji&&b.emoji.replaceEmoji&&(d.on("keydown keyup",function(a){g="keydown"===a.type}),d.on("input",function(){if(!g){var a,b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(h&&(a=b.getBookmark()),f(e),h&&b.moveToBookmark(a))}}),d.on("setcontent",function(b){var e=d.selection,g=e.getNode();c.test(g.textContent||g.innerText)&&(f(g),a.Env.ie&&a.Env.ie<9&&b.load&&g&&"BODY"===g.nodeName&&e.collapse(!0))}),d.on("PastePostProcess",function(b){c&&a.each(d.dom.$("img.emoji",b.node),function(a){a.alt&&c.test(a.alt)&&e(a)})}),d.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,function(a,b){return b}))}),d.on("resolvename",function(a){"IMG"===a.target.nodeName&&d.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp,window.twemoji);

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -58,12 +58,14 @@ th {
 }
 
 /* For emoji replacement images */
-img.wp-emoji {
+img.emoji {
+	display: inline !important;
+	border: none !important;
 	height: 1em !important;
 	width: 1em !important;
-	margin: 0 0.07em !important;
+	margin: 0 .07em !important;
 	vertical-align: -0.1em !important;
-	border: none !important;
+	background: none !important;
 	padding: 0 !important;
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;

wp-includes/js/wp-emoji.js

@@ -4,31 +4,31 @@
 		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
 		/**
-		 * Flag to determine if we should parse all emoji characters into Twemoji images.
+		 * Flag to determine if the browser and the OS support emoji.
 		 *
 		 * @since 4.2.0
 		 *
 		 * @var Boolean
 		 */
-		parseAllEmoji = false,
+		supportsEmoji = false,
 
 		/**
-		 * Flag to determine if we should consider parsing emoji characters into Twemoji images.
+		 * Flag to determine if the browser and the OS support flag (two character) emoji.
 		 *
 		 * @since 4.2.0
 		 *
 		 * @var Boolean
 		 */
-		parseEmoji = false,
+		supportsFlagEmoji = false,
 
 		/**
-		 * Flag to determine if we should parse flag characters into Twemoji images.
+		 * Flag to determine if we should replace emoji characters with images.
 		 *
 		 * @since 4.2.0
 		 *
 		 * @var Boolean
 		 */
-		parseFlags = false;
+		replaceEmoji = false;
 
 		/**
 		 * Runs when the document load event is fired, so we can do our first parse of the page.
@@ -39,8 +39,7 @@
 			if ( MutationObserver ) {
 				new MutationObserver( function( mutationRecords ) {
 					var i = mutationRecords.length,
-						ii,
-						node;
+						ii, node;
 
 					while ( i-- ) {
 						ii = mutationRecords[ i ].addedNodes.length;
@@ -57,9 +56,7 @@
 							}
 						}
 					}
-				} )
-
-				.observe( document.body, {
+				} ).observe( document.body, {
 					childList: true,
 					subtree: true
 				} );
@@ -74,7 +71,7 @@
 		 *
 		 * @since 4.2.0
 		 *
-		 * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
+		 * @param type {String} Whether to test for support of "simple" or "flag" emoji.
 		 * @return {Boolean} True if the browser can render emoji, false if it cannot.
 		 */
 		function browserSupportsEmoji( type ) {
@@ -117,13 +114,14 @@
 		 * @since 4.2.0
 		 *
 		 * @param {HTMLElement|String} object The element or string to parse.
+		 * @param {Object} args Additional options for Twemoji.
 		 */
-		function parse( object, options ) {
-			if ( ! parseEmoji ) {
+		function parse( object, args ) {
+			if ( ! replaceEmoji ) {
 				return object;
 			}
 
-			var className = ( options && options.className ) || 'emoji';
+			var className = ( args && args.className ) || 'emoji';
 
 			return twemoji.parse( object, {
 				base: settings.baseUrl,
@@ -143,7 +141,7 @@
 							return false;
 					}
 
-					if ( parseFlags && ! parseAllEmoji &&
+					if ( ! supportsFlagEmoji && supportsEmoji &&
 						! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
 
 						return false;
@@ -158,10 +156,10 @@
 		 * Initialize our emoji support, and set up listeners.
 		 */
 		if ( twemoji && settings ) {
-			parseAllEmoji = ! browserSupportsEmoji();
-			parseFlags = ! browserSupportsEmoji( 'flag' );
-			parseEmoji = parseAllEmoji || parseFlags;
-	
+			supportsEmoji = browserSupportsEmoji();
+			supportsFlagEmoji = browserSupportsEmoji( 'flag' );
+			replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
+
 			if ( window.addEventListener ) {
 				window.addEventListener( 'load', load, false );
 			} else if ( window.attachEvent ) {
@@ -171,6 +169,7 @@
 
 		return {
 			browserSupportsEmoji: browserSupportsEmoji,
+			replaceEmoji: replaceEmoji,
 			parse: parse
 		};
 	}

wp-includes/js/wp-emoji.min.js

@@ -1 +1 @@
-!function(a,b,c){function d(){function d(){g&&new g(function(a){for(var b,c,d=a.length;d--;)for(b=a[d].addedNodes.length;b--;)c=a[d].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&f(c)}).observe(document.body,{childList:!0,subtree:!0}),f(document.body)}function e(a){var b=document.createElement("canvas"),c=b.getContext&&b.getContext("2d");return c&&c.fillText?(c.textBaseline="top",c.font="600 32px Arial","flag"===a?(c.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),b.toDataURL().length>3e3):(c.fillText(String.fromCharCode(55357,56835),0,0),0!==c.getImageData(16,16,1,1).data[0])):!1}function f(a,d){if(!i)return a;var e=d&&d.className||"emoji";return b.parse(a,{base:c.baseUrl,ext:c.ext,className:e,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return!j||h||/^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}var g=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,h=!1,i=!1,j=!1;return b&&c&&(h=!e(),j=!e("flag"),i=h||j,a.addEventListener?a.addEventListener("load",d,!1):a.attachEvent&&a.attachEvent("onload",d)),{browserSupportsEmoji:e,parse:f}}a.wp=a.wp||{},a.wp.emoji=new d}(window,window.twemoji,window._wpemojiSettings);
+!function(a,b,c){function d(){function d(){g&&new g(function(a){for(var b,c,d=a.length;d--;)for(b=a[d].addedNodes.length;b--;)c=a[d].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&f(c)}).observe(document.body,{childList:!0,subtree:!0}),f(document.body)}function e(a){var b=document.createElement("canvas"),c=b.getContext&&b.getContext("2d");return c&&c.fillText?(c.textBaseline="top",c.font="600 32px Arial","flag"===a?(c.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),b.toDataURL().length>3e3):(c.fillText(String.fromCharCode(55357,56835),0,0),0!==c.getImageData(16,16,1,1).data[0])):!1}function f(a,d){if(!j)return a;var e=d&&d.className||"emoji";return b.parse(a,{base:c.baseUrl,ext:c.ext,className:e,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return i||!h||/^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}var g=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,h=!1,i=!1,j=!1;return b&&c&&(h=e(),i=e("flag"),j=!h||!i,a.addEventListener?a.addEventListener("load",d,!1):a.attachEvent&&a.attachEvent("onload",d)),{browserSupportsEmoji:e,replaceEmoji:j,parse:f}}a.wp=a.wp||{},a.wp.emoji=new d}(window,window.twemoji,window._wpemojiSettings);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-beta1-31785';
+$wp_version = '4.2-beta1-31786';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.