Add required styles for amp components in the header image and video

ampproject · Jun 1, 2018 · dc9e628 · dc9e628
1 parent 80e2355
commit dc9e628
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 11 deletions.
diff --git a/includes/class-amp-theme-support.php b/includes/class-amp-theme-support.php
@@ -1288,6 +1288,7 @@ public static function conditionally_output_header( $html, $header, $atts ) {
 	 *
 	 * @since 1.0
 	 * @link https://github.com/WordPress/wordpress-develop/blob/d002fde80e5e3a083e5f950313163f566561517f/src/wp-includes/js/wp-custom-header.js#L54
+	 * @link https://github.com/WordPress/wordpress-develop/blob/d002fde80e5e3a083e5f950313163f566561517f/src/wp-includes/js/wp-custom-header.js#L78
 	 * @param array $atts The header tag attributes array.
 	 * @return string $html Filtered markup.
 	 */
@@ -1302,13 +1303,13 @@ public static function output_header_video( $atts ) {
 			'media'    => '(min-width: ' . $video_settings['minWidth'] . 'px)',
 			'width'    => $video_settings['width'],
 			'height'   => $video_settings['height'],
-			'layout'   => 'fill',
+			'layout'   => 'responsive',
 			'autoplay' => '',
 			'id'       => 'wp-custom-header-video',
 		);
 
-		$atts['placeholder'] = '';
-		$image_placeholder   = self::output_header_image( $atts );
+		// Create image banner to stay behind the video.
+		$image_header = self::output_header_image( $atts );
 
 		// If the video URL is for YouTube, return an <amp-youtube> element.
 		if ( isset( $parsed_url['host'], $query['v'] ) && ( false !== strpos( $parsed_url['host'], 'youtube' ) ) ) {
@@ -1335,7 +1336,8 @@ public static function output_header_video( $atts ) {
 				)
 			);
 		}
-		return $image_placeholder . $video_header;
+
+		return $image_header . $video_header;
 	}
 
 	/**
@@ -1352,10 +1354,7 @@ public static function output_header_video( $atts ) {
 	 */
 	public static function output_header_image( $atts ) {
 
-		$atts['layout'] = 'fill';
-		unset( $atts['width'] );
-
-		$place_holder = AMP_HTML_Utils::build_tag( 'img', $atts );
+		$place_holder = AMP_HTML_Utils::build_tag( 'amp-img', $atts );
 
 		return $place_holder;
 

diff --git a/includes/sanitizers/class-amp-core-theme-sanitizer.php b/includes/sanitizers/class-amp-core-theme-sanitizer.php
@@ -24,8 +24,7 @@ class AMP_Core_Theme_Sanitizer extends AMP_Base_Sanitizer {
 		'twentyseventeen' => array(
 			'force_svg_support'              => array(),
 			'force_fixed_background_support' => array(),
-			// @todo Header video probably needs special support in the plugin generally.
-			// @todo Header image is not styled properly. Needs layout=responsive and other things?
+			'header_banner_styles'           => array(),
 			// @todo Dequeue scripts and replace with AMP functionality where possible.
 		),
 	);
@@ -88,4 +87,72 @@ public function force_fixed_background_support() {
 			$this->dom->documentElement->getAttribute( 'class' ) . ' background-fixed'
 		);
 	}
+
+	/**
+	 * Add required styles for video and image headers.
+	 *
+	 * @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L1687
+	 * @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/style.css#L1743
+	 */
+	public function header_banner_styles() {
+
+		$body = $this->dom->getElementsByTagName( 'body' )->item( 0 );
+		if ( has_header_video() ) {
+			$body->setAttribute(
+				'class',
+				$body->getAttribute( 'class' ) . ' has-header-video'
+			);
+		}
+
+		$style_element = $this->dom->createElement( 'style' );
+		$style_content = '
+		.has-header-image .custom-header-media amp-img > img,
+		.has-header-video .custom-header-media amp-video > video,
+		.has-header-video .custom-header-media amp-youtube > iframe {
+			position: fixed;
+			height: auto;
+			left: 50%;
+			max-width: 1000%;
+			min-height: 100%;
+			min-width: 100%;
+			min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
+			width: auto;
+			top: 50%;
+			padding-bottom: 1px; /* Prevent header from extending beyond the footer */
+			-ms-transform: translateX(-50%) translateY(-50%);
+			-moz-transform: translateX(-50%) translateY(-50%);
+			-webkit-transform: translateX(-50%) translateY(-50%);
+			transform: translateX(-50%) translateY(-50%);
+		}
+		.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media amp-img > img {
+			bottom: 0;
+			position: absolute;
+			top: auto;
+			-ms-transform: translateX(-50%) translateY(0);
+			-moz-transform: translateX(-50%) translateY(0);
+			-webkit-transform: translateX(-50%) translateY(0);
+			transform: translateX(-50%) translateY(0);
+		}
+		/* For browsers that support \'object-fit\' */
+		@supports ( object-fit: cover ) {
+			.has-header-image .custom-header-media amp-img > img,
+			.has-header-video .custom-header-media amp-video > video,
+			.has-header-video .custom-header-media amp-youtube > iframe,
+			.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media amp-img > img {
+				height: 100%;
+				left: 0;
+				-o-object-fit: cover;
+				object-fit: cover;
+				top: 0;
+				-ms-transform: none;
+				-moz-transform: none;
+				-webkit-transform: none;
+				transform: none;
+				width: 100%;
+			}
+		}
+		';
+		$style_element->appendChild( $this->dom->createTextNode( $style_content ) );
+		$body->appendChild( $style_element );
+	}
 }
diff --git a/includes/sanitizers/class-amp-video-sanitizer.php b/includes/sanitizers/class-amp-video-sanitizer.php
@@ -39,7 +39,7 @@ class AMP_Video_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	public function get_selector_conversion_mapping() {
 		return array(
-			'video' => array( 'amp-video' ),
+			'video' => array( 'amp-video', 'amp-youtube' ),
 		);
 	}