amp-wp
amp-wp copied to clipboard
Published
20 hours ago •
ampproject
ampproject
Include AMP content in REST API responses
The purpose of this PR is to add a new content.amp along with content.rendered and content.raw in the response of the REST API for post types.
To do:
- [x] Create the
AMP_REST_APIclass. - [x] Load the
AMP_REST_APIclass. - [x] Turn
content.renderedHTML into valid AMP for thecontent.ampfield. - [x] Extract tree-shaken CSS and populate another field.
- [x] Extract an array of used AMP scripts and populate another field.
- [x] Extend
contentschema to includeampproperty. - [x] Add link for where the rendered AMP content can be fetched as an entire valid AMP document (for Shadow AMP document purposes).
- [x] Disable AMP content in REST API if
websiteexperience is not enabled? - [x] Prevent serving AMP in post entity response if AMP is disabled for the post.
- [x] Determine best way of omitting
content.ampby default unless requested. - [ ] Determine which styles should be included in the
content.amp.stylesand in the standalone content template. - [ ] Add tests.
Feel free to edit this description if you think more tasks need to be added.
Fixes #1014
Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).
:memo: Please visit https://cla.developers.google.com/ to sign.
Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.
What to do if you already signed the CLA
Individual signers
- It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.
Corporate signers
- Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
- The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
- The email used to register you as an authorized contributor must also be attached to your GitHub account.
ℹ️ Googlers: Go here for more info.
The first things I need help with:
- Does the
AMP_REST_APIclass have the correct name? - Is the
AMP_REST_APIin the correct place? - How can I load the class?
Hi @luisherranz, thanks a lot for starting the work on this!
I think so far the class name is fine. We can always revisit at the end if needed.
As for loading the class, you can add an AMP_REST_API::init(); call to the amp_init() function in the main plugin file, amp.php:
https://github.com/ampproject/amp-wp/blob/cc5994fbb7623585f913b2ba59d252af1bb02b6a/amp.php#L328-L343
Note that your code does not currently meet the coding standards. You should be able to fix most of the issues by running these commands:
composer install
npm install
npm run lint:php:fix
This can be automated by configuring PHPCS support in your editor of choice.
I you know you've just started with this, but still I'll try to add some inline comments with ideas regarding implementation.
@luisherranz Please see my comments/questions here: https://github.com/ampproject/amp-wp/pull/2827#discussion_r304665021
For some reason Travis is saying this:
FOUND 1 ERROR AFFECTING 1 LINE
--------------------------------------------------------------------------------
1 | ERROR | There must be no blank lines before the file comment
| | (Squiz.Commenting.FileComment.SpacingAfterOpen)
and my npm run lint:php:fix is saying
No fixable errors were found
😕
@luisherranz Please see my comments/questions here: #2827 (comment)
Oh yes, I was writing my answer to that discussion, sorry it took me a while ☺️
For some reason Travis is saying this: No fixable errors were found
Not every error can automatically be fixed by phpcbf.
To fix the error, remove the blank line manually.
To fix the error, remove the blank line manually.
I see. Thanks @swissspidy :)
OK, give the current state of the PR a try.
Given a post that has the post_content of:
<!-- wp:paragraph -->
<p>Here is a YouTube video:</p>
<!-- /wp:paragraph -->
<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=8EtmqU844hU","type":"rich","providerNameSlug":"embed-handler","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=8EtmqU844hU
</div></figure>
<!-- /wp:core-embed/youtube -->
<!-- wp:image {"align":"right","id":1295,"width":176,"height":235,"sizeSlug":"medium"} -->
<div class="wp-block-image"><figure class="alignright size-medium is-resized"><img src="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg" alt="Fountain" class="wp-image-1295" width="176" height="235"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>The previous image was floated to the right. Because of this, the text appears on the left of the image that is floated to the right.</p>
<!-- /wp:paragraph -->
<!-- wp:html -->
<style>
.wp-image-1295 { box-shadow: 2px 2px 2px gray; }
/* This comment and the next rule will be removed. */
.does-not-exist { outline: solid 1px red; }
</style>
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>And here is a tweet:</p>
<!-- /wp:paragraph -->
<!-- wp:core-embed/twitter {"url":"https://twitter.com/westonruter/status/1151935738033913856","type":"rich","providerNameSlug":"embed-handler","className":""} -->
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-embed-handler"><div class="wp-block-embed__wrapper">
https://twitter.com/westonruter/status/1151935738033913856
</div></figure>
<!-- /wp:core-embed/twitter -->
The content of /wp-json/wp/v2/posts/2679?_amp&_fields=content on my test environment includes:
{
"content": {
"rendered": "\n<p>Here is a YouTube video:</p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Finding Portland\" width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/8EtmqU844hU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n</div></figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-medium is-resized\"><img src=\"https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg\" alt=\"Fountain\" class=\"wp-image-1295\" width=\"176\" height=\"235\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg 225w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-350x467.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-768x1024.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-1568x2091.jpg 1568w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-696x928.jpg 696w\" sizes=\"(max-width: 176px) 100vw, 176px\" /></figure></div>\n\n\n\n<p>The previous image was floated to the right. Because of this, the text appears on the left of the image that is floated to the right.</p>\n\n\n\n<style>\n.wp-image-1295 { box-shadow: 2px 2px 2px gray; }\n/* This comment and the next rule will be removed. */\n.does-not-exist { outline: solid 1px red; }\n</style>\n\n\n\n<p>And here is a tweet:</p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Now available for testing: v1.2.1-beta1 of the official <a href=\"https://twitter.com/AMPhtml?ref_src=twsrc%5Etfw\">@AMPhtml</a> plugin for WordPress. See all the improvements made to the AMP Stories editor and to using AMP on the rest of your WP site: <a href=\"https://t.co/hE6VlwFH0f\">https://t.co/hE6VlwFH0f</a></p>— Weston Ruter (@westonruter) <a href=\"https://twitter.com/westonruter/status/1151935738033913856?ref_src=twsrc%5Etfw\">July 18, 2019</a></blockquote><script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n</div></figure>\n",
"amp": {
"markup": "\n<p>Here is a YouTube video:</p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<amp-youtube data-videoid=\"8EtmqU844hU\" layout=\"responsive\" width=\"640\" height=\"360\"></amp-youtube></div></figure><div class=\"wp-block-image\"><figure class=\"alignright size-medium is-resized\"><amp-img src=\"https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg\" alt=\"Fountain\" class=\"wp-image-1295 amp-wp-enforced-sizes\" width=\"176\" height=\"235\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg 225w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-350x467.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-768x1024.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-1568x2091.jpg 1568w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-696x928.jpg 696w\" layout=\"intrinsic\"><noscript><img src=\"https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg\" alt=\"Fountain\" class=\"wp-image-1295\" width=\"176\" height=\"235\" sizes=\"(max-width: 176px) 100vw, 176px\"></noscript></amp-img></figure></div>\n\n\n\n<p>The previous image was floated to the right. Because of this, the text appears on the left of the image that is floated to the right.</p>\n\n\n\n<p>And here is a tweet:</p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<amp-twitter data-tweetid=\"1151935738033913856\" layout=\"responsive\" width=\"600\" height=\"480\"></amp-twitter></div></figure>",
"scripts": {
"amp-twitter": {
"async": true,
"custom-element": "amp-twitter",
"src": "https://cdn.ampproject.org/v0/amp-twitter-0.1.js"
},
"amp-youtube": {
"async": true,
"custom-element": "amp-youtube",
"src": "https://cdn.ampproject.org/v0/amp-youtube-0.1.js"
}
},
"styles": [
".wp-image-1295{box-shadow:2px 2px 2px gray}"
]
},
"protected": false
}
}
The formatted rendered HTML is:
<p>Here is a YouTube video:</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<iframe title="Finding Portland" width="640" height="360" src="https://www.youtube.com/embed/8EtmqU844hU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</figure>
<div class="wp-block-image">
<figure class="alignright size-medium is-resized">
<img src="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg" alt="Fountain" class="wp-image-1295" width="176" height="235" srcset="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg 225w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-350x467.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-768x1024.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-1568x2091.jpg 1568w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-696x928.jpg 696w" sizes="(max-width: 176px) 100vw, 176px"/>
</figure>
</div>
<p>The previous image was floated to the right. Because of this, the text appears on the left of the image that is
floated to the right.</p>
<style>
.wp-image-1295 {
box-shadow: 2px 2px 2px gray;
}
/* This comment and the next rule will be removed. */
.does-not-exist {
outline: solid 1px red;
}
</style>
<p>And here is a tweet:</p>
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-embed-handler">
<div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">Now available for
testing: v1.2.1-beta1 of the official <a href="https://twitter.com/AMPhtml?ref_src=twsrc%5Etfw">@AMPhtml</a>
plugin for WordPress. See all the improvements made to the AMP Stories editor and to using AMP on the rest
of your WP site: <a href="https://t.co/hE6VlwFH0f">https://t.co/hE6VlwFH0f</a></p>— Weston Ruter
(@westonruter) <a href="https://twitter.com/westonruter/status/1151935738033913856?ref_src=twsrc%5Etfw">July
18, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</figure>
And the AMP markup is:
<p>Here is a YouTube video:</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<amp-youtube data-videoid="8EtmqU844hU" layout="responsive" width="640" height="360"></amp-youtube>
</div>
</figure>
<div class="wp-block-image">
<figure class="alignright size-medium is-resized">
<amp-img src="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg" alt="Fountain" class="wp-image-1295 amp-wp-enforced-sizes" width="176" height="235" srcset="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg 225w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-350x467.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-768x1024.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-1568x2091.jpg 1568w, https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-696x928.jpg 696w" layout="intrinsic">
<noscript>
<img src="https://wordpressdev.lndo.site/content/uploads/2019/05/IMG_20190429_130647-e1556817628837-225x300.jpg" alt="Fountain" class="wp-image-1295" width="176" height="235" sizes="(max-width: 176px) 100vw, 176px">
</noscript>
</amp-img>
</figure>
</div>
<p>The previous image was floated to the right. Because of this, the text appears on the left of the image that is
floated to the right.</p>
<p>And here is a tweet:</p>
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-embed-handler">
<div class="wp-block-embed__wrapper">
<amp-twitter data-tweetid="1151935738033913856" layout="responsive" width="600" height="480"></amp-twitter>
</div>
</figure>
[ ] Prevent serving AMP in post entity response if AMP is disabled for the post.
@westonruter, @swissspidy: what API should I use to determine if AMP is disabled or not in a post?
@luisherranz There's a handy post_supports_amp() function that tells you this.
Build failure on WordPress trunk is unrelated, see #2891.
Ok. I've subscribed to the issue to rebase or merge the fix once is done.
@swissspidy now that https://github.com/ampproject/amp-wp/issues/2891 is fixed, how do you usually handle this type of scenarios? Rebase, merge, cherry-pick...?
@luisherranz Personally I prefer merging develop into my feature branch. Super easy and doesn‘t mess with history.
Yeah, merge especially when multiple people are contributing to a branch.
Some questions, based on an incomplete read-through of the ticket: forgive any obvious answers I may have missed.
- Why does this need to be in the REST API response?
- Does this need to be in every
contextof REST API response? Adding another (potentially large) string to every post record can have an appreciable impact on response transfer times; could we instead introduce a newampcontext, for example, and only include this in that context? And/or, filter the output HTML for therenderedmarkup in such a context?
We've been discussing in the issue precisely under what circumstances we should add the amp field: https://github.com/ampproject/amp-wp/issues/1014.
Why does this need to be in the REST API response?
Sorry, I forgot to answer this.
The main use case for the content.amp field is Headless WordPress with a React/Vue frontend that want to generate the AMP pages with the same React/Vue code to avoid maintaining two separate codebases.
We've also talked about other use case: Headless WordPress using the Shadow API to inject the AMP article in their frontend PWA. For that, we need the URL that contains the full AMP document.
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.
We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.
Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).
ℹ️ Googlers: Go here for more info.
OK, here's where we are… given this content:
Doing a request to https://wordpressdev.lndo.site/wp-json/wp/v2/posts/2824?_amp results in:
{
"_links": {
"about": [
{
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/users/1"
}
],
"collection": [
{
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/posts"
}
],
"curies": [
{
"href": "https://api.w.org/{rel}",
"name": "wp",
"templated": true
}
],
"predecessor-version": [
{
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/posts/2824/revisions/2831",
"id": 2831
}
],
"replies": [
{
"embeddable": true,
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/comments?post=2824"
}
],
"self": [
{
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/posts/2824"
}
],
"version-history": [
{
"count": 6,
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/posts/2824/revisions"
}
],
"wp:attachment": [
{
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/media?parent=2824"
}
],
"wp:term": [
{
"embeddable": true,
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/categories?post=2824",
"taxonomy": "category"
},
{
"embeddable": true,
"href": "https://wordpressdev.lndo.site/wp-json/wp/v2/tags?post=2824",
"taxonomy": "post_tag"
}
]
},
"amp_links": {
"complete_template": {
"cache": "https://wordpressdev-lndo-site.cdn.ampproject.org/c/s/wordpressdev.lndo.site/2019/08/03/bison-2/?amp",
"origin": "https://wordpressdev.lndo.site/2019/08/03/bison-2/?amp"
},
"standalone_content": {
"cache": "https://wordpressdev-lndo-site.cdn.ampproject.org/c/s/wordpressdev.lndo.site/2019/08/03/bison-2/?amp_standalone_content",
"origin": "https://wordpressdev.lndo.site/2019/08/03/bison-2/?amp_standalone_content"
}
},
"amp_validity": null,
"author": 1,
"categories": [
1
],
"comment_status": "open",
"content": {
"amp": {
"markup": "\n<p><strong>Bison</strong>\u00a0are large,\u00a0<a href=\"https://en.wikipedia.org/wiki/Even-toed_ungulate\">even-toed ungulates</a>\u00a0in the\u00a0<a href=\"https://en.wikipedia.org/wiki/Genus\">genus</a>\u00a0<em>Bison</em>\u00a0within the subfamily\u00a0<a href=\"https://en.wikipedia.org/wiki/Bovinae\">Bovinae</a>.</p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><amp-img src=\"https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg\" alt=\"\" class=\"wp-image-53 amp-wp-enforced-sizes\" width=\"476\" height=\"310\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg 1024w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-350x228.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-300x196.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-768x501.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1.jpg 1200w\" layout=\"intrinsic\"><noscript><img src=\"https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg\" alt=\"\" class=\"wp-image-53\" width=\"476\" height=\"310\" sizes=\"(max-width: 476px) 100vw, 476px\"></noscript></amp-img><figcaption>This is a Bison</figcaption></figure></div>\n\n\n\n<p>Two\u00a0<a href=\"https://en.wikipedia.org/wiki/Extant_taxon\">extant</a>\u00a0and six\u00a0<a href=\"https://en.wikipedia.org/wiki/Extinction\">extinct</a>\u00a0species are recognised. Of the six extinct species, five became extinct in the\u00a0<a href=\"https://en.wikipedia.org/wiki/Quaternary_extinction_event\">Quaternary extinction event</a>.\u00a0<em>Bison palaeosinensis</em>\u00a0evolved in the\u00a0<a href=\"https://en.wikipedia.org/wiki/Early_Pleistocene\">Early Pleistocene</a>\u00a0in\u00a0<a href=\"https://en.wikipedia.org/wiki/South_Asia\">South Asia</a>, and was the evolutionary ancestor of\u00a0<em>B. priscus</em>\u00a0(<a href=\"https://en.wikipedia.org/wiki/Steppe_bison\">steppe bison</a>), which was the ancestor of all other\u00a0<em>Bison</em>\u00a0species. From\u00a0<a href=\"https://en.wikipedia.org/wiki/Gelasian\">2 million years ago</a>\u00a0to\u00a0<a href=\"https://en.wikipedia.org/wiki/6th_millennium_BC\">6,000 BC</a>, steppe bison ranged across the\u00a0<a href=\"https://en.wikipedia.org/wiki/Mammoth_steppe\">mammoth steppe</a>, inhabiting Europe and northern Asia with\u00a0<em>B. schoetensacki</em>\u00a0(woodland bison), and North America with\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_antiquus\">B. antiquus</a></em>,\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_latifrons\">B. latifrons</a></em>, and\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_occidentalis\">B. occidentalis</a>.</em>\u00a0The last species to go extinct,\u00a0<em>B. occidentalis</em>, was succeeded at 3,000 BC by\u00a0<em>B. bison</em>.</p>\n\n\n\n<p>Source: <a href=\"https://en.wikipedia.org/wiki/Bison\">Wikipedia</a></p>\n\n\n\n<p>And here is an block image: <amp-img class=\"wp-image-1156 amp-wp-enforced-sizes amp-wp-ec5c707\" src=\"https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg\" alt=\"\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg 1200w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-350x271.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-300x232.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-768x594.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-1024x792.jpg 1024w\" width=\"1200\" height=\"928\" layout=\"intrinsic\"><noscript><img class=\"wp-image-1156 amp-wp-ec5c707\" src=\"https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg\" alt=\"\" sizes=\"(max-width: 1200px) 100vw, 1200px\" width=\"1200\" height=\"928\"></noscript></amp-img></p>\n",
"scripts": [],
"styles": [
":root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-ec5c707{width:30px}"
]
},
"protected": false,
"rendered": "\n<p><strong>Bison</strong> are large, <a href=\"https://en.wikipedia.org/wiki/Even-toed_ungulate\">even-toed ungulates</a> in the <a href=\"https://en.wikipedia.org/wiki/Genus\">genus</a> <em>Bison</em> within the subfamily <a href=\"https://en.wikipedia.org/wiki/Bovinae\">Bovinae</a>.</p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img src=\"https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg\" alt=\"\" class=\"wp-image-53\" width=\"476\" height=\"310\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg 1024w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-350x228.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-300x196.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-768x501.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1.jpg 1200w\" sizes=\"(max-width: 476px) 100vw, 476px\" /><figcaption>This is a Bison</figcaption></figure></div>\n\n\n\n<p>Two\u00a0<a href=\"https://en.wikipedia.org/wiki/Extant_taxon\">extant</a>\u00a0and six\u00a0<a href=\"https://en.wikipedia.org/wiki/Extinction\">extinct</a>\u00a0species are recognised. Of the six extinct species, five became extinct in the\u00a0<a href=\"https://en.wikipedia.org/wiki/Quaternary_extinction_event\">Quaternary extinction event</a>.\u00a0<em>Bison palaeosinensis</em>\u00a0evolved in the\u00a0<a href=\"https://en.wikipedia.org/wiki/Early_Pleistocene\">Early Pleistocene</a>\u00a0in\u00a0<a href=\"https://en.wikipedia.org/wiki/South_Asia\">South Asia</a>, and was the evolutionary ancestor of\u00a0<em>B. priscus</em>\u00a0(<a href=\"https://en.wikipedia.org/wiki/Steppe_bison\">steppe bison</a>), which was the ancestor of all other\u00a0<em>Bison</em>\u00a0species. From\u00a0<a href=\"https://en.wikipedia.org/wiki/Gelasian\">2 million years ago</a>\u00a0to\u00a0<a href=\"https://en.wikipedia.org/wiki/6th_millennium_BC\">6,000 BC</a>, steppe bison ranged across the\u00a0<a href=\"https://en.wikipedia.org/wiki/Mammoth_steppe\">mammoth steppe</a>, inhabiting Europe and northern Asia with\u00a0<em>B. schoetensacki</em>\u00a0(woodland bison), and North America with\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_antiquus\">B. antiquus</a></em>,\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_latifrons\">B. latifrons</a></em>, and\u00a0<em><a href=\"https://en.wikipedia.org/wiki/Bison_occidentalis\">B. occidentalis</a>.</em>\u00a0The last species to go extinct,\u00a0<em>B. occidentalis</em>, was succeeded at 3,000 BC by\u00a0<em>B. bison</em>.</p>\n\n\n\n<p>Source: <a href=\"https://en.wikipedia.org/wiki/Bison\">Wikipedia</a></p>\n\n\n\n<p>And here is an block image: <img class=\"wp-image-1156\" style=\"width: 30px;\" src=\"https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg\" alt=\"\" srcset=\"https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg 1200w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-350x271.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-300x232.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-768x594.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-1024x792.jpg 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" /></p>\n"
},
"date": "2019-08-03T03:30:24",
"date_gmt": "2019-08-03T03:30:24",
"excerpt": {
"protected": false,
"rendered": "<p>Bison are large, even-toed ungulates in the genus Bison within the subfamily Bovinae. Two\u00a0extant\u00a0and six\u00a0extinct\u00a0species are recognised. Of the six extinct species, five became extinct in the\u00a0Quaternary extinction event.\u00a0Bison palaeosinensis\u00a0evolved in the\u00a0Early Pleistocene\u00a0in\u00a0South Asia, and was the evolutionary ancestor of\u00a0B. priscus\u00a0(steppe bison), which was the ancestor of all other\u00a0Bison\u00a0species. From\u00a02 million years ago\u00a0to\u00a06,000 BC, steppe bison ranged across the\u00a0mammoth steppe, inhabiting Europe […]</p>\n"
},
"featured_media": 0,
"format": "standard",
"guid": {
"rendered": "https://wordpressdev.lndo.site/?p=2824"
},
"id": 2824,
"link": "https://wordpressdev.lndo.site/2019/08/03/bison-2/",
"meta": {
"amp_is_poster": false,
"amp_status": ""
},
"modified": "2019-08-03T04:01:29",
"modified_gmt": "2019-08-03T04:01:29",
"ping_status": "open",
"slug": "bison-2",
"status": "publish",
"sticky": false,
"tags": [],
"template": "",
"title": {
"rendered": "Bison"
},
"type": "post"
}
Notice the amp_links field. Accessing this URL https://wordpressdev.lndo.site/2019/08/03/bison-2/?amp_standalone_content shows:
And the HTML is:
<!DOCTYPE html>
<html amp><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><meta name="amp-experiments-opt-in" content="amp-img-auto-sizes"><link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"><script type="text/javascript" src="https://cdn.ampproject.org/v0.js" async></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><!--
The style[amp-custom] element is populated with:
75 B (24%): link#amp-default-css[rel=stylesheet][href=https://wordpressdev.lndo.site/content/plugins/amp/assets/css/amp-default.css?ver=1.2.1-beta1][type=text/css][media=all]
452 B (4%): link#wp-block-library-css[rel=stylesheet][href=https://wordpressdev.lndo.site/content/plugins/gutenberg/build/block-library/style.css?ver=1562774676][type=text/css][media=all]
74 B (6%): link#wp-block-library-theme-css[rel=stylesheet][href=https://wordpressdev.lndo.site/content/plugins/gutenberg/build/block-library/theme.css?ver=1562774676][type=text/css][media=all]
73 B: img.wp-image-1156 amp-wp-ec5c707[src=https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg][alt=][sizes=(max-width: 1200px) 100vw, 1200px][width=1200][height=928]
Total included size: 674 bytes (6% of 11,125 total after tree shaking)
--><style amp-custom="">amp-img.amp-wp-enforced-sizes[layout="intrinsic"] > img{object-fit:contain}.wp-block-image{max-width:100%;margin-bottom:1em;margin-left:0;margin-right:0}.wp-block-image amp-img{max-width:100%}.wp-block-image .alignright,.wp-block-image.is-resized{display:table;margin-left:0;margin-right:0}.wp-block-image .alignright>figcaption,.wp-block-image.is-resized>figcaption{display:table-caption;caption-side:bottom}.wp-block-image .alignright{float:right;margin-left:1em}figcaption{margin-top:.5em}amp-img{max-width:100%;height:auto}.wp-block-image figcaption{color:#555d66;font-size:13px;text-align:center}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-ec5c707{width:30px}
/*# sourceURL=amp-custom.css */</style><script type="application/ld+json">{"@context":"http:\/\/schema.org","publisher":{"@type":"Organization","name":"WordPress Develop","logo":{"@type":"ImageObject","url":"https:\/\/wordpressdev.lndo.site\/content\/uploads\/2019\/04\/cropped-cropped-American_bison_k5680-face2-32x32.jpg","width":32,"height":32}},"@type":"BlogPosting","mainEntityOfPage":"https:\/\/wordpressdev.lndo.site\/2019\/08\/03\/bison-2\/","headline":"Bison","datePublished":"2019-08-03T03:30:24+00:00","dateModified":"2019-08-03T04:01:29+00:00","author":{"@type":"Person","name":"ˈwɛsˌtn̩ \\o\/ ˈɹuːˌɾɚ (Рутер)"}}</script><link rel="canonical" href="https://wordpressdev.lndo.site/2019/08/03/bison-2/"></head><body>
<p><strong>Bison</strong> are large, <a href="https://en.wikipedia.org/wiki/Even-toed_ungulate">even-toed ungulates</a> in the <a href="https://en.wikipedia.org/wiki/Genus">genus</a> <em>Bison</em> within the subfamily <a href="https://en.wikipedia.org/wiki/Bovinae">Bovinae</a>.</p>
<div class="wp-block-image"><figure class="alignright size-large is-resized"><amp-img src="https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg" alt="" class="wp-image-53 amp-wp-enforced-sizes" width="476" height="310" srcset="https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg 1024w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-350x228.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-300x196.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-768x501.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1.jpg 1200w" layout="intrinsic"><noscript><img src="https://wordpressdev.lndo.site/content/uploads/2019/02/1200px-American_bison_k5680-1-1024x668.jpg" alt="" class="wp-image-53" width="476" height="310" sizes="(max-width: 476px) 100vw, 476px"></noscript></amp-img><figcaption>This is a Bison</figcaption></figure></div>
<p>Two <a href="https://en.wikipedia.org/wiki/Extant_taxon">extant</a> and six <a href="https://en.wikipedia.org/wiki/Extinction">extinct</a> species are recognised. Of the six extinct species, five became extinct in the <a href="https://en.wikipedia.org/wiki/Quaternary_extinction_event">Quaternary extinction event</a>. <em>Bison palaeosinensis</em> evolved in the <a href="https://en.wikipedia.org/wiki/Early_Pleistocene">Early Pleistocene</a> in <a href="https://en.wikipedia.org/wiki/South_Asia">South Asia</a>, and was the evolutionary ancestor of <em>B. priscus</em> (<a href="https://en.wikipedia.org/wiki/Steppe_bison">steppe bison</a>), which was the ancestor of all other <em>Bison</em> species. From <a href="https://en.wikipedia.org/wiki/Gelasian">2 million years ago</a> to <a href="https://en.wikipedia.org/wiki/6th_millennium_BC">6,000 BC</a>, steppe bison ranged across the <a href="https://en.wikipedia.org/wiki/Mammoth_steppe">mammoth steppe</a>, inhabiting Europe and northern Asia with <em>B. schoetensacki</em> (woodland bison), and North America with <em><a href="https://en.wikipedia.org/wiki/Bison_antiquus">B. antiquus</a></em>, <em><a href="https://en.wikipedia.org/wiki/Bison_latifrons">B. latifrons</a></em>, and <em><a href="https://en.wikipedia.org/wiki/Bison_occidentalis">B. occidentalis</a>.</em> The last species to go extinct, <em>B. occidentalis</em>, was succeeded at 3,000 BC by <em>B. bison</em>.</p>
<p>Source: <a href="https://en.wikipedia.org/wiki/Bison">Wikipedia</a></p>
<p>And here is an block image: <amp-img class="wp-image-1156 amp-wp-enforced-sizes amp-wp-ec5c707" src="https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg" alt="" srcset="https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg 1200w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-350x271.jpg 350w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-300x232.jpg 300w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-768x594.jpg 768w, https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2-1024x792.jpg 1024w" width="1200" height="928" layout="intrinsic"><noscript><img class="wp-image-1156 amp-wp-ec5c707" src="https://wordpressdev.lndo.site/content/uploads/2019/04/cropped-American_bison_k5680-face2.jpg" alt="" sizes="(max-width: 1200px) 100vw, 1200px" width="1200" height="928"></noscript></amp-img></p>
</body></html>
The amp_links include URLs for this standalone content on the origin server as well as the URL for the content on the ampproject.org AMP Cache.
There is currently a discrepancy between the styles that are being included in the content.amp.styles field and the styles that are being included in the standalone content template.
In the content.amp.styles, only the styles that are contained inside the content itself are included (e.g. style attributes for inline image width). At first this seems to make sense, but actually this limits the usefulness of the content because it lacks the styles required to properly present blocks. In other words, it is rendered as:
Notice the alignment failure of the image. This is because the core block library CSS is not being included. Nevertheless, in the standalone content template (requested with the ?amp_standalone_content query param) you can see that the block library content and the plugins baseline AMP styles are enqueued and printed, and thus being included, so the image gets the proper alignment:
So which is right? I think the latter is, and the core block library and default AMP plugin styles should be included in content.amp.styles alongside any styles that are coming from the content.
Thoughts?
(I force-pushed to fix a botched merged I had done a minute before. I believe the pushed commits can be pulled with fast forward merge on top of what you last pushed.)
@luisherranz @ataylorme Thoughts on the current state as well as https://github.com/ampproject/amp-wp/pull/2827#issuecomment-517893087?
So which is right? I think the latter is, and the core block library and default AMP plugin styles should be included in content.amp.styles alongside any styles that are coming from the content.
I agree that the AMP styles accessible through the API should be for the entire page and not just the content.
