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

package.json

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

src/wp-includes/script-loader.php

@@ -86,6 +86,8 @@ function wp_default_packages_vendor( &$scripts ) {
 		'wp-polyfill-fetch',
 		'wp-polyfill-formdata',
 		'wp-polyfill-node-contains',
+		'wp-polyfill-url',
+		'wp-polyfill-dom-rect',
 		'wp-polyfill-element-closest',
 		'wp-polyfill',
 	);
@@ -97,7 +99,9 @@ function wp_default_packages_vendor( &$scripts ) {
 		'lodash'                      => '4.17.15',
 		'wp-polyfill-fetch'           => '3.0.0',
 		'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'                 => '7.4.4',
 	);
@@ -122,6 +126,8 @@ function wp_default_packages_vendor( &$scripts ) {
 			array(
 				'\'fetch\' in window' => 'wp-polyfill-fetch',
 				'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',
 				'Element.prototype.matches && Element.prototype.closest' => 'wp-polyfill-element-closest',
 			)

tests/phpunit/tests/dependencies/scripts.php

@@ -717,7 +717,7 @@ JS;
 		$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'>\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 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";

tools/webpack/packages.js

@@ -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-element-closest.js': 'element-closest/element-closest.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',
 		'moment.js': 'moment/moment.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-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-url.min.js': 'polyfill-library/polyfills/URL/polyfill.js',
+		'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
 	};
 
 	const blockNames = [