Merge branch 'develop' into update/guide-lighter-media

Author: kienstra

assets/css/amp-stories.css

@@ -42,6 +42,10 @@ amp-story-grid-layer[template="fill"] .wp-block-image {
 	overflow-wrap: break-word;
 }
 
+.wp-block-amp-amp-story-text {
+	font-weight: normal;
+}
+
 .is-style-rounded,
 .is-style-rounded img {
 	border-radius: 5px;

assets/images/story-templates/cta-bg.jpg

@@ -87,7 +87,6 @@ class CallToActionEdit extends Component {
 							color: textColor.color,
 							fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
 						} }
-						keepPlaceholderOnFocus
 					/>
 				</div>
 				{ isSelected && (
@@ -98,6 +97,7 @@ class CallToActionEdit extends Component {
 						<URLInput
 							value={ url }
 							onChange={ ( value ) => setAttributes( { url: value } ) }
+							autoFocus={ false /* eslint-disable-line jsx-a11y/no-autofocus */ }
 						/>
 						<IconButton icon="editor-break" label={ __( 'Apply', 'amp' ) } type="submit" />
 					</form>

assets/images/story-templates/cta-image.jpg

@@ -132,7 +132,6 @@ class TextBlockEdit extends Component {
 							backgroundColor: appliedBackgroundColor,
 							color: textColor.color,
 							fontSize: ampFitText ? autoFontSize + 'px' : userFontSize,
-							fontWeight: 'h1' === tagName || 'h2' === tagName ? 700 : 'normal',
 							textAlign: align,
 							position: ampFitText && content.length ? 'static' : undefined,
 						} }

assets/images/story-templates/fandom-cta.jpg

@@ -15,7 +15,7 @@ export const name = 'amp/amp-story-text';
 const supports = {
 	anchor: true,
 	reusable: true,
-	className: false,
+	className: true,
 };
 
 const schema = {

assets/images/story-templates/fandom-fact.jpg

@@ -410,9 +410,6 @@ export default createHigherOrderComponent(
 									checked={ ampFitText }
 									onChange={ () => {
 										setAttributes( { ampFitText: ! ampFitText } );
-										if ( ! ampFitText ) {
-											setFontSize( attributes.autoFontSize );
-										}
 									} }
 								/>
 								{ ! ampFitText && (

assets/images/story-templates/fandom-title.jpg

@@ -116,6 +116,8 @@ const EnhancedResizableBox = ( props ) => {
 							textElement = blockElement.querySelector( '.wp-block-amp-amp-story-post-date' );
 							break;
 					}
+				} else {
+					textElement = null;
 				}
 
 				if ( ampFitText && 'amp/amp-story-text' === blockName ) {

assets/images/story-templates/got-logo.png

@@ -5,6 +5,7 @@ coverage:
     project:
       default:
         target: auto
+        threshold: 0.1%
 
 comment: off
 

assets/images/story-templates/intro-bg.jpg

@@ -20,7 +20,7 @@
     "dealerdirect/phpcodesniffer-composer-installer": "0.5.0",
     "phpcompatibility/php-compatibility": "9.1.1",
     "wp-coding-standards/wpcs": "2.1.1",
-    "xwp/wp-dev-lib": "1.1.1"
+    "xwp/wp-dev-lib": "1.1.2"
   },
   "suggest": {
     "ext-intl": "Enables use of idn_to_utf8() to convert punycode domains to UTF-8 for use with an AMP Cache.",

assets/images/story-templates/quote-bg.jpg

@@ -16,7 +16,7 @@ class AMP_Story_Templates {
 	 *
 	 * @var string
 	 */
-	const STORY_TEMPLATES_VERSION = '0.2.8';
+	const STORY_TEMPLATES_VERSION = '0.3.0';
 
 	/**
 	 * Slug for templates' taxonomy.
@@ -201,6 +201,26 @@ public static function get_story_templates() {
 				'title' => __( 'Template: Travel Vertical', 'amp' ),
 				'name'  => 'travel-vertical',
 			),
+			array(
+				'title' => __( 'Template: Fandom Title', 'amp' ),
+				'name'  => 'fandom-title',
+			),
+			array(
+				'title' => __( 'Template: Fandom CTA', 'amp' ),
+				'name'  => 'fandom-cta',
+			),
+			array(
+				'title' => __( 'Template: Fandom Fact', 'amp' ),
+				'name'  => 'fandom-fact',
+			),
+			array(
+				'title' => __( 'Template: Fandom Fact Text', 'amp' ),
+				'name'  => 'fandom-fact-text',
+			),
+			array(
+				'title' => __( 'Template: Fandom Intro', 'amp' ),
+				'name'  => 'fandom-intro',
+			),
 		);
 	}
 

assets/images/story-templates/quote-image.png

@@ -22,6 +22,8 @@ class AMP_HTTP {
 	/**
 	 * Headers sent (or attempted to be sent).
 	 *
+	 * This is used primarily for the benefit of unit testing. Otherwise, `headers_list()` should be used.
+	 *
 	 * @since 1.0
 	 * @see AMP_HTTP::send_header()
 	 * @var array[]
@@ -490,4 +492,23 @@ public static function filter_comment_post_redirect( $url, $comment ) {
 
 		return null;
 	}
+
+	/**
+	 * Get the Content-Type for the response.
+	 *
+	 * @since 1.2
+	 *
+	 * @return string Content type.
+	 */
+	public static function get_response_content_type() {
+		$content_type = ini_get( 'default_mimetype' );
+		foreach ( headers_list() as $header ) {
+			list( $name, $value ) = explode( ':', $header, 2 );
+			if ( 'content-type' === strtolower( $name ) ) {
+				$content_type = trim( $value );
+				break;
+			}
+		}
+		return $content_type;
+	}
 }

assets/images/story-templates/title-bg.jpg

@@ -1725,7 +1725,8 @@ public static function prepare_response( $response, $args = array() ) {
 			);
 		}
 
-		if ( '<' !== substr( ltrim( $response ), 0, 1 ) ) {
+		// Abort if the response was not HTML.
+		if ( 'text/html' !== substr( AMP_HTTP::get_response_content_type(), 0, 9 ) || '<' !== substr( ltrim( $response ), 0, 1 ) ) {
 			return $response;
 		}
 

assets/images/story-templates/travel-tip.jpg

@@ -204,6 +204,9 @@ public function render( $args ) {
 			return '';
 		}
 
+		$max_width  = 0;
+		$max_height = 0;
+
 		$images = array();
 		foreach ( $args['images'] as $props ) {
 			$image_atts = array(
@@ -212,6 +215,8 @@ public function render( $args ) {
 				'height' => $props['height'],
 				'layout' => 'responsive',
 			);
+			$max_width  = max( $max_width, $props['width'] );
+			$max_height = max( $max_height, $props['height'] );
 			if ( ! empty( $args['lightbox'] ) ) {
 				$image_atts['lightbox'] = '';
 				$image_atts['on']       = 'tap:' . AMP_Img_Sanitizer::AMP_IMAGE_LIGHTBOX_ID;
@@ -239,8 +244,8 @@ public function render( $args ) {
 		return AMP_HTML_Utils::build_tag(
 			'amp-carousel',
 			array(
-				'width'  => $this->args['width'],
-				'height' => $this->args['height'],
+				'width'  => $max_width,
+				'height' => $max_height,
 				'type'   => 'slides',
 				'layout' => 'responsive',
 			),

assets/src/stories-editor/blocks/amp-story-cta/edit.js

@@ -27,7 +27,6 @@ class AMP_Options_Manager {
 		'supported_post_types'     => array( 'post' ),
 		'analytics'                => array(),
 		'auto_accept_sanitization' => true,
-		'accept_tree_shaking'      => true,
 		'all_templates_supported'  => true,
 		'supported_templates'      => array( 'is_singular' ),
 		'enable_response_caching'  => true,
@@ -135,7 +134,6 @@ public static function validate_options( $new_options ) {
 		}
 
 		$options['auto_accept_sanitization'] = ! empty( $new_options['auto_accept_sanitization'] );
-		$options['accept_tree_shaking']      = ! empty( $new_options['accept_tree_shaking'] );
 		$options['enable_amp_stories']       = ! empty( $new_options['enable_amp_stories'] );
 
 		// Validate post type support.

assets/src/stories-editor/blocks/amp-story-text/edit.js

@@ -270,15 +270,8 @@ public function render_validation_handling() {
 					'code' => 'non_existent',
 				)
 			);
-			remove_filter( 'amp_validation_error_sanitized', array( 'AMP_Validation_Manager', 'filter_tree_shaking_validation_error_as_accepted' ) );
-			$tree_shaking_sanitization = AMP_Validation_Error_Taxonomy::get_validation_error_sanitization(
-				array(
-					'code' => AMP_Style_Sanitizer::TREE_SHAKING_ERROR_CODE,
-				)
-			);
 
 			$forced_sanitization = 'with_filter' === $auto_sanitization['forced'];
-			$forced_tree_shaking = $forced_sanitization || 'with_filter' === $tree_shaking_sanitization['forced'];
 			?>
 
 			<?php if ( $forced_sanitization ) : ?>
@@ -320,22 +313,6 @@ public function render_validation_handling() {
 				</div>
 			<?php endif; ?>
 
-			<?php if ( $forced_tree_shaking ) : ?>
-				<input type="hidden" name="<?php echo esc_attr( AMP_Options_Manager::OPTION_NAME . '[accept_tree_shaking]' ); ?>" value="<?php echo AMP_Options_Manager::get_option( 'accept_tree_shaking' ) ? 'on' : ''; ?>">
-			<?php else : ?>
-				<div class="amp-tree-shaking">
-					<p>
-						<label for="accept_tree_shaking">
-							<input id="accept_tree_shaking" type="checkbox" name="<?php echo esc_attr( AMP_Options_Manager::OPTION_NAME . '[accept_tree_shaking]' ); ?>" <?php checked( AMP_Options_Manager::get_option( 'accept_tree_shaking' ) ); ?>>
-							<?php esc_html_e( 'Automatically remove CSS rules that are not relevant to a given page (tree shaking).', 'amp' ); ?>
-						</label>
-					</p>
-					<p class="description">
-						<?php esc_html_e( 'AMP limits the total amount of CSS to no more than 50KB; any more than this will cause a validation error. The need to tree shake the CSS is not done by default because in some situations (in particular for dynamic content) it can result in CSS rules being removed that are needed.', 'amp' ); ?>
-					</p>
-				</div>
-			<?php endif; ?>
-
 			<script>
 			(function( $ ) {
 				var getThemeSupportMode = function() {
@@ -346,21 +323,14 @@ public function render_validation_handling() {
 					return checkedInput.val();
 				};
 
-				var updateTreeShakingHiddenClass = function() {
-					var checkbox = $( '#auto_accept_sanitization' );
-					$( '.amp-tree-shaking' ).toggleClass( 'hidden', checkbox.prop( 'checked' ) && 'native' !== getThemeSupportMode() );
-				};
-
 				var updateHiddenClasses = function() {
 					var themeSupportMode = getThemeSupportMode();
 					$( '.amp-auto-accept-sanitize' ).toggleClass( 'hidden', 'native' === themeSupportMode );
 					$( '.amp-validation-field' ).toggleClass( 'hidden', 'disabled' === themeSupportMode );
 					$( '.amp-auto-accept-sanitize-canonical' ).toggleClass( 'hidden', 'native' !== themeSupportMode );
-					updateTreeShakingHiddenClass();
 				};
 
 				$( 'input[type=radio][name="amp-options[theme_support]"]' ).change( updateHiddenClasses );
-				$( '#auto_accept_sanitization' ).change( updateTreeShakingHiddenClass );
 
 				updateHiddenClasses();
 			})( jQuery );

assets/src/stories-editor/blocks/amp-story-text/index.js

@@ -128,13 +128,16 @@ public function sanitize() {
 				continue;
 			}
 
+			list( $width, $height ) = $this->get_carousel_dimensions( $node );
+
 			$amp_carousel = AMP_DOM_Utils::create_node(
 				$this->dom,
 				'amp-carousel',
 				array(
-					'height' => $this->get_carousel_height( $node ),
+					'width'  => $width,
+					'height' => $height,
 					'type'   => 'slides',
-					'layout' => 'fixed-height',
+					'layout' => 'responsive',
 				)
 			);
 			foreach ( $images as $image ) {
@@ -150,15 +153,20 @@ public function sanitize() {
 	 * Get carousel height by containing images.
 	 *
 	 * @param DOMElement $element The UL element.
-	 * @return int Height.
+	 * @return array {
+	 *     Dimensions.
+	 *
+	 *     @type int $width  Width.
+	 *     @type int $height Height.
+	 * }
 	 */
-	protected function get_carousel_height( $element ) {
+	protected function get_carousel_dimensions( $element ) {
 		$images     = $element->getElementsByTagName( 'amp-img' );
 		$num_images = $images->length;
 		$max_height = 0;
 		$max_width  = 0;
 		if ( 0 === $num_images ) {
-			return self::FALLBACK_HEIGHT;
+			return array( self::FALLBACK_WIDTH, self::FALLBACK_HEIGHT );
 		}
 		foreach ( $images as $image ) {
 			/**
@@ -170,17 +178,13 @@ protected function get_carousel_height( $element ) {
 			if ( is_numeric( $image_height ) ) {
 				$max_height = max( $max_height, $image_height );
 			}
-			$image_width = $image->getAttribute( 'height' );
+			$image_width = $image->getAttribute( 'width' );
 			if ( is_numeric( $image_width ) ) {
 				$max_width = max( $max_width, $image_width );
 			}
 		}
 
-		if ( ! empty( $this->args['content_max_width'] ) && $max_height > 0 && $max_width > $this->args['content_max_width'] ) {
-			$max_height = ( $max_width * $this->args['content_max_width'] ) / $max_height;
-		}
-
-		return ! $max_height ? self::FALLBACK_HEIGHT : $max_height;
+		return array( $max_width, $max_height );
 	}
 
 	/**