Add PreloadHeroImage Optimizer transformer

includes/class-amp-theme-support.php

@@ -21,6 +21,7 @@
 use AmpProject\RemoteRequest\FallbackRemoteGetRequest;
 use AmpProject\RemoteRequest\FilesystemRemoteGetRequest;
 use AmpProject\AmpWP\RemoteRequest\WpHttpRemoteGetRequest;
+use AmpProject\RequestDestination;
 use AmpProject\Tag;
 
 /**
@@ -1667,7 +1668,7 @@ public static function ensure_required_markup( Document $dom, $script_handles =
 			Tag::LINK,
 			[
 				Attribute::REL  => Attribute::REL_PRELOAD,
-				'as'            => Tag::SCRIPT,
+				Attribute::AS_  => RequestDestination::SCRIPT,
 				Attribute::HREF => $runtime_src,
 			]
 		);
@@ -1686,7 +1687,7 @@ public static function ensure_required_markup( Document $dom, $script_handles =
 				Tag::LINK,
 				[
 					Attribute::REL  => Attribute::REL_PRELOAD,
-					'as'            => Tag::SCRIPT,
+					Attribute::AS_  => RequestDestination::SCRIPT,
 					Attribute::HREF => $amp_scripts[ $script_handle ]->getAttribute( Attribute::SRC ),
 				]
 			);
@@ -2267,6 +2268,8 @@ private static function get_optimizer_configuration( $args ) {
 					Optimizer\Transformer\TransformedIdentifier::class,
 				]
 			);
+		} else {
+			array_unshift( $transformers, Transformer\DetermineHeroImages::class );
 		}
 
 		array_unshift( $transformers, Transformer\AmpSchemaOrgMetadata::class );
@@ -2281,7 +2284,12 @@ private static function get_optimizer_configuration( $args ) {
 		$configuration = apply_filters(
 			'amp_optimizer_config',
 			array_merge(
-				[ Optimizer\Configuration::KEY_TRANSFORMERS => $transformers ],
+				[
+					Optimizer\Configuration::KEY_TRANSFORMERS => $transformers,
+					Optimizer\Transformer\PreloadHeroImage::class => [
+						Optimizer\Configuration\PreloadHeroImageConfiguration::INLINE_STYLE_BACKUP_ATTRIBUTE => 'data-amp-original-style',
+					],
+				],
 				$args
 			)
 		);

lib/common/src/Amp.php

@@ -2,6 +2,7 @@
 
 namespace AmpProject;
 
+use AmpProject\Dom\Document;
 use DOMElement;
 use DOMNode;
 
@@ -249,6 +250,56 @@ public static function isCustomElement(DOMNode $node)
         return $node instanceof DOMElement && strpos($node->tagName, Extension::PREFIX) === 0;
     }
 
+    /**
+     * Check whether the given document is an AMP story.
+     *
+     * @param Document $document Document of the page to check within.
+     * @return bool Whether the provided document is an AMP story.
+     */
+    public static function isAmpStory(Document $document)
+    {
+        foreach ($document->head->childNodes as $node) {
+            if (
+                $node instanceof DOMElement
+                &&
+                $node->tagName === Tag::SCRIPT
+                &&
+                $node->getAttribute(Attribute::CUSTOM_ELEMENT) === Extension::STORY
+            ) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Check whether a given node is an AMP template.
+     *
+     * @param DOMNode $node Node to check.
+     * @return bool Whether the node is an AMP template.
+     */
+    public static function isTemplate(DOMNode $node)
+    {
+        if (! $node instanceof DOMElement) {
+            return false;
+        }
+
+        if ($node->tagName === Tag::TEMPLATE) {
+            return true;
+        }
+
+        if (
+            $node->tagName === Tag::SCRIPT
+            && $node->hasAttribute(Attribute::TEMPLATE)
+            && $node->getAttribute(Attribute::TEMPLATE) === Extension::MUSTACHE
+        ) {
+            return true;
+        }
+
+        return false;
+    }
+
     /**
      * Check whether a given node is an async <script> element.
      *
@@ -273,4 +324,20 @@ private static function isAsyncScript(DOMNode $node)
 
         return true;
     }
+
+    /**
+     * Check whether a given node is an AMP iframe.
+     *
+     * @param DOMNode $node Node to check.
+     * @return bool Whether the node is an AMP iframe.
+     */
+    public static function isAmpIframe(DOMNode $node)
+    {
+        if (! $node instanceof DOMElement) {
+            return false;
+        }
+
+        return $node->tagName === Extension::IFRAME
+               || $node->tagName === Extension::VIDEO_IFRAME;
+    }
 }

lib/common/src/Attribute.php

@@ -28,7 +28,9 @@ interface Attribute
     const AMP_RUNTIME           = 'amp-runtime';
     const AMP_SCRIPT_SRC        = 'amp-script-src';
     const ARIA_HIDDEN           = 'aria-hidden';
+    const AS_                   = 'as'; // Underscore needed because 'as' is a PHP keyword.
     const ASYNC                 = 'async';
+    const ATTRIBUTION           = 'attribution';
     const AUTOPLAY              = 'autoplay';
     const CHARSET               = 'charset';
     const CLASS_                = 'class'; // Underscore needed because 'class' is a PHP keyword.
@@ -43,8 +45,11 @@ interface Attribute
     const HOST_SERVICE          = 'host-service';
     const HREF                  = 'href';
     const HTTP_EQUIV            = 'http-equiv';
+    const I_AMPHTML_SSR         = 'i-amphtml-ssr';
     const I_AMPHTML_VERSION     = 'i-amphtml-version';
     const ID                    = 'id';
+    const IMAGESRCSET           = 'imagesrcset';
+    const IMAGESIZES            = 'imagesizes';
     const IMPORTANCE            = 'importance';
     const INTRINSICSIZE         = 'intrinsicsize';
     const LAYOUT                = 'layout';
@@ -55,8 +60,12 @@ interface Attribute
     const NAME                  = 'name';
     const NOLOADING             = 'noloading';
     const OBJECT_FIT            = 'object-fit';
+    const OBJECT_POSITION       = 'object-position';
     const ON                    = 'on';
+    const PLACEHOLDER           = 'placeholder';
+    const POSTER                = 'poster';
     const PROFILE               = 'profile';
+    const REFERRERPOLICY        = 'referrerpolicy';
     const REL                   = 'rel';
     const ROLE                  = 'role';
     const SRCSET                = 'srcset';
@@ -93,4 +102,6 @@ interface Attribute
     const REL_PRELOAD      = 'preload';
     const REL_PRERENDER    = 'prerender';
     const REL_STYLESHEET   = 'stylesheet';
+
+    const DATA_HERO = 'data-hero';
 }

