Reader: some Gutenberg blocks don't display correctly

[leandroalonso]

Some blocks don't appear correctly when shown in the Reader.

While I do think that the Reader should keep a consistent visual (and not apply some random colors that the post authors might use) there are a few improvements that we could make when showing them (an example is a table, that doesn't display any border).

(JFYI: I'm creating that as a single issue so we can keep the discussion centered here. If we decide to fix one type of block or just a small amount of them I can open another issue.)

• Cover block
• Button block - Reader: ensure button block matches main site styles #43779
• Headings (Settings) - Reader: Keep inline styles in post content #46720, D51569-code
• Group block
• Latest posts block
• Tables Reader: ensure Gutenberg tables are visually similar to the original site #44276
• File block
• Pay with Paypal block - Pay with PayPal block: Save fallback into post content jetpack#17256

Cover block

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/964
How it looks on the site: https://made4testing0318.blog/2020/04/15/cover-blocks-2/

Button block

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/1363
How it looks on the site: https://made4testing0318.blog/2020/06/02/many-buttons/

Headings (Settings)

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/984
How it looks on the site: https://made4testing0318.blog/2020/04/16/headings-paragraphs/

Group Block

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/1037
How it looks on the site: https://made4testing0318.blog/2020/04/17/group-block-with-nested-groups/

Latest Posts Block

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/1003
How it looks on the site: https://made4testing0318.blog/2020/04/16/latest-posts-block/
On comments latest-posts don't appear at all in the Reader

Tables

How it looks on Reader: https://wordpress.com/read/blogs/165243437/posts/1717
How it looks on the site: https://charlietest12345.blog/2020/06/23/table-block/

File block

How it looks on Reader: https://wordpress.com/read/blogs/159889361/posts/1219
How it looks on the site: https://made4testing0318.blog/2020/04/29/core-file-block/

[tophertoy]

@leandroalonso I'd be keen to start this one off by looking at the "button block" if that works for you.

I've started something, it's work in progress at the moment.

[tophertoy]

@leandroalonso are you looking for just font improvements with "headings" or did you have another things in mind (padding etc)?

[leandroalonso]

@tophertoy very good question.

For me, we want to respect the styles the content creator has added but we still want to keep the Reader's look (which shows the content in a more generic way).

In that case, I'm wondering if it makes sense to show the colors that the user has defined — IMHO we shouldn't. Personally, I'd display the header with the correct size and alignment and that's it. Wdyt @bluefuton?

[bluefuton]

Personally, I'd display the header with the correct size and alignment and that's it.

👍 I agree! Sounds like the best approach.

[thehenrybyrd]

Another block which doesn't load properly in Reader is the Pay with PayPal button.
This is problematic for folks who use the Pay with PayPal block to ask for donations on blog posts, for instance. Visitors viewing the post via the Reader see no button for donation.

Here's how that looks in a blog post:

However, in Reader, there is no button, only the amount:

@leandroalonso let me know if this should be a separate issue :)

[bluefuton]

Thanks @thehenrybyrd! I've added the Pay with Paypal block to the todo list in the description.

[mtias]

Spacers should probably not be included here.

[bluefuton]

Spacers should probably not be included here.

That's a good call 👍 On reflection I don't think they make sense in the context of Reader.

[designsimply]

I tested cover blocks as part of beta testing for the WPAndroid 15.8-rc-2 beta release and found that cover blocks still don't display background images in the Reader on the web. Note: the cadence for spacing around these blocks is awkward on the front-end though this could be related to the theme.

Reader	Front-end

^{Tested with Firefox 81.0 on macOS 10.15.6.}

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[worldomonation]

Looks like it was referenced in an active issue, so I will remove the Stale label for now.

[roo2]

I created simple PRs for the "Latest posts", "Group" and "File" pages. Not to fully support the block features but just to ensure they are presentable. #73201, #73202, #73203

I don't think we should do much about the cover block because

• We don't have easy access to the image link
• It doesn't look too broken at the moment
• We want to encourage a consistent visual experience and if we bring styling into the cover block it might be quite overpowering