T21: remove IE support

src/wp-content/themes/twentytwentyone/assets/js/polyfills.js

@@ -1,46 +1 @@
-/**
- * File polyfills.js.
- *
- * Polyfills for IE11.
- */
-
-/**
- * Polyfill for Element.closest() because we need to support IE11.
- *
- * @since Twenty Twenty-One 1.0
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
- */
-if ( ! Element.prototype.matches ) {
-	Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-}
-
-if ( ! Element.prototype.closest ) {
-	Element.prototype.closest = function( s ) {
-		var el = this;
-		do {
-			if ( Element.prototype.matches.call( el, s ) ) {
-				return el;
-			}
-			el = el.parentElement || el.parentNode;
-		} while ( el !== null && el.nodeType === 1 );
-		return null;
-	};
-}
-
-/**
- * Polyfill for NodeList.foreach() because we need to support IE11.
- *
- * @since Twenty Twenty-One 1.0
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
- */
-if ( window.NodeList && ! NodeList.prototype.forEach ) {
-	NodeList.prototype.forEach = function( callback, thisArg ) {
-		var i;
-		thisArg = thisArg || window;
-		for ( i = 0; i < this.length; i++ ) {
-			callback.call( thisArg, this[i], i, this );
-		}
-	};
-}
+// Polyfills for IE11 have been removed.

src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss

@@ -1,64 +1 @@
-.is-IE {
-
-	&.is-dark-theme {
-		color: #fff;
-
-		*,
-		a,
-		.site-description,
-		.entry-title,
-		.entry-footer,
-		.widget-area,
-		.post-navigation .meta-nav,
-		.footer-navigation-wrapper li a:link,
-		.site-footer > .site-info,
-		.site-footer > .site-info a,
-		.site-footer > .site-info a:visited {
-			color: #fff;
-		}
-
-		.sub-menu-toggle svg,
-		.sub-menu-toggle path,
-		.post-navigation .meta-nav svg,
-		.post-navigation .meta-nav path {
-			fill: #fff;
-		}
-
-		.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
-			background: #000;
-		}
-
-		&.primary-navigation-open {
-			@include media(mobile-only) {
-
-				.primary-navigation > .primary-menu-container,
-				.menu-button-container {
-					background-color: #000;
-				}
-			}
-		}
-
-		.skip-link:focus {
-			color: #21759b;
-		}
-	}
-
-	.navigation .nav-links {
-		display: block;
-	}
-
-	.post-thumbnail .wp-post-image {
-		min-width: auto;
-	}
-
-	.wp-block-group {
-
-		&:before,
-		&:after {
-			content: "";
-			display: block;
-			clear: both;
-		}
-	}
-
-}
+// IE11 styles are removed.

src/wp-content/themes/twentytwentyone/assets/sass/style.scss

@@ -118,4 +118,3 @@
 @import "07-utilities/a11y";
 @import "07-utilities/color-palette";
 @import "07-utilities/measure";
-@import "07-utilities/ie";

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

@@ -23,6 +23,7 @@
 	 * as indicating support for post thumbnails.
 	 *
 	 * @since Twenty Twenty-One 1.0
+	 * @since Twenty Twenty-One 2.8 Removed editor stylesheet for Internet Explorer.
 	 *
 	 * @return void
 	 */
@@ -123,17 +124,8 @@ function twenty_twenty_one_setup() {
 			add_theme_support( 'dark-editor-style' );
 		}
 
-		$editor_stylesheet_path = './assets/css/style-editor.css';
-
-		// 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;
-		if ( $is_IE ) {
-			$editor_stylesheet_path = './assets/css/ie-editor.css';
-		}
-
 		// Enqueue editor styles.
-		add_editor_style( $editor_stylesheet_path );
+		add_editor_style( './assets/css/style-editor.css' );
 
 		// Add custom editor font sizes.
 		add_theme_support(
@@ -390,23 +382,12 @@ function twenty_twenty_one_content_width() {
  * Enqueues scripts and styles.
  *
  * @since Twenty Twenty-One 1.0
- *
- * @global bool       $is_IE
- * @global WP_Scripts $wp_scripts
+ * @since Twenty Twenty-One 2.8 Removed IE11 polyfills.
  *
  * @return void
  */
 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, $wp_scripts;
-	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' ) );
-	} 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' ) );
-	}
+	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' );
@@ -419,39 +400,28 @@ function twenty_twenty_one_scripts() {
 		wp_enqueue_script( 'comment-reply' );
 	}
 
-	// Register the IE11 polyfill file.
+	// Register the handles for unused IE11 polyfill scripts.
 	wp_register_script(
 		'twenty-twenty-one-ie11-polyfills-asset',
-		get_template_directory_uri() . '/assets/js/polyfills.js',
+		false,
 		array(),
 		wp_get_theme()->get( 'Version' ),
 		array( 'in_footer' => true )
 	);
-
-	// Register the IE11 polyfill loader.
 	wp_register_script(
 		'twenty-twenty-one-ie11-polyfills',
-		null,
+		false,
 		array(),
 		wp_get_theme()->get( 'Version' ),
 		array( 'in_footer' => 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',
-			)
-		)
-	);
 
 	// 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',
