Remove the wp-has-aspect-ratio class from block embeds (#4813)

includes/sanitizers/class-amp-block-sanitizer.php

@@ -41,27 +41,30 @@ public function sanitize() {
 			$node = $nodes->item( $i );
 
 			// We are only looking for <figure> elements which have wp-block-embed as class.
-			$class = (string) $node->getAttribute( 'class' );
-			if ( false === strpos( $class, 'wp-block-embed' ) ) {
+			$classes = preg_split( '/\s+/', trim( $node->getAttribute( 'class' ) ) );
+
+			if ( ! in_array( 'wp-block-embed', $classes, true ) ) {
 				continue;
 			}
 
-			// Remove classes like wp-embed-aspect-16-9 since responsive layout is handled by AMP's layout system.
 			$responsive_width  = null;
 			$responsive_height = null;
-			$node->setAttribute(
-				'class',
-				preg_replace_callback(
-					'/(?<=^|\s)wp-embed-aspect-(?P<width>\d+)-(?P<height>\d+)(?=\s|$)/',
-					function ( $matches ) use ( &$responsive_width, &$responsive_height ) {
+
+			// Remove classes related to aspect ratios as the embed's responsiveness will be handled by AMP's layout system.
+			$classes = array_filter(
+				$classes,
+				static function ( $class ) use ( &$responsive_width, &$responsive_height ) {
+					if ( preg_match( '/^wp-embed-aspect-(?P<width>\d+)-(?P<height>\d+)$/', $class, $matches ) ) {
 						$responsive_width  = $matches['width'];
 						$responsive_height = $matches['height'];
-						return '';
-					},
-					$class
-				)
+						return false;
+					}
+					return 'wp-has-aspect-ratio' !== $class;
+				}
 			);
 
+			$node->setAttribute( 'class', implode( ' ', $classes ) );
+
 			// We're looking for <figure> elements that have one child node only.
 			if ( 1 !== count( $node->childNodes ) ) {
 				continue;

tests/php/test-class-amp-block-sanitizer.php

@@ -24,7 +24,7 @@ public function get_data() {
 
 			'more_than_one_child'  => [
 				'<figure class="wp-block-embed wp-embed-aspect-16-9 wp-has-aspect-ratio"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>',
-				'<figure class="wp-block-embed  wp-has-aspect-ratio"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>',
+				'<figure class="wp-block-embed"><amp-facebook></amp-facebook><amp-facebook></amp-facebook></figure>',
 			],
 
 			'no_wp_block_embed'    => [
@@ -44,7 +44,7 @@ public function get_data() {
 
 			'responsive_layout'    => [
 				'<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"><amp-soundcloud data-trackid="90097394" data-visual="true" height="400" width="640" layout="responsive"></amp-soundcloud></div></figure>',
-				'<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud  wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"><amp-soundcloud data-trackid="90097394" data-visual="true" height="3" width="4" layout="responsive"></amp-soundcloud></div></figure>',
+				'<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud"><div class="wp-block-embed__wrapper"><amp-soundcloud data-trackid="90097394" data-visual="true" height="3" width="4" layout="responsive"></amp-soundcloud></div></figure>',
 			],
 		];
 	}