File Block looks unpolished in the Reader

[startuptester]

Expected behavior

In the Reader, File blocks should look similar to they do on my site

Actual behavior

Steps to reproduce the behavior

1. Add a file block to a post
2. View in Reader

Tested on iPad and iPhone 12 Pro, iOS 14.2, WPiOS 16.4.0.0

[startuptester]

@yaelirub this is not happening on the Reader in Android

But it IS happening on the web

So I should report to Calypso and close this one? It doesn't make sense to me that it's working on Android and nowhere else, how can that happen?

[emilylaguna]

After a discussion with @leandroalonso about this issue today it looks like this is happening because iOS strips out the style attribute from the tags to prevent styling issues in reader.

Because of that, this issue is larger than originally anticipated and adding a local style for the button isn't the correct fix, and we should look further into changing how the reader parses the element styles to better support the work done.

[leandroalonso]

Just adding a little bit more info:

• We strip style tags because we want the Reader to have a "generic" look 'n feel, which means that weird colors or custom styles that the user adds won't be rendered;
• If we revert this change, this will fix this issue but will cause a regression in Reader is applying custom styles #14531 (and probably many other side effects)
• We can add "exceptions" in the code — which CSS classes/blocks we accept custom styles. But that doesn't feel right because it seems an app-side solution (see next topic)
• Another team has recently worked in supporting rendering blocks at the API level (paYKcK-M3-p2), we can probably check the outcome and come up with a solution that takes advantage of that while preventing strange style from being rendered

[daniloercoli]

Checked on Jetpack 24.2, and I can still reproduce the issue.

[dangermattic]

Thanks for reporting! 👍