Changeset 55186

Timestamp:

02/02/2023 12:51:02 AM (2 years ago)

Author:

azaozz

Message:

Emoji: Always skip nodes with the wp-exclude-emoji CSS class.

Patches twemoji.js to add support for a doNotParse() callback. Uses that callback to always exclude emojis in HTML elements with the above class.

Props: dd32, peterwilsoncc, azaozz.
Fixes #52219.

Location:

trunk

Files:

• Gruntfile.js (modified) (2 diffs)
• package-lock.json (modified) (5 diffs)
• package.json (modified) (1 diff)
• src/js/_enqueues/vendor/twemoji.js (added)
• src/js/_enqueues/wp/emoji.js (modified) (2 diffs)

trunk/Gruntfile.js

@@ -194 +194 @@
                         // Renamed to avoid conflict with jQuery hoverIntent.min.js (after minifying).
                         [ WORKING_DIR + 'wp-includes/js/hoverintent-js.min.js' ]: [ './node_modules/hoverintent/dist/hoverintent.min.js' ],
+
                         [ WORKING_DIR + 'wp-includes/js/imagesloaded.min.js' ]: [ './node_modules/imagesloaded/imagesloaded.pkgd.min.js' ],
                         [ WORKING_DIR + 'wp-includes/js/jquery/jquery.js' ]: [ './node_modules/jquery/dist/jquery.js' ],
@@ -200 +201 @@
                         [ WORKING_DIR + 'wp-includes/js/jquery/jquery.color.min.js' ]: [ './node_modules/jquery-color/dist/jquery.color.min.js' ],
                         [ WORKING_DIR + 'wp-includes/js/masonry.min.js' ]: [ './node_modules/masonry-layout/dist/masonry.pkgd.min.js' ],
-                        [ WORKING_DIR + 'wp-includes/js/twemoji.js' ]: [ './node_modules/twemoji/dist/twemoji.js' ],
                         [ WORKING_DIR + 'wp-includes/js/underscore.js' ]: [ './node_modules/underscore/underscore.js' ],
                     }

trunk/package-lock.json

@@ -12630 +12630 @@
             "dev": true
         },
-        "fs-extra": {
-            "version": "8.1.0",
-            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-            "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-            "requires": {
-                "graceful-fs": "^4.2.0",
-                "jsonfile": "^4.0.0",
-                "universalify": "^0.1.0"
-            },
-            "dependencies": {
-                "jsonfile": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-                    "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-                    "requires": {
-                        "graceful-fs": "^4.1.6"
-                    }
-                }
-            }
-        },
         "fs-monkey": {
             "version": "1.0.3",
@@ -13185 +13165 @@
             "version": "4.2.4",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-            "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+            "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+            "dev": true
         },
         "gradient-parser": {
@@ -17820 +17801 @@
             "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
             "dev": true
-        },
-        "jsonfile": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
-            "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
-            "requires": {
-                "graceful-fs": "^4.1.6",
-                "universalify": "^0.1.2"
-            }
         },
         "jsprim": {
@@ -25519 +25491 @@
             "dev": true
         },
-        "twemoji": {
-            "version": "14.0.2",
-            "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
-            "integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
-            "requires": {
-                "fs-extra": "^8.0.1",
-                "jsonfile": "^5.0.0",
-                "twemoji-parser": "14.0.0",
-                "universalify": "^0.1.2"
-            }
-        },
-        "twemoji-parser": {
-            "version": "14.0.0",
-            "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
-            "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
-        },
         "type-check": {
             "version": "0.4.0",
@@ -25693 +25649 @@
             "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
             "dev": true
-        },
-        "universalify": {
-            "version": "0.1.2",
-            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
         },
         "unpipe": {

trunk/package.json

@@ -154 +154 @@
         "react-dom": "17.0.2",
         "regenerator-runtime": "0.13.9",
-        "twemoji": "14.0.2",
         "underscore": "1.13.6",
         "whatwg-fetch": "3.6.2",

trunk/src/js/_enqueues/wp/emoji.js

@@ -146 +146 @@
                             }
 
-                            /*
-                             * If the class name of a non-element node contains 'wp-exclude-emoji' ignore it.
-                             *
-                             * Node type 1 is an ELEMENT_NODE.
-                             */
-                            if ( ! node || node.nodeType !== 1 ||
-                                ( node.className && typeof node.className === 'string' && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
-
-                                continue;
-                            }
-
                             if ( test( node.textContent ) ) {
                                 parse( node );
@@ -264 +253 @@
                         twemoji.parentNode.replaceChild( document.createTextNode( twemoji.alt ), twemoji );
                     }
+                },
+                doNotParse: function( node ) {
+                    if (
+                        node &&
+                        node.className &&
+                        typeof node.className === 'string' &&
+                        node.className.indexOf( 'wp-exclude-emoji' ) !== -1
+                    ) {
+                        // Do not parse this node. Emojis will not be replaced in this node and all sub-nodes.
+                        return true;
+                    }
+
+                    return false;
                 }
             };