Changeset 49868

Timestamp:

12/22/2020 04:17:27 PM (4 years ago)

Author:

desrosj

Message:

Twenty Twenty-One: Only load IE specific polyfills when actually using Internet Exploreer.

The twenty-twenty-one-ie11-polyfills script now has a null source, and the new twenty-twenty-one-ie11-polyfills-asset (which points to the actual polyfills.js source) will be loaded only if IE is detected by through the use of wp_get_script_polyfill().

Because the original script name remains the same, this change is backwards compatible with any code registering twenty-twenty-one-id11-polyfills as a script dependency.

Props poena, ismail.elkorchi, peterwilsoncc.
Merges [49865] to the 5.6 branch.
Fixes #52098.

Location:

branches/5.6

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentytwentyone/functions.php (modified) (2 diffs)

branches/5.6/src/wp-content/themes/twentytwentyone/functions.php

@@ -397 +397 @@
     // Note, the is_IE global variable is defined by WordPress and is used
     // to detect if the current browser is internet explorer.
-    global $is_IE;
+    global $is_IE, $wp_scripts;
     if ( $is_IE ) {
         // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
@@ -417 +417 @@
     }
 
+    // Register the IE11 polyfill file.
     wp_register_script(
-        'twenty-twenty-one-ie11-polyfills',
+        'twenty-twenty-one-ie11-polyfills-asset',
         get_template_directory_uri() . '/assets/js/polyfills.js',
         array(),
         wp_get_theme()->get( 'Version' ),
         true
+    );
+
+    // Register the IE11 polyfill loader.
+    wp_register_script(
+        'twenty-twenty-one-ie11-polyfills',
+        null,
+        array(),
+        wp_get_theme()->get( 'Version' ),
+        true
+    );
+    wp_add_inline_script(
+        'twenty-twenty-one-ie11-polyfills',
+        wp_get_script_polyfill(
+            $wp_scripts,
+            array(
+                'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
+            )
+        )
     );