Wp-calypso: Reader: some Gutenberg blocks don't display correctly

Created on 23 Jun 2020 · 9Comments · Source: Automattic/wp-calypso

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
[x] Button block - #43779
[x] Headings (Settings) - #46720, D51569-code
[ ] Group block
[ ] Latest posts block
[x] Tables #44276
[ ] File block
[x] Pay with Paypal block - https://github.com/Automattic/jetpack/pull/17256

Reader [Goal] Gutenberg [Type] Enhancement

Source

leandroalonso

❤3

All 9 comments

@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 on 29 Jun 2020

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

Screenshot 2020-07-03 16 36 13

tophertoy on 3 Jul 2020

@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?

leandroalonso on 7 Jul 2020

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

👍 I agree! Sounds like the best approach.

bluefuton on 8 Jul 2020

👍1

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

thehenrybyrd on 6 Aug 2020

❤1

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

bluefuton on 7 Aug 2020

❤1

Spacers should probably not be included here.

mtias on 19 Aug 2020

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.

bluefuton on 19 Aug 2020

👍1

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
---|---
Screen Shot 2020-09-28 at Sep 28 2 43 02 PM |