Merge pull request #1619 from Automattic/fix/twentynineteen-featured-image

 Fix object-fit:cover style of Twenty Nineteen featured image

Author: westonruter

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

@@ -53,16 +53,17 @@ class AMP_Core_Theme_Sanitizer extends AMP_Base_Sanitizer {
 	protected static $theme_features = array(
 		// Twenty Nineteen.
 		'twentynineteen'  => array(
-			'dequeue_scripts' => array(
+			'dequeue_scripts'                    => array(
 				'twentynineteen-skip-link-focus-fix', // This is part of AMP. See <https://github.com/ampproject/amphtml/issues/18671>.
 				'twentynineteen-priority-menu',
 				'twentynineteen-touch-navigation', // @todo There could be an AMP implementation of this, similar to what is implemented on ampproject.org.
 			),
-			'remove_actions'  => array(
+			'remove_actions'                     => array(
 				'wp_print_footer_scripts' => array(
 					'twentynineteen_skip_link_focus_fix', // See <https://github.com/WordPress/twentynineteen/pull/47>.
 				),
 			),
+			'add_twentynineteen_masthead_styles' => array(),
 		),
 
 		// Twenty Seventeen.
@@ -526,6 +527,52 @@ protected static function get_twentyseventeen_navigation_outer_height() {
 		return 72;
 	}
 
+	/**
+	 * Add required styles for featured image header in Twenty Nineteen.
+	 *
+	 * The following is necessary because the styles in the theme apply to the featured img,
+	 * and the CSS parser will then convert the selectors to amp-img. Nevertheless, object-fit
+	 * does not apply on amp-img and it needs to apply on an actual img.
+	 *
+	 * @link https://github.com/WordPress/wordpress-develop/blob/5.0/src/wp-content/themes/twentynineteen/style.css#L2276-L2299
+	 * @since 1.0
+	 */
+	public static function add_twentynineteen_masthead_styles() {
+		add_action( 'wp_enqueue_scripts', function() {
+			ob_start();
+			?>
+			<style>
+			.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
+				height: auto;
+				left: 50%;
+				max-width: 1000%;
+				min-height: 100%;
+				min-width: 100vw;
+				position: absolute;
+				top: 50%;
+				transform: translateX(-50%) translateY(-50%);
+				width: auto;
+				z-index: 1;
+				/* When image filters are active, make it grayscale to colorize it blue. */
+			}
+
+			@supports (object-fit: cover) {
+				.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
+					height: 100%;
+					left: 0;
+					object-fit: cover;
+					top: 0;
+					transform: none;
+					width: 100%;
+				}
+			}
+			</style>
+			<?php
+			$styles = str_replace( array( '<style>', '</style>' ), '', ob_get_clean() );
+			wp_add_inline_style( get_template() . '-style', $styles );
+		}, 11 );
+	}
+
 	/**
 	 * Add required styles for video and image headers.
 	 *

tests/validation/test-class-amp-validation-manager.php

@@ -1282,7 +1282,7 @@ public function test_print_plugin_notice() {
 	 * @covers AMP_Validation_Manager::enqueue_block_validation()
 	 */
 	public function test_enqueue_block_validation() {
-		if ( ! function_exists( 'gutenberg_get_jed_locale_data' ) ) {
+		if ( ! function_exists( 'wp_get_jed_locale_data' ) && ! function_exists( 'gutenberg_get_jed_locale_data' ) ) {
 			$this->markTestSkipped( 'Gutenberg not available.' );
 		}