Web-stories-wp: Incompatibility with AMP 1.5.0

Created on 2 Apr 2020 · 16Comments · Source: google/web-stories-wp

Bug Description

Our way of rendering stories markup with output buffering clashes with the current version of the AMP plugin. There is some markup in the end, but the page is empty.

Expected Behaviour

There should be no conflicts. If anything, I should get SSR out of the box because the AMP plugin is active.

Steps to Reproduce

Install AMP plugin in Standard mode.

EXAMPLE OUTPUT - NO AMP PLUGIN

<!DOCTYPE html>
<html amp lang="en-US"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/><script async="" src="https://cdn.ampproject.org/v0.js"></script><script async="" src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script><style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><style amp-custom="">
              .page-background-area,
              .page-background-overlay-area,
              .page-safe-area {
                position: absolute;
                overflow: hidden;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
              }

              .page-cta-area {
                position: absolute;
                overflow: hidden;
                left: 0;
                right: 0;
                bottom: 0;
                height: calc(100 * var(--story-page-vh, 1vh));
              }

              .page-background-area img, .page-background-area video {
                object-fit: cover;
              }

              .wrapper {
                position: absolute;
                overflow: hidden;
              }

              .fill {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
              }
              </style>      <meta name="generator" content="Web Stories 1.0.0-alpha" />
        <title>Auto Draft &#8211; Web Stories</title>
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Web Stories &raquo; Feed" href="https://web-stories.local/feed/" />
<link rel="alternate" type="application/rss+xml" title="Web Stories &raquo; Comments Feed" href="https://web-stories.local/comments/feed/" />
        <script type="application/ld+json">{"@context":"http:\/\/schema.org","publisher":{"@type":"Organization","name":"Web Stories","logo":"https:\/\/web-stories.local\/wp-content\/plugins\/web-stories-wp\/assets\/images\/fallback-wordpress-publisher-logo.png"},"@type":"BlogPosting","mainEntityOfPage":"https:\/\/web-stories.local\/stories\/auto-draft\/","headline":"Auto Draft","datePublished":"2020-04-02T16:34:43+02:00","dateModified":"2020-04-02T16:34:48+02:00","author":{"@type":"Person","name":"Pascal"}}</script>
        <link rel='https://api.w.org/' href='https://web-stories.local/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://web-stories.local/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://web-stories.local/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Chicago' href='https://web-stories.local/stories/chicago/' />
