Experiment: Add native img opt-in to prevent conversion to amp-img/amp-anim

assets/css/src/amp-default.css

@@ -4,7 +4,9 @@
  * width such as in the post content so that the contents do not get stretched or cropped.
  * See <https://github.com/ampproject/amphtml/issues/21371#issuecomment-475443219>.
  */
-.amp-wp-enforced-sizes {
+amp-img.amp-wp-enforced-sizes,
+amp-anim.amp-wp-enforced-sizes,
+.amp-wp-unknown-size {
 	object-fit: contain;
 }
 

assets/css/src/amp-playlist-shortcode.css

@@ -2,10 +2,6 @@
 * For the custom AMP implementation of the 'playlist' shortcode.
 */
 .wp-playlist .wp-playlist-current-item img {
-	margin-right: 0;
-}
-
-.wp-playlist .wp-playlist-current-item amp-img {
 	float: left;
 	margin-right: 10px;
 }

includes/amp-helper-functions.php

@@ -1329,6 +1329,28 @@ function amp_is_dev_mode() {
 	);
 }
 
+/**
+ * Determine whether native `img` should be used instead of converting to `amp-img`.
+ *
+ * @since 2.2
+ *
+ * @return bool Whether to use `img`.
+ */
+function amp_is_using_native_img() {
+	/**
+	 * Filters whether to use the native `img` element rather than convert to `amp-img`.
+	 *
+	 * This filter is a feature flag to opt-in to discontinue using `amp-img` (and `amp-anim`) which will be deprecated
+	 * in AMP in the near future. Once this lands in AMP, this filter will switch to defaulting to true instead of false.
+	 *
+	 * @since 2.2
+	 * @link https://github.com/ampproject/amphtml/issues/30442
+	 *
+	 * @param bool $use_native Whether to use `img`.
+	 */
+	return (bool) apply_filters( 'amp_using_native_img', false );
+}
+
 /**
  * Get content sanitizers.
  *
@@ -1373,6 +1395,8 @@ function amp_get_content_sanitizers( $post = null ) {
 		AMP_Theme_Support::TRANSITIONAL_MODE_SLUG === AMP_Options_Manager::get_option( Option::THEME_SUPPORT )
 	);
 
+	$using_native_img = amp_is_using_native_img();
+
 	$sanitizers = [
 		'AMP_Embed_Sanitizer'             => [
 			'amp_to_amp_linking_enabled' => $amp_to_amp_linking_enabled,
@@ -1383,10 +1407,12 @@ function amp_get_content_sanitizers( $post = null ) {
 			'theme_features' => [
 				'force_svg_support' => [], // Always replace 'no-svg' class with 'svg' if it exists.
 			],
+			'use_native_img' => $using_native_img,
 		],
 		'AMP_Srcset_Sanitizer'            => [],
 		'AMP_Img_Sanitizer'               => [
 			'align_wide_support' => current_theme_supports( 'align-wide' ),
+			'use_native_img'     => $using_native_img,
 		],
 		'AMP_Form_Sanitizer'              => [],
 		'AMP_Comments_Sanitizer'          => [

includes/embeds/class-amp-gallery-embed-handler.php

@@ -24,7 +24,6 @@ class AMP_Gallery_Embed_Handler extends AMP_Base_Embed_Handler {
 	 */
 	public function register_embed() {
 		add_filter( 'post_gallery', [ $this, 'generate_gallery_markup' ], 10, 2 );
-		add_action( 'wp_print_styles', [ $this, 'print_styles' ] );
 	}
 
 	/**
@@ -123,7 +122,6 @@ protected function filter_post_gallery_markup( $html, $attrs ) {
 	 */
 	public function unregister_embed() {
 		remove_filter( 'post_gallery', [ $this, 'generate_gallery_markup' ] );
-		remove_action( 'wp_print_styles', [ $this, 'print_styles' ] );
 	}
 
 	/**
@@ -200,23 +198,4 @@ protected function get_parent_container_for_image( DOMElement $image_element ) {
 
 		return $parent_element;
 	}
-
-	/**
-	 * Prints the Gallery block styling.
-	 *
-	 * It would be better to print this in AMP_Gallery_Block_Sanitizer,
-	 * but by the time that runs, it's too late.
-	 * This rule is copied exactly from block-library/style.css, but the selector here has amp-img >.
-	 * The image sanitizer normally converts the <img> from that original stylesheet <amp-img>,
-	 * but that doesn't have the same effect as applying it to the <img>.
-	 */
-	public function print_styles() {
-		?>
-		<style>
-			.wp-block-gallery.is-cropped .blocks-gallery-item amp-img > img {
-				object-fit: cover;
-			}
-		</style>
-		<?php
-	}
 }

includes/embeds/class-amp-playlist-embed-handler.php

