web-stories-wp: Incompatibility with AMP 1.5.0

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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 16 (3 by maintainers)

Most upvoted comments

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:

  1. Continue to disable the AMP plugin from creating an AMP version via the amp_skip_post filter.
  2. 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.
+1
westonruter on Apr 16, 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.

+1
schlessera on Apr 3, 2020

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

+1
westonruter on Apr 2, 2020
Read more comments on GitHub
← web-stories-wp: Embed Block Responsiveness
web-stories-wp: Story saved pointing to "blob" URL, causing video to fail loading in story →