lib/common/src/Dom/Document.php

@@ -19,11 +19,12 @@
  *
  * Abstract away some of the difficulties of working with PHP's DOMDocument.
  *
- * @property DOMXPath    $xpath       XPath query object for this document.
- * @property DOMElement  $html        The document's <html> element.
- * @property DOMElement  $head        The document's <head> element.
- * @property DOMElement  $body        The document's <body> element.
- * @property DOMNodeList $ampElements The document's <amp-*> elements.
+ * @property DOMXPath        $xpath       XPath query object for this document.
+ * @property DOMElement      $html        The document's <html> element.
+ * @property DOMElement      $head        The document's <head> element.
+ * @property DOMElement      $body        The document's <body> element.
+ * @property DOMElement|null $viewport    The document's viewport meta element.
+ * @property DOMNodeList     $ampElements The document's <amp-*> elements.
  *
  * @package ampproject/common
  */
@@ -1614,6 +1615,19 @@ public function __get($name)
                     $this->body = $this->getElementsByTagName(Tag::BODY)->item(0);
                 }
                 return $this->body;
+            case Attribute::VIEWPORT:
+                // This is not cached as it could potentially be requested too early, before the viewport was added, and
+                // the cache would then store null without rechecking later on after the viewport has been added.
+                for ($node = $this->head->firstChild; $node !== null; $node = $node->nextSibling) {
+                    if (
+                        $node instanceof DOMElement
+                        && $node->tagName === Tag::META
+                        && $node->getAttribute(Attribute::NAME) === Attribute::VIEWPORT
+                    ) {
+                        return $node;
+                    }
+                }
+                return null;
             case 'ampElements':
                 $this->ampElements = $this->xpath->query(".//*[ starts-with( name(), 'amp-' ) ]", $this->body)
                     ?: new DOMNodeList();

