Amp-wp: Conduct a Discovery to determine support for Gutenberg blocks.

[MackenzieHartung]

Acceptance Criteria

AC1: Create a wp-cli script to output all native Gutenberg blocks on a test page to identify which will need to be supported (see this script for reference).

[kienstra]

Example wp-cli Scripts

Hi @DavidCramer,
It looks like you wrote the wp-cli script create-comments-on-test-post.php, so you probably have a good handle on this. This issue's script for Gutenberg blocks should probably be similar to create-embed-test-post.php.

[kienstra]

Permutations Of Blocks

We should probably output all of the blocks in blocks/library/. Here are some blocks that I think could use permutations:

• Categories
• With dropdown

• Without dropdown

• Columns
  2 and 3 columns

• Cover Image

• Fixed Background on

• Fixed Background off

• Embed
  2 or 3 embed URLs should be enough. #841 handles embed support, though not in Gutenberg.

• Gallery
  2 and 3 columns

• Shortcode
  2 or 3 shortcodes should be enough, as we've tested several in #841.

[westonruter]

Results should be added to this Wiki page: https://github.com/Automattic/amp-wp/wiki/Native-WordPress-Widget-and-Embed-Support

[amedina]

@westonruter should we create another wiki page to track exclusively Gutenberg blocks (both Gutenberg => AMP and AMP => Gutenberg)?

[westonruter]

Yeah, that would work as well. Maybe we should have separate wiki pages for embeds and widgets. Main thing is that there should be a wiki page to document it.

[kienstra]

Gutenberg Fixtures

The test fixtures in Gutenberg could be useful for this. This script could use the .html files in blocks/test/fixtures/, like core__categories.html.

But the core-embed__*.html files might not be as useful, as they don't have specific embed URLs.

[kienstra]

In Progress

I'm working on this now.

[kienstra]

This matrix is now updated and moved to the Project Wiki

Gutenberg Block Support

Here are the results of running the wp-cli script from PR #1018. It tests all of the widgets in gutenberg/blocks/library/, using the Native AMP (canonical) theme ampconf.

The Gutenberg stylesheet gutenberg/blocks/build/style.css apparently makes the inlined CSS go over the 50 KB limit.

So the ampconf theme's main.css file wasn't part of <style amp-custom>. I manually copied that file into the inspector stylesheet to test this. So these tests assume that the Gutenberg stylesheet above is applied.

I'll move this matrix into the project wiki when the script passes review.

