P2 Comments: GitHub embed blocks aren't shown

[twstokes]

Expected behavior

A GitHub embed block is shown inline with the comments.

Actual behavior

A blank space is shown where the GitHub embed block should be.

Steps to reproduce the behavior

1. Open Reader
2. Locate a P2 post that contains a comment with embedded GitHub content (e.g. Issue, PR)
3. Observe that the space is empty

Desktop	Mobile
	GH.Embed.Block.mp4

Other notes

@AliSoftware found that sometimes the sticky header will disappear. See p1648456550376559-slack-C011BKNU1V5.

Tested on iPhone 12 Pro, iOS 15.4, WPiOS 19.5.0.2

[twstokes]

cc @dvdchr @AliSoftware

[dvdchr]

Update on the GitHub embed issue: p1648576909881539-slack-C011BKNU1V5?thread_ts=1648456550.376559

[dangermattic]

Thanks for reporting! 👍

[kean]

Tested in trunk with WebKit-based rendered and this issue still reproduces, but the embeds no longer create a large gap. They do no load though.

[kean]

RCA.

The embeds get stripped out from the content.

(lldb) po comment.content
"<p>Testing GitHub embeds and lists.</p><p></p><p><p></p><p></p><p></p><p></p><p></p><p><p><p></p><p></p><p></p></p></p></p><ul><li>Level one<ul><li>Level two</li></ul></li></ul>"

(lldb) po comment.rawContent
<!-- wp:paragraph -->\n<p>Testing GitHub embeds and lists.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:p2/embed-github -->\n<div class=\"wp-block-p2-embed-github\"><div class=\"wp-block-p2-embed-github__rehydrate-placeholder\"></div><div class=\"wp-block-p2-embed-github__saved\"><div class=\"wp-block-p2-embed-github__main\" title=\"https://github.com/wordpress-mobile/WordPress-iOS/issues/18225\"><div class=\"wp-block-p2-embed-github__data-owner\" title=\"wordpress-mobile\"></div><div class=\"wp-block-p2-embed-github__data-repo\" title=\"WordPress-iOS\"></div><div class=\"wp-block-p2-embed-github__data-item-id\" title=\"18225\"></div><div class=\"wp-block-p2-embed-github__data-item-type\" title=\"issues\"></div><div class=\"wp-block-p2-embed-github__left-container\"><div class=\"wp-block-p2-embed-github__logo\"></div></div><div class=\"wp-block-p2-embed-github__right-container\"><div class=\"wp-block-p2-embed-github__issue\"><div class=\"wp-block-p2-embed-github__issue-content\"><div class=\"wp-block-p2-embed-github__issue-title\"><div class=\"p2-blocks-skeleton-long-text\"></div></div><div class=\"wp-block-p2-embed-github__issue-description\"><div class=\"p2-blocks-skeleton-short-text\"></div><div class=\"p2-blocks-skeleton-medium-text\"></div></div></div></div></div></div></div></div>\n<!-- /wp:p2/embed-github -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>Level one<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>Level two</li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list --></li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list -->

The wp-block-p2-embed-github block itself only contains a bunch of <div>s and clearly won't work without JS (React?).

[davemart-in]

Note from @jkmassel:

we probably need some server help for this – the server should turn the Gutenberg comment into valid HTML and emit that in the content (with the relevant JS)

My recommendation instead of trying to pass the HTML and JS through would be to just return the GH URL via the API. Sending HTML and JS seems tricky and may pose security concerns? @jkmassel do you think that would be acceptable?

Also, just noting this comment form the Slack discussion:

Given my understanding of this recent SIRT post p3btAN-1Iv-p2 … my understanding is that GitHub Embed are likely restricted to P2s

[dcalhoun]

Does anyone know why the GitHub embed block requires JavaScript? My perception is that it is not interactive, aside from lazy loading the issue information. Presumably the entire block could be server-rendered, where the server solely returns styled HTML.