[Gutenberg] Extend existing core blocks for AMP specific functionality

[postphotos]

As a WordPress site running Gutenberg, my core/native blocks should have extended AMP-HTML markup features.

• AC1: Extend core blocks which have validation errors so that the appropriate AMP markup is output to faithfully render the block when the page is served as AMP. This would be done via some combination of the render_callback that integrates with a new block sanitizer/preprocessor.

• AC2: Further extend core blocks to leverage AMP functionality, such as layout.

[westonruter]

See #902 (comment)

[kienstra]

Update On Related Work

Hi @postphotos,
You probably saw @westonruter's comment above, linking to #902:

3. Extend core blocks which have validation errors so that the appropriate AMP markup is output to faithfully render the block when the page is served as AMP.

In #1010, @miina is now working on a block that doesn't support AMP: 'categories' with a dropdown.

4. Further extend core blocks to leverage AMP functionality, such as layout.

That would be good for this issue.

[postphotos]

Thanks for calling it out, @kienstra - I believe the addition of the story and AC at the top of this issue pulls the items from #902 clearly.

[miina]

Just FI that started looking into this and will add a possible "prototype" of the approach for discussing (based on adding AMP Layout setting) in the beginning of the new week.

[westonruter]

Awesome. I'm looking forward to seeing that!

[miina]

Created a PR with initial take on the approach: #1026. Would be great to receive some feedback before continuing.

[westonruter]

We've talked about this before, but as part of this we'll need to make sure that any AMP components and attributes that get added to post_content will need to get whitelisted for Kses.

[westonruter]

Regarding amp-carousel see #1065 for how it should be integrated into the existing Gallery block.

In other words, there needn't be a new amp-carousel block in #1039.

[kienstra]

Request For Testing

Hi @csossi,
Could you please test this?

1. Go to https://native-ampconfdemo.pantheonsite.io/
2. Create a new post
3. Add an image block
4. In the "Block" panel, choose a different value for "AMP Layout"
5. Select "AMP lightbox effect"
6. Click "Save Draft"
7. Expected: those settings still display
8. Click "Preview"
9. Click the image
10. Expected: It expands to fill the screen, in a "Lightbox Effect"
11. Repeat steps 3-10, but with the "Gallery" block

[csossi]

verified in QA