Block | Support | Notes
--- | --- | ---
Audio | ✅|
(Reusable) Block | ✅|
Button | ✅|
Categories | 🔸| Styling issue: the bullets are on the left, but the categories are in the center (screenshot)
Categories With Dropdown | ❌ | Selecting an <option> in the dropdown doesn't redirect to the category page. See Weston's solution for the Categories widget.
Code | ✅|
Columns | ✅|
Cover Image | ✅|
Cover Image With Fixed Background | ✅|
Embed | ✅| YouTube, Twitter, and WordPress posts display as expected. This was tested more extensively in preparing this wiki page (#841). Per that page, most but not all of the embeds work.
Freeform | ✅|
Gallery | 🔸| Styling issues with 2 or 3 columns (screenshot)
Heading | ✅|
HTML | 🔸| The <marquee> element is stripped
Image | 🔸| Styling issue: the caption should be centered when set to 'Align center' (screenshot)
Latest Posts | 🔸| Styling issue: the posts are in the center, but bullets are on the left (screenshot)
List | ✅ |
More | ❌| Doesn't appear
Paragraph | ✅ |
Preformatted | ✅ |
Pullquote | 🔸| Styling issue: the pullquotes aren't wide enough (screenshot)
Quote | ✅ |
Separator | ❌| Doesn't appear
Shortcode | ✅ | 'Gallery' and 'Caption' appear as expected. This is tested more extensively in this wiki page.
Subhead | ✅ |
Table | ✅ |
Text Columns | ✅ |
Verse | ✅ |
Video | ✅ |

Legend

✅ Supported
🔸 Partially supported
❌ Not supported

[westonruter]

Note that the test page created with #1018 should be tested with the Gutenberg block validation from #1019.

[miina]

Question on the Categories issue of aligncenter -- the default alignment of the text for core/categories block is center -- would't this be the expected behavior in this case?

And if not, what would be the expected behavior?

[kienstra]

Categories Alignment

Hi @miina,
Good question. I think the issue with the categories widget from the screenshot is that the bullets are on the left, while the text is center-aligned.

[miina]

Hey @kienstra Thanks for the answer.
Looks like the li elements have max width and since the bullet is always before the li element and the text of the contained a is in the center, then that's the default result.

Perhaps that's how it's supposed to be without any additional styling?
Or any thoughts on what would be the expected behavior with the default aligncenter?

[miina]

More block

Looks like the More block is meant to show up only on the index pages -- it displays a link to continue reading (in case of desktop and tablet), displaying the text on index pages only until the More block and hiding the rest (in case of mobile it looks like it's just cutting the text off after More block without showing the link at all). If I'm not mistaken then in case of the test page the More block is not supposed to show up.

[kienstra]

Thanks, Matrix Moved To Wiki

Hi @miina,
Thanks for these point you raised, which I'm looking at now. And thanks for pointing out that the separator displays.

Let's use the matrix on the wiki page now, instead of the one above. I'll keep updating the wiki, not this issue.

[kienstra]

Categories Alignment

Hi @miina,
Thanks for your points about the 'Categories' block styling. I think you're right that the block behaves as expected.

This is probably from how the theme handles .aligncenter. Though it looks a little strange to me, maybe that's what's expected.

There doesn't look to be an issue with Gutenberg here, as it only applies the class aligncenter.

This is the same case in the 'Latest Posts' block. I'm changing both in the wiki page to 'supported.'

[kienstra]

'More' Block

Hi @miina,
Thanks for your point about the More block. I think you're right that it's not expected to display on this page, so I'm changing support on the wiki page to 'supported.'

[miina]

@kienstra Thanks for looking into these issues and for the quick update.

[kienstra]

Changed Several Blocks To Supported

Hi @miina,
AMP stripped the <marquee> element in the HTML block, but that looks to be obsolete. So I changed it to 'Supported' on the wiki page.

Also, I changed the Image block to supported. It had a styling issue, with the <figcaption> not centered, even though the aligncenter class was present.

The theme applies a different style. This isn't an issue specifically with Gutenberg, as it simply added the aligncenter class.

Likewise, I changed the Pullquote block on the wiki page to 'Supported.' The theme handles the styling, so there's no problem with Gutenberg.

Also, the Gallery block display issue is from the theme styling. I changed it to 'Supported.'

[kienstra]

Results Of Using Validator On Block Test Page

Hi @westonruter,
Here are the results of using your validation of blocks from #1019.

Gutenberg Issues

• Categories with a dropdown: the preprocessor stripped the script that it output. That's now noted on the wiki page.
• CSS overflow property removed from gutenberg/blocks/build/style.css

Shortcode Issue

• Shortcode block with an 'audio' shortcode: not specifically an issue with Gutenberg, just the shortcode. The preprocessor stripped several scripts and styles from wp_audio_shortcode().

You already noted the issue of the theme's stylesheet not being output due to the Gutenberg stylesheet being too big.

[miina]

Thank you for the update, @kienstra, looks like as of this moment the issue to handle within #1010 is just the Categories with a dropdown.

[kienstra]

Sure, @miina. You probably saw it, but Weston's solution for the Categories widget would probably help with this.

[miina]

Yes, saw your note about it in the table, definitely helpful, thanks @kienstra!

[westonruter]

I think the discovery has been completed so this can be closed?

[kienstra]

Hi @westonruter, yes, this can be closed.