@@ -176,7 +176,7 @@ public function audio_playlist( $data ) {
 					<div>
 						<div class="wp-playlist-current-item">
 							<?php if ( $image_url ) : ?>
-								<amp-img src="<?php echo esc_url( $image_url ); ?>" height="<?php echo esc_attr( $dimensions['height'] ); ?>" width="<?php echo esc_attr( $dimensions['width'] ); ?>"></amp-img>
+								<img src="<?php echo esc_url( $image_url ); ?>" height="<?php echo esc_attr( $dimensions['height'] ); ?>" width="<?php echo esc_attr( $dimensions['width'] ); ?>">
 							<?php endif; ?>
 							<div class="wp-playlist-caption">
 								<span class="wp-playlist-item-meta wp-playlist-item-title"><?php echo esc_html( $title ); ?></span>

includes/sanitizers/class-amp-core-theme-sanitizer.php

@@ -29,6 +29,7 @@ class AMP_Core_Theme_Sanitizer extends AMP_Base_Sanitizer {
 	 *      @type string $stylesheet     Stylesheet slug.
 	 *      @type string $template       Template slug.
 	 *      @type array  $theme_features List of theme features that need to be applied. Features are method names,
+	 *      @type bool   $use_native_img Whether to use native img.
 	 * }
 	 */
 	protected $args;
@@ -76,9 +77,10 @@ class AMP_Core_Theme_Sanitizer extends AMP_Base_Sanitizer {
 	 * @since 1.5.0 Converted `theme_features` variable into `get_theme_config` function.
 	 *
 	 * @param string $theme_slug Theme slug.
+	 * @param array  $args       Sanitizer args.
 	 * @return array|null Array comprising of the theme config if its slug is found, null if it is not.
 	 */
-	protected static function get_theme_features_config( $theme_slug ) {
+	protected static function get_theme_features_config( $theme_slug, $args = [] ) {
 		switch ( $theme_slug ) {
 			case 'twentytwentyone':
 				$config = [
@@ -135,9 +137,9 @@ protected static function get_theme_features_config( $theme_slug ) {
 					'add_twentytwenty_modals'          => [],
 					'add_twentytwenty_toggles'         => [],
 					'add_nav_menu_styles'              => [],
-					'add_twentytwenty_masthead_styles' => [],
-					'add_img_display_block_fix'        => [],
-					'add_twentytwenty_custom_logo_fix' => [],
+					'add_twentytwenty_masthead_styles' => $args,
+					'add_img_display_block_fix'        => $args,
+					'add_twentytwenty_custom_logo_fix' => $args,
 					'add_twentytwenty_current_page_awareness' => [],
 				];
 
@@ -188,7 +190,6 @@ protected static function get_theme_features_config( $theme_slug ) {
 					],
 					'force_fixed_background_support'      => [],
 					'add_twentyseventeen_masthead_styles' => [],
-					'add_twentyseventeen_image_styles'    => [],
 					'add_twentyseventeen_sticky_nav_menu' => [],
 					'add_has_header_video_body_class'     => [],
 					'add_nav_menu_styles'                 => [
@@ -199,7 +200,7 @@ protected static function get_theme_features_config( $theme_slug ) {
 						'//header[@id = "masthead"]//a[ contains( @class, "menu-scroll-down" ) ]',
 					],
 					'set_twentyseventeen_quotes_icon'     => [],
-					'add_twentyseventeen_attachment_image_attributes' => [],
+					'add_twentyseventeen_attachment_image_attributes' => $args,
 				];
 
 			// Twenty Sixteen.
@@ -489,7 +490,7 @@ protected static function get_theme_features( $args, $static = false ) {
 		$theme_candidates = wp_array_slice_assoc( $args, [ 'stylesheet', 'template' ] );
 		foreach ( $theme_candidates as $theme_candidate ) {
 			if ( in_array( $theme_candidate, self::$supported_themes, true ) ) {
-				$theme_features = self::get_theme_features_config( $theme_candidate );
+				$theme_features = self::get_theme_features_config( $theme_candidate, $args );
 				break;
 			}
 		}
@@ -563,8 +564,14 @@ static function ( $content ) {
 	 *
 	 * @since 1.0
 	 * @link https://github.com/WordPress/wordpress-develop/blob/ddc8f803c6e99118998191fd2ea24124feb53659/src/wp-content/themes/twentyseventeen/functions.php#L545:L554
+	 *
+	 * @param array $args Args.
 	 */
-	public static function add_twentyseventeen_attachment_image_attributes() {
+	public static function add_twentyseventeen_attachment_image_attributes( $args = [] ) {
+		if ( ! empty( $args['use_native_img'] ) ) {
+			return;
+		}
+
 		/*
 		 * The max-height of the `.custom-logo-link img` is defined as being 80px, unless
 		 * there is header media in which case it is 200px. Issues related to vertically-squashed
@@ -799,9 +806,16 @@ protected static function get_twentyseventeen_navigation_outer_height() {
 	}
 
 	/**
-	 * Add required styles for featured image header and image blocks in Twenty Twenty.
+	 * Add required styles for featured image header in Twenty Twenty.
+	 *
+	 * @param array $args Args.
 	 */
-	public static function add_twentytwenty_masthead_styles() {
+	public static function add_twentytwenty_masthead_styles( $args = [] ) {
+		if ( ! empty( $args['use_native_img'] ) ) {
+			return;
+		}
+
+		// @todo This was introduced in <https://github.com/ampproject/amp-wp/commit/e1c7462> but it doesn't seem to have any effect.
 		add_action(
 			'wp_enqueue_scripts',
 			static function() {
@@ -811,10 +825,6 @@ static function() {
 				.featured-media amp-img {
 					position: static;
 				}
-
-				.wp-block-image img {
-					display: block;
-				}
 				</style>
 				<?php
 				$styles = str_replace( [ '<style>', '</style>' ], '', ob_get_clean() );
@@ -833,8 +843,14 @@ static function() {
 	 * @since 1.5
 	 * @link https://github.com/ampproject/amp-wp/issues/4418
 	 * @link https://codepen.io/westonruter/pen/rNVqadv
+	 *
+	 * @param array $args Args.
 	 */
-	public static function add_twentytwenty_custom_logo_fix() {
+	public static function add_twentytwenty_custom_logo_fix( $args = [] ) {
+		if ( ! empty( $args['use_native_img'] ) ) {
+			return;
+		}
+
 		$method = __METHOD__;
 		add_filter(
 			'get_custom_logo',
@@ -885,8 +901,14 @@ function ( $attr_name ) {
 	 *
 	 * @since 1.5
 	 * @link https://github.com/ampproject/amp-wp/issues/4419
+	 *
+	 * @param array $args Args.
 	 */
-	public static function add_img_display_block_fix() {
+	public static function add_img_display_block_fix( $args = [] ) {
+		if ( ! empty( $args['use_native_img'] ) ) {
+			return;
+		}
+
 		$method = __METHOD__;
 		// Note that wp_add_inline_style() is not used because this stylesheet needs to be added _before_ style.css so
 		// that any subsequent style rules for images will continue to override.
@@ -958,38 +980,6 @@ static function() {
 		);
 	}
 
-	/**
-	 * Override the featured image header styling in style.css.
-	 * Used only for Twenty Seventeen.
-	 *
-	 * @since 1.0
-	 * @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L2100
-	 */
-	public static function add_twentyseventeen_image_styles() {
-		add_action(
-			'wp_enqueue_scripts',
-			static function() {
-				ob_start();
-				?>
-				<style>
-				/* Override the display: block in twentyseventeen/style.css, as <amp-img> is usually inline-block. */
-				.single-featured-image-header amp-img {
-					display: inline-block;
-				}
-
-				/* Because the <amp-img> is inline-block, its container needs this rule to center it. */
-				.single-featured-image-header {
-					text-align: center;
-				}
-				</style>
-				<?php
-				$styles = str_replace( [ '<style>', '</style>' ], '', ob_get_clean() );
-				wp_add_inline_style( get_template() . '-style', $styles );
-			},
-			11
-		);
-	}
-
 	/**
 	 * Add sticky nav menu to Twenty Seventeen.
 	 *
@@ -1344,7 +1334,7 @@ static function() {
 						padding-top: 0; /* Override responsive hack which is handled by AMP layout. */
 						overflow: visible;
 					}
-					.featured-content .post-thumbnail amp-img {
+					.featured-content .post-thumbnail .wp-post-image {
 						position: static;
 						left: auto;
 						top: auto;
@@ -1420,7 +1410,7 @@ static function() {
 							font-size: 32px;
 							line-height: 46px;
 						}
-						.featured-content .post-thumbnail amp-img {
+						.featured-content .post-thumbnail .wp-post-image {
 							object-fit: cover;
 							object-position: top;
 						}
@@ -1430,7 +1420,7 @@ static function() {
 								float: none;
 								margin: 0;
 							}
-							.featured-content .post-thumbnail amp-img {
+							.featured-content .post-thumbnail .wp-post-image {
 								height: 55.49132947vw;
 							}
 							.slider-control-paging li {

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

@@ -97,7 +97,7 @@ public function sanitize() {
 				$gallery_node->setAttribute( 'data-amp-carousel', 'true' );
 			}
 
-			$img_elements = $node->getElementsByTagName( 'amp-img' );
+			$img_elements = $this->dom->xpath->query( './/amp-img | .//img[ not( parent::noscript ) ]', $node );
 
 			$this->process_gallery_embed( $is_amp_carousel, $is_amp_lightbox, $node, $img_elements );
 		}