Script Loader: Add polyfill for window.URL, window.DOMRect.

Pending block editor revisions for WordPress 5.4 will make use of `window.URL` and `window.DOMRect`. These are not available in Internet Explorer (or pre-Chromium Edge for `DOMRect`) and must be polyfilled to avoid script errors.

The changes make use of the existing polyfill pattern, and existing `polyfill-library` dependency. The dependency is bumped to the latest version, since the previous version did not include the `DOMRect` polyfill.

Props jorgefilipecosta.
Fixes #49360.


git-svn-id: https://develop.svn.wordpress.org/trunk@47238 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Duthie 2020-02-10 15:15:07 +00:00
parent 5b0be97e7c
commit 2c795289c8
5 changed files with 191 additions and 672 deletions

847
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -132,7 +132,7 @@
"lodash": "4.17.15", "lodash": "4.17.15",
"masonry-layout": "3.3.2", "masonry-layout": "3.3.2",
"moment": "2.22.2", "moment": "2.22.2",
"polyfill-library": "3.27.4", "polyfill-library": "3.42.0",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"twemoji": "12.1.3", "twemoji": "12.1.3",

View File

@ -86,6 +86,8 @@ function wp_default_packages_vendor( &$scripts ) {
'wp-polyfill-fetch', 'wp-polyfill-fetch',
'wp-polyfill-formdata', 'wp-polyfill-formdata',
'wp-polyfill-node-contains', 'wp-polyfill-node-contains',
'wp-polyfill-url',
'wp-polyfill-dom-rect',
'wp-polyfill-element-closest', 'wp-polyfill-element-closest',
'wp-polyfill', 'wp-polyfill',
); );
@ -97,7 +99,9 @@ function wp_default_packages_vendor( &$scripts ) {
'lodash' => '4.17.15', 'lodash' => '4.17.15',
'wp-polyfill-fetch' => '3.0.0', 'wp-polyfill-fetch' => '3.0.0',
'wp-polyfill-formdata' => '3.0.12', 'wp-polyfill-formdata' => '3.0.12',
'wp-polyfill-node-contains' => '3.26.0-0', 'wp-polyfill-node-contains' => '3.42.0',
'wp-polyfill-url' => '3.42.0',
'wp-polyfill-dom-rect' => '3.42.0',
'wp-polyfill-element-closest' => '2.0.2', 'wp-polyfill-element-closest' => '2.0.2',
'wp-polyfill' => '7.4.4', 'wp-polyfill' => '7.4.4',
); );
@ -122,6 +126,8 @@ function wp_default_packages_vendor( &$scripts ) {
array( array(
'\'fetch\' in window' => 'wp-polyfill-fetch', '\'fetch\' in window' => 'wp-polyfill-fetch',
'document.contains' => 'wp-polyfill-node-contains', 'document.contains' => 'wp-polyfill-node-contains',
'window.URL' => 'wp-polyfill-url',
'window.DOMRect' => 'wp-polyfill-dom-rect',
'window.FormData && window.FormData.prototype.keys' => 'wp-polyfill-formdata', 'window.FormData && window.FormData.prototype.keys' => 'wp-polyfill-formdata',
'Element.prototype.matches && Element.prototype.closest' => 'wp-polyfill-element-closest', 'Element.prototype.matches && Element.prototype.closest' => 'wp-polyfill-element-closest',
) )

View File

@ -717,7 +717,7 @@ JS;
$expected .= "<script type='text/javascript' src='http://example.com'></script>\n"; $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/vendor/wp-polyfill.min.js'></script>\n"; $expected .= "<script type='text/javascript' src='/wp-includes/js/dist/vendor/wp-polyfill.min.js'></script>\n";
$expected .= "<script type='text/javascript'>\n"; $expected .= "<script type='text/javascript'>\n";
$expected .= "( 'fetch' in window ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-fetch.min.js\"></scr' + 'ipt>' );( document.contains ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-node-contains.min.js\"></scr' + 'ipt>' );( window.FormData && window.FormData.prototype.keys ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-formdata.min.js\"></scr' + 'ipt>' );( Element.prototype.matches && Element.prototype.closest ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-element-closest.min.js\"></scr' + 'ipt>' );\n"; $expected .= "( 'fetch' in window ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-fetch.min.js\"></scr' + 'ipt>' );( document.contains ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-node-contains.min.js\"></scr' + 'ipt>' );( window.URL ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-url.min.js\"></scr' + 'ipt>' );( window.DOMRect ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-dom-rect.min.js\"></scr' + 'ipt>' );( window.FormData && window.FormData.prototype.keys ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-formdata.min.js\"></scr' + 'ipt>' );( Element.prototype.matches && Element.prototype.closest ) || document.write( '<script src=\"http://example.org/wp-includes/js/dist/vendor/wp-polyfill-element-closest.min.js\"></scr' + 'ipt>' );\n";
$expected .= "</script>\n"; $expected .= "</script>\n";
$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/dom-ready.min.js'></script>\n"; $expected .= "<script type='text/javascript' src='/wp-includes/js/dist/dom-ready.min.js'></script>\n";
$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/a11y.min.js'></script>\n"; $expected .= "<script type='text/javascript' src='/wp-includes/js/dist/a11y.min.js'></script>\n";

View File

@ -77,6 +77,8 @@ module.exports = function( env = { environment: 'production', watch: false, buil
'wp-polyfill-fetch.js': 'whatwg-fetch/dist/fetch.umd.js', 'wp-polyfill-fetch.js': 'whatwg-fetch/dist/fetch.umd.js',
'wp-polyfill-element-closest.js': 'element-closest/element-closest.js', 'wp-polyfill-element-closest.js': 'element-closest/element-closest.js',
'wp-polyfill-node-contains.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js', 'wp-polyfill-node-contains.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
'wp-polyfill-url.js': 'polyfill-library/polyfills/URL/polyfill.js',
'wp-polyfill-dom-rect.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
'wp-polyfill-formdata.js': 'formdata-polyfill/FormData.js', 'wp-polyfill-formdata.js': 'formdata-polyfill/FormData.js',
'moment.js': 'moment/moment.js', 'moment.js': 'moment/moment.js',
'react.js': 'react/umd/react.development.js', 'react.js': 'react/umd/react.development.js',
@ -96,6 +98,8 @@ module.exports = function( env = { environment: 'production', watch: false, buil
'wp-polyfill-fetch.min.js': 'whatwg-fetch/dist/fetch.umd.js', 'wp-polyfill-fetch.min.js': 'whatwg-fetch/dist/fetch.umd.js',
'wp-polyfill-element-closest.min.js': 'element-closest/element-closest.js', 'wp-polyfill-element-closest.min.js': 'element-closest/element-closest.js',
'wp-polyfill-node-contains.min.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js', 'wp-polyfill-node-contains.min.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
'wp-polyfill-url.min.js': 'polyfill-library/polyfills/URL/polyfill.js',
'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
}; };
const blockNames = [ const blockNames = [