ampproject/amp-wp

[Gutenberg] Extend existing core blocks for AMP specific functionality

postphotos opened this issue · 10 comments

postphotos commented

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.

kienstra commented

Update On Related Work

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

  1. 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.

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

That would be good for this issue.

postphotos commented

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.

  • 👍1
miina commented

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.

  • 👍2
westonruter commented

Awesome. I'm looking forward to seeing that!

miina commented

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

westonruter commented

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 commented

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 commented

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 commented

verified in QA