How can I preview AMP pages in Gutenberg?

[TwisterMc]

In the classic editor, next to the preview button was an AMP icon which allowed a user to preview the AMP page. In Gutenberg this button doesn't show and there doesn't seem to be a way to preview AMP pages in Gutenberg.

Is there a button someplace that I just don't see? Or is it not available in Gutenberg?

I do know I can just add &amp=1 to the preview URL, but that's not client friendly. They like buttons. :)

[swissspidy]

I don't think we currently add an AMP Preview button in Gutenberg. But I suppose we should :-)

[westonruter]

Yeah, the classic editor has a preview button for AMP in Transitional and Reader modes (IIRC). We didn't add it to Gutenberg because... we probably didn't know how.

[TwisterMc]

Love the honesty. What about adding a text link below the Enable AMP toggle that says Preview AMP Post? It doesn't have to be next to the preview button.

[swissspidy]

For comparison, here's the preview button in the classic editor:

And here is the same section in the block editor:

Since the preview button in the block editor could only be modified using direct DOM manipulation or perhaps by overriding wp.editor.PostPreviewButton. Both options would be prone to breakage when new versions.

So using the same PluginPostStatusInfo slot as we already do for the AMP toggle makes most sense to me.

I think that is a reasonably small enhancement to include in the next release. It might mean duplicating larges parts of the PostPreviewButton component though.

[TwisterMc]

This is what I was thinking.

I don't think this would require us to worry about the PostPreviewButton component.

[swissspidy]

Right, that's my suggested location as well. Needs lots of the logic from PostPreviewButton either way though in order to get the correct preview link, saveable status, to open the preview window etc. Otherwise the preview might not be accurate.

This is currently in the backlog, so we will get to it at some point.

[westonruter]

If possible to integrate with the existing Preview button, that'd be great, otherwise having a separate AMP preview button makes sense.

[cathibosco]

For consideration - Options 2 & 3 are improved UX/UI due to label "preview" being duplicated in option 1 - check it out for feasibility.

[schlessera]

I think Option 2 is the nicest. The question is whether we can reliably decorate the existing Preview button here.

[cathibosco]

Agreed - yes that would be optimal.

[TwisterMc]

I concur; as long as the effort is not a lot more.

[kienstra]

Hi @schlessera,
Hope you had a great Friday.

Would you mind if I worked on this?

[schlessera]

@kienstra No, not at all. I saw you were already looking into it, so I skipped it and went to the first item in the back log already.

[kienstra]

OK, thanks! Have a great weekend!

[kienstra]

Update: please ignore these, as this has changed.

Testing Steps
For when #3323 passes review

1. Select 'Transitional' mode
2. Create a new post
3. Enter any title
4. Expected: as long as AMP is enabled, there should be a button to preview AMP:

5. Toggle off 'Enable AMP'
6. Expected: the preview button shouldn't appear anymore
7. Toggle the 'Enable AMP' button back on
8. Change the mode to 'Reader Mode'
9. Reload the post editor
10. Expected: the 'AMP Preview' button should still appear
11. Change the AMP mode to 'Standard'
12. Reload the post editor
13. Expected: the 'AMP Preview' button should not appear anymore
14. Change the mode to 'Transitional'
15. Reload the editor
16. Click the 'AMP Preview button

17: Expected: it should open a new tab for an AMP URL:

[kienstra]

I'll make a screencast for this when #3323 is approved, as there might be changes to the button or the preview <svg>.

[swissspidy]

Can this new preview button be used to enhance the existing one as in option 2 mentioned above? I thought that was the consensus.

[kienstra]

Option 2

Hi @swissspidy,
Yeah, Option 2 would be really nice.

But I couldn't find a way to do that, other than maybe manipulating the DOM.

That PostPreviewButton doesn't look to be filterable, nor does the Header that uses it.

[swissspidy]

Yes, DOM manipulation was mentioned earlier in this thread as the potentially only possible way to do this.

@kienstra For the sake of testing, could you perhaps create a PR against your add/block-editor-amp-preview branch to explore this option?

[kienstra]

Hi @swissspidy,
Sure, I'll create a PR to the add/block-editor-amp-preview branch to try DOM manipulation.

[kienstra]

Steps To Test

1. Enable 'Paired' mode
2. Create a new post
3. Add any content to it
4. Click the AMP preview button:

5. Expected: A new tab opens with 'Generating AMP preview...', and it is a preview of the edited post:

6. Click the non-AMP 'Preview' button:

7. Expected: This should still work as expected, showing a preview of the non-AMP post
8. Change the mode to 'Standard'
9. Go back to the same post
10. Expected: the AMP 'Preview' button should no longer appear, as there isn't a separate AMP URL

[kienstra]

Request For Testing

Hi @csossi,
Sorry for the lack of testing instructions earlier. Here are some instructions above, and it looks like this is now deployed to the testing environment.

[csossi]

Verified in QA