-			array( 'twenty-twenty-one-ie11-polyfills' ),
+			array(),
 			wp_get_theme()->get( 'Version' ),
 			array(
 				'in_footer' => false, // Because involves header.
@@ -464,7 +434,7 @@ function twenty_twenty_one_scripts() {
 	wp_enqueue_script(
 		'twenty-twenty-one-responsive-embeds-script',
 		get_template_directory_uri() . '/assets/js/responsive-embeds.js',
-		array( 'twenty-twenty-one-ie11-polyfills' ),
+		array(),
 		wp_get_theme()->get( 'Version' ),
 		array( 'in_footer' => true )
 	);
@@ -630,6 +600,7 @@ function twentytwentyone_the_html_classes() {
  * Adds "is-IE" class to body if the user is on Internet Explorer.
  *
  * @since Twenty Twenty-One 1.0
+ * @deprecated Twenty Twenty-One 2.8 Removed IE support.
  *
  * @return void
  */
@@ -647,7 +618,6 @@ function twentytwentyone_add_ie_class() {
 		echo "<script>$script</script>\n";
 	}
 }
-add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );
 
 if ( ! function_exists( 'wp_get_list_item_separator' ) ) :
 	/**

src/wp-content/themes/twentytwentyone/package.json

@@ -64,8 +64,6 @@
 		"build:rtl": "rtlcss style.css style-rtl.css",
 		"build:dark-rtl": "rtlcss assets/css/style-dark-mode.css assets/css/style-dark-mode-rtl.css",
 		"build:print": "sass assets/sass/07-utilities/print.scss:assets/css/print.css --style=expanded --source-map",
-		"build:ie": "postcss style.css -o assets/css/ie.css",
-		"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
 		"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
 		"build": "run-s \"build:*\"",
 		"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",

src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -5821,58 +5821,3 @@ section,
 footer {
 	max-width: none;
 }
-
-.is-IE.is-dark-theme {
-	color: #fff;
-}
-
-.is-IE.is-dark-theme *,
-.is-IE.is-dark-theme a,
-.is-IE.is-dark-theme .site-description,
-.is-IE.is-dark-theme .entry-title,
-.is-IE.is-dark-theme .entry-footer,
-.is-IE.is-dark-theme .widget-area,
-.is-IE.is-dark-theme .post-navigation .meta-nav,
-.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
-.is-IE.is-dark-theme .site-footer > .site-info,
-.is-IE.is-dark-theme .site-footer > .site-info a,
-.is-IE.is-dark-theme .site-footer > .site-info a:visited {
-	color: #fff;
-}
-
-.is-IE.is-dark-theme .sub-menu-toggle svg,
-.is-IE.is-dark-theme .sub-menu-toggle path,
-.is-IE.is-dark-theme .post-navigation .meta-nav svg,
-.is-IE.is-dark-theme .post-navigation .meta-nav path {
-	fill: #fff;
-}
-
-.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
-	background: #000;
-}
-@media only screen and (max-width: 481.98px) {
-
-	.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
-	.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
-		background-color: #000;
-	}
-}
-
-.is-IE.is-dark-theme .skip-link:focus {
-	color: #21759b;
-}
-
-.is-IE .navigation .nav-links {
-	display: block;
-}
-
-.is-IE .post-thumbnail .wp-post-image {
-	min-width: auto;
-}
-
-.is-IE .wp-block-group:before,
-.is-IE .wp-block-group:after {
-	content: "";
-	display: block;
-	clear: both;
-}

src/wp-content/themes/twentytwentyone/style.css

@@ -5857,58 +5857,3 @@ section,
 footer {
 	max-width: none;
 }
-
-.is-IE.is-dark-theme {
-	color: #fff;
-}
-
-.is-IE.is-dark-theme *,
-.is-IE.is-dark-theme a,
-.is-IE.is-dark-theme .site-description,
-.is-IE.is-dark-theme .entry-title,
-.is-IE.is-dark-theme .entry-footer,
-.is-IE.is-dark-theme .widget-area,
-.is-IE.is-dark-theme .post-navigation .meta-nav,
-.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
-.is-IE.is-dark-theme .site-footer > .site-info,
-.is-IE.is-dark-theme .site-footer > .site-info a,
-.is-IE.is-dark-theme .site-footer > .site-info a:visited {
-	color: #fff;
-}
-
-.is-IE.is-dark-theme .sub-menu-toggle svg,
-.is-IE.is-dark-theme .sub-menu-toggle path,
-.is-IE.is-dark-theme .post-navigation .meta-nav svg,
-.is-IE.is-dark-theme .post-navigation .meta-nav path {
-	fill: #fff;
-}
-
-.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
-	background: #000;
-}
-@media only screen and (max-width: 481.98px) {
-
-	.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
-	.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
-		background-color: #000;
-	}
-}
-
-.is-IE.is-dark-theme .skip-link:focus {
-	color: #21759b;
-}
-
-.is-IE .navigation .nav-links {
-	display: block;
-}
-
-.is-IE .post-thumbnail .wp-post-image {
-	min-width: auto;
-}
-
-.is-IE .wp-block-group:before,
-.is-IE .wp-block-group:after {
-	content: "";
-	display: block;
-	clear: both;
-}