<meta name="generator" content="WordPress 5.4" />
<link rel="canonical" href="https://web-stories.local/stories/auto-draft/" />
<link rel='shortlink' href='https://web-stories.local/?p=293' />
<link rel="alternate" type="application/json+oembed" href="https://web-stories.local/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb-stories.local%2Fstories%2Fauto-draft%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://web-stories.local/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb-stories.local%2Fstories%2Fauto-draft%2F&#038;format=xml" />
</head><body><amp-story standalone="standalone" publisher="Web Stories" publisher-logo-src="https://web-stories.local/wp-content/plugins/web-stories-wp/assets/images/fallback-wordpress-publisher-logo.png" title="Auto Draft" poster-portrait-src="https://web-stories.local/wp-content/plugins/web-stories-wp/assets/images/fallback-poster.jpg"><amp-story-page id="6e97d949-0fd8-4e8f-bae2-cdb1e804e96d"><amp-story-grid-layer template="vertical"><div class="page-background-area" style="background-color:white;background-image:linear-gradient(45deg, #999999 25%, transparent 25%),
      linear-gradient(-45deg, #999999 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #999999 75%),
      linear-gradient(-45deg, transparent 75%, #999999 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px"><div style="left:0%;top:0%;width:100%;height:100%;opacity:1" id="el-76f49e7d-a9c1-44e3-8e43-ce87aa11294f" class="wrapper"><div class="fill" style="background-color:#fff"></div></div></div></amp-story-grid-layer><amp-story-grid-layer template="vertical" aspect-ratio="440:660"><div class="page-safe-area"></div></amp-story-grid-layer></amp-story-page></amp-story></body></html>

EXAMPLE OUTPUT - AMP PLUGIN INTERFERING


<!DOCTYPE html>
<html amp lang="en-US" i-amphtml-layout="" transformed="self;v=1"><head><meta charset="utf-8"><style amp-runtime="" i-amphtml-version="012004012158290">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update],amp-share-tracking{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#202125!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}
/*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),amp-list [fetch-error],form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}
/*# sourceURL=/css/ampshared.css*/</style><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><meta name="generator" content="Web Stories 1.0.0-alpha"><meta name="generator" content="WordPress 5.4"><title>Auto Draft – Web Stories</title><link rel="preconnect" href="https://cdn.ampproject.org"><link rel="dns-prefetch" href="//s.w.org"><link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"><script async="" src="https://cdn.ampproject.org/v0.js"></script><style amp-custom="">.page-background-area,.page-safe-area{position:absolute;overflow:hidden;top:0;bottom:0;left:0;right:0}.wrapper{position:absolute;overflow:hidden}.fill{position:absolute;top:0;left:0;right:0;bottom:0;margin:0}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-a97e0c0{background-color:white;background-image:linear-gradient(45deg,#999 25%,transparent 25%),linear-gradient(-45deg,#999 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#999 75%),linear-gradient(-45deg,transparent 75%,#999 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-fe02d1f{left:0%;top:0%;width:100%;height:100%;opacity:1}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c84718f{background-color:#fff}

/*# sourceURL=amp-custom.css */</style><link rel="alternate" type="application/rss+xml" title="Web Stories » Feed" href="https://web-stories.local/feed/"><link rel="alternate" type="application/rss+xml" title="Web Stories » Comments Feed" href="https://web-stories.local/comments/feed/"><script type="application/ld+json">{"@context":"http:\/\/schema.org","publisher":{"@type":"Organization","name":"Web Stories","logo":"https:\/\/web-stories.local\/wp-content\/plugins\/web-stories-wp\/assets\/images\/fallback-wordpress-publisher-logo.png"},"@type":"BlogPosting","mainEntityOfPage":"https:\/\/web-stories.local\/stories\/auto-draft\/","headline":"Auto Draft","datePublished":"2020-04-02T16:34:43+02:00","dateModified":"2020-04-02T16:34:48+02:00","author":{"@type":"Person","name":"Pascal"}}</script><link rel="https://api.w.org/" href="https://web-stories.local/wp-json/"><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://web-stories.local/xmlrpc.php?rsd"><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://web-stories.local/wp-includes/wlwmanifest.xml"><link rel="prev" title="Chicago" href="https://web-stories.local/stories/chicago/"><link rel="canonical" href="https://web-stories.local/stories/auto-draft/"><link rel="shortlink" href="https://web-stories.local/?p=293"><link rel="alternate" type="application/json+oembed" href="https://web-stories.local/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb-stories.local%2Fstories%2Fauto-draft%2F"><link rel="alternate" type="text/xml+oembed" href="https://web-stories.local/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fweb-stories.local%2Fstories%2Fauto-draft%2F&amp;format=xml"><style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><!--
AMP optimization could not be completed due to the following:
 - CannotRemoveBoilerplate: Cannot remove boilerplate because of an unsupported layout: amp-story
--></head><body id="body"></body></html>

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

QA Instructions

P1 Bug

Source

swissspidy

All 16 comments

@westonruter @schlessera Perhaps you could chime in here? See #968 for how it currently works.

swissspidy on 2 Apr 2020

@swissspidy is this totally breaking things? Is this a candidate for Alpha? @pbakaus

jauyong on 2 Apr 2020

If someone is using AMP plugin 1.5 in Standard mode it is totally breaking things, yes.

I have a workaround ready in #968 that we could use for alpha. But for beta it should be investigated more in-depth.

swissspidy on 2 Apr 2020

yep we definitely cannot ship even an alpha without this addressed. Thanks for catching it Pascal.

pbakaus on 2 Apr 2020

Quick fix could be for the Stories plugin to do something like:

add_action( 'wp', function() {
    if ( is_singular( 'web-story' ) ) {
        add_filter( 'amp_enable_optimizer', '__return_false', PHP_INT_MAX );
    }
} );

This should fix the problem without waiting for an AMP plugin update.

westonruter on 2 Apr 2020

Alternatively, which may be better, you could force the AMP plugin to not do any processing for the Stories post type. Like so:

add_filter( 'amp_skip_post', function( $skipped, $post ) {
    if ( 'web-story' === get_post_type( $post ) ) {
        $skipped = true;
    }
    return $skipped;
}, PHP_INT_MAX, 2 );

This would prevent the AMP plugin from doing any processing for the Stories posts at all.

westonruter on 2 Apr 2020

Thanks @westonruter, I am gonna give it a try. Any recommendation for how we could still benefit from SSR in the future?

swissspidy on 2 Apr 2020

This seems like a bug with the PHP port of the AMP Optimizer. We'll investigate.

westonruter on 2 Apr 2020

👍1

It appears that stories aren't supported for SSR in AMP generally, since amp-story is a render-delaying extension. See:

cc @sebastianbenz

westonruter on 2 Apr 2020

Yes, indeed, Stories can't make use of SSR, meaning applying all layout tweaks on the server in order to remove the AMP boilerplate CSS (which hides the entire page content until the runtime was loaded and processed things).

However, they should be able to make use of the rest of the optimizer, like inlining the runtime CSS or minification...

I suspect that this current problem is not the optimizer at work, but rather the sanitizer, stripping the entire <amp-story> element for some reason. I will investigate.

schlessera on 3 Apr 2020

👍1

+1 for making sure to support Optimizer for stories for the reasons @schlessera mentioned. Also, there are more features in the pipeline where stories will massively benefit as well (e.g. module / no-module support).

sebastianbenz on 3 Apr 2020

One additional note: the only feature of AMP Optimizer currently not supported by stories is splitting keyframes into a separate style block (see pr).

sebastianbenz on 3 Apr 2020

Removing it out of the critical path for the alpha for now, as there seems to be a workaround.

pbakaus on 11 Apr 2020

Just came to mind that instead of using amp_skip_post to disable the AMP plugin's processing and optimization for Stories, you could instead just disable the bits of the Optimizer that aren't currently compatible (which I believe is just SSR). I see that I suggested that above https://github.com/google/web-stories-wp/issues/967#issuecomment-607987639 as well. But this may be better approach:

add_filter( 'amp_enable_ssr', function( $enabled ) {
    if ( is_singular( 'web-story' ) ) {
        $enabled = false;
    }
    return $enabled;
}, PHP_INT_MAX );

westonruter on 16 Apr 2020

Actually, it seems to make sense to me to use amp_skip_post in that it has the additional effect of suppressing any separate paired AMP URLs in Transitional mode or Reader mode. You do not want to have two versions of a Web Story (an AMP version as emitted by the Web Stories plugin, and _another_ AMP version that has additional processing by the AMP plugin).

That being said, you _do_ want to make use the AMP Optimizer. So maybe a hybrid approach is best:

Continue to disable the AMP plugin from creating an AMP version via the amp_skip_post filter.
Incorporate the use of the PHP Optimizer package from the AMP plugin if it is active (and eventually be including a copy of the Composer dependency in the Web Stories plugin) to apply the optimizations.

westonruter on 16 Apr 2020

👍1

Created #1276 to track AMP Optimizer usage

swissspidy on 20 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings