Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conduct a Discovery to determine support for Gutenberg blocks. #845

Closed
MackenzieHartung opened this Issue Jan 4, 2018 · 24 comments

Comments

7 participants
@MackenzieHartung
Copy link
Collaborator

commented Jan 4, 2018

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

@MackenzieHartung MackenzieHartung added this to To Do in v0.7 Jan 4, 2018

@ThierryA ThierryA added this to the v0.7 milestone Jan 8, 2018

@MackenzieHartung MackenzieHartung moved this from To Do to Definition in v0.7 Jan 9, 2018

@MackenzieHartung MackenzieHartung removed this from Definition in v0.7 Jan 9, 2018

@westonruter westonruter removed this from the v0.7 milestone Mar 7, 2018

@ThierryA ThierryA added this to the v1.0 milestone Mar 8, 2018

@ThierryA ThierryA added this to Definition in v1.0 Mar 8, 2018

@MackenzieHartung MackenzieHartung moved this from Definition to To do in v1.0 Mar 8, 2018

@kienstra

This comment has been minimized.

Copy link
Collaborator

commented Mar 12, 2018

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.

@MackenzieHartung MackenzieHartung moved this from To do to In progress in v1.0 Mar 12, 2018

@kienstra

This comment has been minimized.

Copy link
Collaborator

commented Mar 12, 2018

Permutations Of Blocks

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

  1. With dropdown
  2. Without dropdown
  1. Fixed Background on
  2. 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

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

@amedina

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

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

@westonruter

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 13, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 13, 2018

In Progress

I'm working on this now.

@kienstra

This comment has been minimized.

Copy link
Collaborator

commented Mar 13, 2018

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

This comment has been minimized.

Copy link
Member

commented Mar 14, 2018

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

@miina

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

'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

This comment has been minimized.

Copy link
Collaborator

commented Mar 14, 2018

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

@kienstra

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2018

Results Of Using Validator On Block Test Page

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

Gutenberg Issues

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.

@kienstra kienstra moved this from In progress to Ready for Merging in v1.0 Mar 15, 2018

@miina

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2018

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

@miina

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2018

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

@westonruter

This comment has been minimized.

Copy link
Member

commented Mar 17, 2018

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

@kienstra

This comment has been minimized.

Copy link
Collaborator

commented Mar 17, 2018

Hi @westonruter, yes, this can be closed.

@kienstra kienstra moved this from Ready for Merging to In Production in v1.0 Dec 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.