From dc9e628d92bf2643543d58e261a6834f2b96c014 Mon Sep 17 00:00:00 2001 From: David Cramer Date: Fri, 1 Jun 2018 10:24:53 +0200 Subject: [PATCH] Add required styles for amp components in the header image and video --- includes/class-amp-theme-support.php | 15 ++-- .../class-amp-core-theme-sanitizer.php | 71 ++++++++++++++++++- .../sanitizers/class-amp-video-sanitizer.php | 2 +- 3 files changed, 77 insertions(+), 11 deletions(-) diff --git a/includes/class-amp-theme-support.php b/includes/class-amp-theme-support.php index c8b5518a228..1a08ae28584 100644 --- 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 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 index d3212c4b88c..075aae31120 100644 --- 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 index b61c85343fb..668dfed9064 100644 --- 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' ), ); }