lib/common/src/Extension.php

@@ -10,18 +10,35 @@
 interface Extension
 {
 
+    const AD                  = 'amp-ad';
     const ANALYTICS           = 'amp-analytics';
+    const ANIM                = 'amp-anim';
     const AUDIO               = 'amp-audio';
     const BIND                = 'amp-bind';
+    const BRIGHTCOVE          = 'amp-brightcove';
+    const DAILYMOTION         = 'amp-dailymotion';
+    const DELIGHT_PLAYER      = 'amp-delight-player';
     const DYNAMIC_CSS_CLASSES = 'amp-dynamic-css-classes';
     const EXPERIMENT          = 'amp-experiment';
+    const FACEBOOK            = 'amp-facebook';
     const GEO                 = 'amp-geo';
+    const GFYCAT              = 'amp-gfycat';
+    const IFRAME              = 'amp-iframe';
+    const IMAGE               = 'amp-img';
+    const IMGUR               = 'amp-imgur';
+    const INSTAGRAM           = 'amp-instagram';
     const MUSTACHE            = 'amp-mustache';
+    const PINTEREST           = 'amp-pinterest';
     const PIXEL               = 'amp-pixel';
+    const REDDIT              = 'amp-reddit';
     const SOCIAL_SHARE        = 'amp-social-share';
     const STORY               = 'amp-story';
+    const TWITTER             = 'amp-twitter';
     const VIDEO               = 'amp-video';
+    const VIDEO_IFRAME        = 'amp-video-iframe';
+    const VIMEO               = 'amp-vimeo';
     const YOUTUBE             = 'amp-youtube';
+    const WISTIA_PLAYER       = 'amp-wistia-player';
 
     /**
      * Prefix of an AMP extension.

lib/common/src/RequestDestination.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace AmpProject;
+
+/**
+ * Interface with constants for the different request destinations that are supported.
+ *
+ * For the purposes of the AMP implementation, we are only interested in the
+ * request destinations that are valid values for the 'as' attribute in preloads.
+ *
+ * Full list of request destinations:
+ * @see https://fetch.spec.whatwg.org/#concept-request-destination
+ *
+ * @package ampproject/common
+ */
+interface RequestDestination
+{
+
+    /**
+     * Audio file, as typically used in <audio>.
+     *
+     * @var string
+     */
+    const AUDIO = 'audio';
+
+    /**
+     * An HTML document intended to be embedded by a <frame> or <iframe>.
+     *
+     * @var string
+     */
+    const DOCUMENT = 'document';
+
+    /**
+     * A resource to be embedded inside an <embed> element.
+     *
+     * @var string
+     */
+    const EMBED = 'embed';
+
+    /**
+     * Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
+     *
+     * @var string
+     */
+    const FETCH = 'fetch';
+
+    /**
+     * Font file.
+     *
+     * @var string
+     */
+    const FONT = 'font';
+
+    /**
+     * Image file.
+     *
+     * @var string
+     */
+    const IMAGE = 'image';
+
+    /**
+     * A resource to be embedded inside an <object> element.
+     *
+     * @var string
+     */
+    const OBJECT = 'object';
+
+    /**
+     * JavaScript file.
+     *
+     * @var string
+     */
+    const SCRIPT = 'script';
+
+    /**
+     * CSS stylesheet.
+     *
+     * @var string
+     */
+    const STYLE = 'style';
+
+    /**
+     * WebVTT file.
+     *
+     * @var string
+     */
+    const TRACK = 'track';
+
+    /**
+     * A JavaScript web worker or shared worker.
+     *
+     * @var string
+     */
+    const WORKER = 'worker';
+
+    /**
+     * Video file, as typically used in <video>.
+     *
+     * @var string
+     */
+    const VIDEO = 'video';
+}

lib/common/src/Tag.php

@@ -18,6 +18,7 @@ interface Tag
     const BODY       = 'body';
     const BR         = 'br';
     const COL        = 'col';
+    const DIV        = 'div';
     const EMBED      = 'embed';
     const FIGCAPTION = 'figcaption';
     const FIGURE     = 'figure';