Merge branch 'amp-story/1563-improve_selecting_layers' into amp-story…

…/1564-layer_manipulation

assets/js/amp-editor-blocks.js

@@ -507,7 +507,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 						props.setAttributes( { height: nextHeight } );
 					}
 				} ),
-				maxFont > height && el(
+				parseInt( maxFont ) > parseInt( height ) && el(
 					wp.components.Notice,
 					{
 						status: 'error',
@@ -530,7 +530,7 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars
 						}
 					} )
 				),
-				minFont > maxFont && el(
+				parseInt( minFont ) > parseInt( maxFont ) && el(
 					wp.components.Notice,
 					{
 						status: 'error',

blocks/amp-story/block-navigation.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map, noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,7 +21,7 @@ function BlockNavigationList( {
 		 */
 		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<ul key='navigation-list' className="editor-block-navigation__list" role="list">
-			{ map( blocks, ( block ) => {
+			{ _.map( blocks, ( block ) => {
 				const blockType = getBlockType( block.name );
 				const isSelected = block.clientId === selectedBlockClientId;
 				let className = 'editor-block-navigation__item-button';
@@ -117,7 +112,7 @@ export default compose(
 			selectedBlockClientId
 		};
 	} ),
-	withDispatch( ( dispatch, { onSelect = noop } ) => {
+	withDispatch( ( dispatch, { onSelect = _.noop } ) => {
 		return {
 			selectBlock( clientId ) {
 				dispatch( 'core/editor' ).selectBlock( clientId );

includes/admin/class-amp-editor-blocks.php

@@ -138,6 +138,10 @@ public function enqueue_block_editor_assets() {
 				array( 'wp-editor', 'wp-blocks', 'lodash', 'wp-i18n', 'wp-element', 'wp-components' ),
 				AMP__VERSION
 			);
+
+			if ( function_exists( 'wp_set_script_translations' ) ) {
+				wp_set_script_translations( 'amp-editor-blocks-build', 'amp' );
+			}
 		}
 
 		wp_enqueue_script(
@@ -155,12 +159,16 @@ public function enqueue_block_editor_assets() {
 			) ) )
 		);
 
-		$locale_data = function_exists( 'wp_get_jed_locale_data' ) ? wp_get_jed_locale_data( 'amp' ) : gutenberg_get_jed_locale_data( 'amp' );
-		wp_add_inline_script(
-			'wp-i18n',
-			'wp.i18n.setLocaleData( ' . wp_json_encode( $locale_data ) . ', "amp" );',
-			'after'
-		);
+		if ( function_exists( 'wp_set_script_translations' ) ) {
+			wp_set_script_translations( 'amp-editor-blocks', 'amp' );
+		} elseif ( function_exists( 'wp_get_jed_locale_data' ) || function_exists( 'gutenberg_get_jed_locale_data' ) ) {
+			$locale_data = function_exists( 'wp_get_jed_locale_data' ) ? wp_get_jed_locale_data( 'amp' ) : gutenberg_get_jed_locale_data( 'amp' );
+			wp_add_inline_script(
+				'wp-i18n',
+				'wp.i18n.setLocaleData( ' . wp_json_encode( $locale_data ) . ', "amp" );',
+				'after'
+			);
+		}
 	}
 
 	/**

includes/admin/class-amp-post-meta-box.php

@@ -203,7 +203,13 @@ public function enqueue_block_assets() {
 			'errorMessages' => $error_messages,
 		);
 
-		$script_data['i18n'] = function_exists( 'wp_get_jed_locale_data' ) ? wp_get_jed_locale_data( 'amp' ) : gutenberg_get_jed_locale_data( 'amp' );
+		if ( function_exists( 'wp_set_script_translations' ) ) {
+			wp_set_script_translations( self::BLOCK_ASSET_HANDLE, 'amp' );
+		} elseif ( function_exists( 'wp_get_jed_locale_data' ) ) {
+			$script_data['i18n'] = wp_get_jed_locale_data( 'amp' );
+		} elseif ( function_exists( 'gutenberg_get_jed_locale_data' ) ) {
+			$script_data['i18n'] = gutenberg_get_jed_locale_data( 'amp' );
+		}
 
 		wp_add_inline_script(
 			self::BLOCK_ASSET_HANDLE,

includes/admin/functions.php

@@ -68,11 +68,13 @@ function amp_admin_get_preview_permalink() {
 	}
 
 	$post_ids = get_posts( array(
-		'post_status'    => 'publish',
-		'post_password'  => '',
-		'post_type'      => $supported_post_types,
-		'posts_per_page' => 1,
-		'fields'         => 'ids',
+		'no_found_rows'    => true,
+		'suppress_filters' => false,
+		'post_status'      => 'publish',
+		'post_password'    => '',
+		'post_type'        => $supported_post_types,
+		'posts_per_page'   => 1,
+		'fields'           => 'ids',
 		// @todo This should eventually do a meta_query to make sure there are none that have AMP_Post_Meta_Box::STATUS_POST_META_KEY = DISABLED_STATUS.
 	) );
 

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

@@ -17,6 +17,7 @@ class AMP_Gallery_Embed_Handler extends AMP_Base_Embed_Handler {
 	 */
 	public function register_embed() {
 		add_filter( 'post_gallery', array( $this, 'maybe_override_gallery' ), 10, 2 );
+		add_action( 'wp_print_styles', array( $this, 'print_styles' ) );
 	}
 
 	/**
@@ -160,6 +161,15 @@ public function maybe_override_gallery( $html, $attributes ) {
 			}
 
 			return $html;
+		} elseif ( isset( $attributes['size'] ) && 'thumbnail' === $attributes['size'] ) {
+			/*
+			 * If the 'gallery' shortcode has a 'size' attribute of 'thumbnail', prevent outputting an <amp-carousel>.
+			 * That will often get thumbnail images around 150 x 150,
+			 * while the <amp-carousel> usually has a width of 600 and a height of 480.
+			 * That often means very low-resolution images.
+			 * So fall back to the normal 'gallery' shortcode callback, gallery_shortcode().
+			 */
+			return '';
 		}
 		return $this->shortcode( $attributes );
 	}
@@ -224,4 +234,25 @@ public function render( $args ) {
 			implode( PHP_EOL, $images )
 		);
 	}
+
+	/**
+	 * 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>.
+	 *
+	 * @return void
+	 */
+	public function print_styles() {
+		?>
+		<style>
+			.wp-block-gallery.is-cropped .blocks-gallery-item amp-img > img {
+				object-fit: cover;
+			}
+		</style>
+		<?php
+	}
 }

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

@@ -53,16 +53,20 @@ 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(),
+			'add_twentynineteen_image_styles'             => array(),
+			'remove_twentynineteen_thumbnail_image_sizes' => array(),
+
 		),
 
 		// Twenty Seventeen.
@@ -340,6 +344,26 @@ public static function set_twentyseventeen_quotes_icon() {
 		} );
 	}
 
+	/**
+	 * Remove the sizes attribute from thumbnail images in Twenty Nineteen.
+	 *
+	 * The AMP runtime sets an inline style on an <amp-img> based on the sizes attribute if it's present.
+	 * For example, <amp-img style="width:calc(50vw)">.
+	 * Removing the 'sizes' attribute isn't ideal, but it looks like it's not possible to override that inline style.
+	 *
+	 * @todo: remove when this is resolved: https://github.com/ampproject/amphtml/issues/17053
+	 * @since 1.0
+	 */
+	public static function remove_twentynineteen_thumbnail_image_sizes() {
+		add_filter( 'wp_get_attachment_image_attributes', function( $attr ) {
+			if ( isset( $attr['class'] ) && false !== strpos( $attr['class'], 'attachment-post-thumbnail' ) ) {
+				unset( $attr['sizes'] );
+			}
+
+			return $attr;
+		}, 11 );
+	}
+
 	/**
 	 * Add filter to adjust the attachment image attributes to ensure attachment pages have a consistent <amp-img> rendering.
 	 *
@@ -526,6 +550,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.
 	 *
@@ -1009,4 +1079,29 @@ public static function add_nav_sub_menu_buttons( $args = array() ) {
 			return $item_output;
 		}, 10, 4 );
 	}
+
+	/**
+	 * Output image styles for twentynineteen.
+	 *
+	 * When <img> tags have an 'aligncenter' class, AMP_Img_Sanitizer::handle_centering() wraps theme in <figure class="aligncenter">.
+	 * This ensures that the image inside it is centered.
+	 *
+	 * @since 1.0
+	 *
+	 * @param array $args Arguments.
+	 */
+	public static function add_twentynineteen_image_styles( $args = array() ) {
+		add_action( 'wp_enqueue_scripts', function() use ( $args ) {
+			ob_start();
+			?>
+			<style>
+				figure.aligncenter {
+					text-align: center
+				}
+			</style>
+			<?php
+			$styles = str_replace( array( '<style>', '</style>' ), '', ob_get_clean() );
+			wp_add_inline_style( get_template() . '-style', $styles );
+		}, 11 );
+	}
 }

includes/sanitizers/class-amp-form-sanitizer.php

@@ -24,6 +24,17 @@ class AMP_Form_Sanitizer extends AMP_Base_Sanitizer {
 	 */
 	public static $tag = 'form';
 
+	/**
+	 * Get mapping of HTML selectors to the AMP component selectors which they may be converted into.
+	 *
+	 * @return array Mapping.
+	 */
+	public function get_selector_conversion_mapping() {
+		return array(
+			'form' => array( 'amp-form' ),
+		);
+	}
+
 	/**
 	 * Sanitize the <form> elements from the HTML contained in this instance's DOMDocument.
 	 *

includes/sanitizers/class-amp-style-sanitizer.php

@@ -1046,6 +1046,9 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
 			$options
 		);
 
+		// Strip the dreaded UTF-8 byte order mark (BOM, \uFEFF). This should ideally get handled by PHP-CSS-Parser <https://github.com/sabberworm/PHP-CSS-Parser/issues/150>.
+		$stylesheet_string = preg_replace( '/^\xEF\xBB\xBF/', '', $stylesheet_string );
+
 		$stylesheet         = array();
 		$parsed_stylesheet  = $this->parse_stylesheet( $stylesheet_string, $options );
 		$validation_results = $parsed_stylesheet['validation_results'];
@@ -1979,13 +1982,17 @@ private function ampify_ruleset_selectors( $ruleset ) {
 				continue;
 			}
 
+			// An element (type) either starts a selector or is preceded by combinator, comma, opening paren, or closing brace.
+			$before_type_selector_pattern = '(?<=^|\(|\s|>|\+|~|,|})';
+			$after_type_selector_pattern  = '(?=$|[^a-zA-Z0-9_-])';
+
 			$edited_selectors = array( $selector );
 			foreach ( $this->selector_mappings as $html_selector => $amp_selectors ) { // Note: The $selector_mappings array contains ~6 items.
-				$html_pattern = '/(?<=^|[^a-z0-9_-])' . preg_quote( $html_selector, '/' ) . '(?=$|[^a-z0-9_-])/i';
+				$html_pattern = '/' . $before_type_selector_pattern . preg_quote( $html_selector, '/' ) . $after_type_selector_pattern . '/i';
 				foreach ( $edited_selectors as &$edited_selector ) { // Note: The $edited_selectors array contains only item in the normal case.
 					$original_selector = $edited_selector;
 					$amp_selector      = array_shift( $amp_selectors );
-					$amp_tag_pattern   = '/(?<=^|[^a-z0-9_-])' . preg_quote( $amp_selector, '/' ) . '(?=$|[^a-z0-9_-])/i';
+					$amp_tag_pattern   = '/' . $before_type_selector_pattern . preg_quote( $amp_selector, '/' ) . $after_type_selector_pattern . '/i';
 					preg_match( $amp_tag_pattern, $edited_selector, $matches );
 					if ( ! empty( $matches ) && $amp_selector === $matches[0] ) {
 						continue;

includes/validation/class-amp-validation-manager.php

@@ -1915,11 +1915,17 @@ public static function enqueue_block_validation() {
 			true
 		);
 
-		$data = wp_json_encode( array(
-			'i18n'                 => function_exists( 'wp_get_jed_locale_data' ) ? wp_get_jed_locale_data( 'amp' ) : gutenberg_get_jed_locale_data( 'amp' ),
+		$data = array(
 			'ampValidityRestField' => self::VALIDITY_REST_FIELD_NAME,
 			'isCanonical'          => amp_is_canonical(),
-		) );
-		wp_add_inline_script( $slug, sprintf( 'ampBlockValidation.boot( %s );', $data ) );
+		);
+
+		if ( function_exists( 'wp_set_script_translations' ) ) {
+			wp_set_script_translations( $slug, 'amp' );
+		} elseif ( function_exists( 'wp_get_jed_locale_data' ) || function_exists( 'gutenberg_get_jed_locale_data' ) ) {
+			$data['i18n'] = function_exists( 'wp_get_jed_locale_data' ) ? wp_get_jed_locale_data( 'amp' ) : gutenberg_get_jed_locale_data( 'amp' );
+		}
+
+		wp_add_inline_script( $slug, sprintf( 'ampBlockValidation.boot( %s );', wp_json_encode( $data ) ) );
 	}
 }