[wp-trac] [WordPress Trac] #52098: Twenty Twenty-One: IE specific polyfills are loaded in all browsers

[WordPress Trac]

#52098: Twenty Twenty-One: IE specific polyfills are loaded in all browsers
-------------------------------------+-----------------------------
 Reporter:  ismail.elkorchi          |      Owner:  (none)
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Bundled Theme            |    Version:  trunk
 Severity:  normal                   |   Keywords:
  Focuses:  javascript, performance  |
-------------------------------------+-----------------------------
 The file {{{/assets/js/polyfills.js}}} must be enqueued only if the used
 browser is Internet Explorer, but it shouldn't in other browsers.

 [https://github.com/WordPress/wordpress-develop/blob/master/src/wp-
 content/themes/twentytwentyone/functions.php#L396-L446 In this function],
 both the navigation and responsive-embeds scripts are registered with
 {{{/assets/js/polyfills.js}}} dependency for all users. But we can use
 {{{$is_IE}}} conditional to register the IE polyfills script only when IE
 is used.

 The code will then look something like this :

 {{{#!php
 <?php
 function twenty_twenty_one_scripts() {
         // 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;
         $twenty_twenty_one_scripts_dependencies = array();
         if ( $is_IE ) {
                 // If IE 11 or below, use a flattened stylesheet with
 static values replacing CSS Variables.
                 wp_enqueue_style( 'twenty-twenty-one-style',
 get_template_directory_uri() . '/assets/css/ie.css', array(),
 wp_get_theme()->get( 'Version' ) );

                 wp_register_script(
                         'twenty-twenty-one-ie11-polyfills',
                         get_template_directory_uri() .
 '/assets/js/polyfills.js',
                         array(),
                         wp_get_theme()->get( 'Version' ),
                         true
                 );

                 array_push( $twenty_twenty_one_scripts_dependencies,
 'twenty-twenty-one-ie11-polyfills' );

         } else {
                 // If not IE, use the standard stylesheet.
                 wp_enqueue_style( 'twenty-twenty-one-style',
 get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get(
 'Version' ) );
         }

         // RTL styles.
         wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );

         // Print styles.
         wp_enqueue_style( 'twenty-twenty-one-print-style',
 get_template_directory_uri() . '/assets/css/print.css', array(),
 wp_get_theme()->get( 'Version' ), 'print' );

         // Threaded comment reply styles.
         if ( is_singular() && comments_open() && get_option(
 'thread_comments' ) ) {
                 wp_enqueue_script( 'comment-reply' );
         }

         // Main navigation scripts.
         if ( has_nav_menu( 'primary' ) ) {
                 wp_enqueue_script(
                         'twenty-twenty-one-primary-navigation-script',
                         get_template_directory_uri() . '/assets/js
 /primary-navigation.js',
                         $twenty_twenty_one_scripts_dependencies,
                         wp_get_theme()->get( 'Version' ),
                         true
                 );
         }

         // Responsive embeds script.
         wp_enqueue_script(
                 'twenty-twenty-one-responsive-embeds-script',
                 get_template_directory_uri() . '/assets/js/responsive-
 embeds.js',
                 $twenty_twenty_one_scripts_dependencies,
                 wp_get_theme()->get( 'Version' ),
                 true
         );
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52098>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform