Ensure ID attribute is added to scripts in WP<5.5

Author: westonruter

includes/amp-helper-functions.php

@@ -92,6 +92,11 @@ function amp_bootstrap_plugin() {
 	// Ensure async and custom-element/custom-template attributes are present on script tags.
 	add_filter( 'script_loader_tag', 'amp_filter_script_loader_tag', PHP_INT_MAX, 2 );
 
+	// Ensure ID attribute is present in WP<5.5.
+	if ( version_compare( get_bloginfo( 'version' ), '5.5', '<' ) ) {
+		add_filter( 'script_loader_tag', 'amp_ensure_id_attribute_script_loader_tag', 1000, 2 );
+	}
+
 	// Ensure crossorigin=anonymous is added to font links.
 	add_filter( 'style_loader_tag', 'amp_filter_font_style_loader_tag_with_crossorigin_anonymous', 10, 4 );
 
@@ -1157,6 +1162,31 @@ function amp_filter_script_loader_tag( $tag, $handle ) {
 	return $tag;
 }
 
+/**
+ * Ensure ID attribute is added to printed scripts.
+ *
+ * Core started adding in WP 5.5. This is used both by validation logic for sourcing attribution as well as in the
+ * script and comments sanitizers.
+ *
+ * @link https://core.trac.wordpress.org/changeset/48295
+ * @since 2.2
+ * @internal
+ *
+ * @param string $tag    The <script> tag for the enqueued script.
+ * @param string $handle The script's registered handle.
+ * @return string Filtered script.
+ */
+function amp_ensure_id_attribute_script_loader_tag( $tag, $handle ) {
+	if ( false === strpos( $tag, ' id="' ) ) {
+		$tag = str_replace(
+			'<script ',
+			sprintf( '<script id="%s" ', esc_attr( "$handle-js" ) ),
+			$tag
+		);
+	}
+	return $tag;
+}
+
 /**
  * Explicitly opt-in to CORS mode by adding the crossorigin attribute to font stylesheet links.
  *

includes/validation/class-amp-validation-manager.php

@@ -951,9 +951,16 @@ protected static function has_dependency( WP_Dependencies $dependencies, $curren
 	 * @return bool
 	 */
 	protected static function is_matching_script( DOMElement $element, $script_handle ) {
+
+		// Use the ID attribute which was added to printed scripts after WP ?.?.
+		if ( $element->getAttribute( Attribute::ID ) === "{$script_handle}-js" ) {
+			return true;
+		}
+
 		if ( ! isset( wp_scripts()->registered[ $script_handle ] ) ) {
 			return false;
 		}
+
 		$script_dependency = wp_scripts()->registered[ $script_handle ];
 		if ( empty( $script_dependency->src ) ) {
 			return false;
@@ -1002,7 +1009,7 @@ public static function locate_sources( DOMNode $node ) {
 			&&
 			'link' === $node->nodeName
 			&&
-			preg_match( '/(?P<handle>.+)-css$/', (string) $node->getAttribute( 'id' ), $matches )
+			preg_match( '/(?P<handle>.+)-css$/', (string) $node->getAttribute( Attribute::ID ), $matches )
 			&&
 			wp_styles()->query( $matches['handle'] )
 		);
@@ -1047,9 +1054,9 @@ static function ( $enqueued_style_source ) use ( $style_handle ) {
 			&&
 			$node->firstChild instanceof DOMText
 			&&
-			$node->hasAttribute( 'id' )
+			$node->hasAttribute( Attribute::ID )
 			&&
-			preg_match( '/^(?P<handle>.+)-inline-css$/', $node->getAttribute( 'id' ), $matches )
+			preg_match( '/^(?P<handle>.+)-inline-css$/', $node->getAttribute( Attribute::ID ), $matches )
 			&&
 			wp_styles()->query( $matches['handle'] )
 			&&

tests/php/test-amp-helper-functions.php

@@ -128,6 +128,11 @@ public function test_amp_bootstrap_plugin() {
 		$this->assertEquals( 9, has_action( 'plugins_loaded', '_amp_bootstrap_customizer' ) );
 
 		$this->assertEquals( PHP_INT_MAX, has_filter( 'script_loader_tag', 'amp_filter_script_loader_tag' ) );
+		if ( version_compare( get_bloginfo( 'version' ), '5.5', '<' ) ) {
+			$this->assertEquals( 1000, has_filter( 'script_loader_tag', 'amp_ensure_id_attribute_script_loader_tag' ) );
+		} else {
+			$this->assertFalse( has_filter( 'script_loader_tag', 'amp_ensure_id_attribute_script_loader_tag' ) );
+		}
 		$this->assertEquals( 10, has_filter( 'style_loader_tag', 'amp_filter_font_style_loader_tag_with_crossorigin_anonymous' ) );
 		$this->assertEquals( 10, has_filter( 'all_plugins', 'amp_modify_plugin_description' ) );
 	}
@@ -145,6 +150,19 @@ public function test_amp_bootstrap_plugin_amp_disabled() {
 		}
 	}
 
+	/** @covers ::amp_ensure_id_attribute_script_loader_tag() */
+	public function test_amp_ensure_id_attribute_script_loader_tag() {
+		$this->assertEquals(
+			'<script id="foo-js" src="foo.js"></script>',
+			amp_ensure_id_attribute_script_loader_tag( '<script src="foo.js"></script>', 'foo' )
+		);
+
+		$this->assertEquals(
+			'<script src="foo.js" id="bar"></script>',
+			amp_ensure_id_attribute_script_loader_tag( '<script src="foo.js" id="bar"></script>', 'foo' )
+		);
+	}
+
 	/** @covers ::amp_init() */
 	public function test_amp_init_migration() {
 		global $wp_actions;