Changeset 49865 for trunk/src/wp-content/themes/twentytwentyone/functions.php

Timestamp:

12/22/2020 03:42:14 PM (6 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
Fixes #52098.

File:

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

trunk/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',
+                        )
+                )
         );