Gutenberg-mobile: SVG images in paragraph blocks are not displayed properly in the editor

[designsimply]

Steps to reproduce:

1. Setup a Jetpack-connected site.
2. Install the Gutenberg plugin.
3. Go to Gutenberg > Demo to create a demo post.
4. Add the site to the app.
5. Open the demo post in the app.
6. Scroll down to the end of the post and look for the svg image in the paragraph block just after "Thanks for testing Gutenberg!"
7. Check to see if the svg image displays correctly or not.

Result: the svg from the demo post does not display properly in the app.

Example HTML from the block containing the svg:

<p style="text-align:center"><img draggable="false" class="emoji" alt="👋" src="https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg"></p>

^{Tested with WPAndroid alpha-154 (11.9 alpha) on Pixel 3, Android 9 with a site running WordPress 5.2-alpha-44769 and Jetpack 7.0.1 and Gutenberg 5.1.1.}

Found during WPAndroid 11.9 beta testing.

[designsimply]

@mzorz can you have a look at this one? Would you consider this a priority to fix before 11.9 is launched introducing Gutenberg Mobile as a user-facing opt-in?

[mzorz]

Hi @designsimply! thanks for reporting this. I've tested it and confirmed the behavior you're describing. I've investigated it a bit and on the technical side I can add that this in particular happens because the Paragraph block is implemented using the RichText component which is implemented with Aztec, and I don't think we're supporting SVG in Aztec itself.

Needs further investigation

[designsimply]

I tested with WPiOS 11.9.20190226 on an iPad Mini on the same site (alleged-swift.jurassic.ninja WP 5.2-alpha-44784, Jetpack 7.0.1) today and saw the same problem. I'm including some possibly relevant bits from the app logs in case they're helpful! 😊

2019-02-28 19:13:56:244 🔵 Tracked: post_list_button_pressed, properties: {
    "blog_id" = 158694198;
    button = edit;
    filter = Published;
    "has_gutenberg_blocks" = 1;
    "post_id" = 42;
    type = post;
}
2019-02-28 19:13:57:332 TracksService sendQueuedEvents completed. Sent 7 events.
2019-02-28 19:13:59:647 🔵 Tracked: editor_session_start, properties: {
    "blog_type" = jetpack;
    "content_type" = gutenberg;
    editor = gutenberg;
    "has_unsupported_blocks" = 1;
    "post_type" = post;
    "session_id" = "41A708C4-5E11-406F-9065-E6E72595518C";
}
2019-02-28 19:14:14:687 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:14:17:353 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:14:18:773 TracksService sendQueuedEvents completed. Sent 1 events.
2019-02-28 19:14:52:698 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:14:52:820 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:14:52:827 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:14:58:743 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:03:332 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:04:170 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:04:216 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:04:217 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:12:484 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")
2019-02-28 19:15:19:370 Unable to download image for attachment with url = https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg. Details: Optional("The operation couldn’t be completed. (WordPress.ImageDownloaderError error 0.)")

[koke]

I think this issue is mostly specific to the way the demo content was crafted. The underlying issue is that we don't support inline SVG images in paragraphs, and adding support for that would likely be a big undertaking.

I tested that regular emoji works well and this is caused by copying the HTML generated in the frontend and putting it inside the paragraph.

I'm going too close this as wontfix unless we start seeing it's common for users to have embedded SVGs in paragraphs (other than the demo post).

@mzorz what do you think about doing a PR for Gutenberg to replace that SVG with an actual emoji? It should render exactly the same on the frontend but it wouldn't give trouble to mobile 😄