Wp-calypso: Video Block: HTML Anchor Automatically Removed

[allykmyta]

Steps to reproduce

1. Go to: WordPress.com > My Sites > Site > Pages > and select either existing or Add New Page
2. Add a new video block to page content
3. Go to the Advanced Tab
4. Add anchor text in HTML Anchor section
5. Select "Publish" or "Update" if the page is already published
6. Refresh browser page

What I expected

I'd expect the HTML Anchor text to remain where it was last inputted.

What happened instead

The HTML Anchor text is gone and anchor link does not work.

Browser / OS version

Screenshot / Video

Video
Original video link: https://d.pr/i/etZxgK/Ge5aTkPRl2

Context / Source

user-report

[jeyip]

Confirmed in Chrome on Mac. Setting a priority level of high because the anchor link setting doesn't work at all, and it appears as if there are no workarounds.

[jeyip]

• The network request made when publishing block editor updates _does not_ include anchor tag updates to the video block. It does, however, include anchor tag updates to paragraph blocks, image blocks, etc.
• An anchor tag applied to a video placeholder is persisted

[andrewserong]

@jeyip I did a little bit of looking into this, too, hopefully this might help:

• It looks like we're overriding the core/video block in Jetpack here: https://github.com/Automattic/jetpack/blob/dcfa5ca8bdfc31aacec107aec27bb24357d6cdac/extensions/blocks/videopress/editor.js#L59
• Gutenberg adds anchor support for the video block here: https://github.com/wordpress/gutenberg/blob/602fcc35ac076cf46cf9571d2219d3b33ba408d2/packages/block-library/src/video/block.json#L73
• That supports value should be passed into the Jetpack block here: https://github.com/Automattic/jetpack/blob/dcfa5ca8bdfc31aacec107aec27bb24357d6cdac/extensions/blocks/videopress/editor.js#L158
• In the core video block, ...blockProps is used to insert attributes into the container element in the post content, e.g. here in edit: https://github.com/wordpress/gutenberg/blob/602fcc35ac076cf46cf9571d2219d3b33ba408d2/packages/block-library/src/video/edit.js#L220 and here in save: https://github.com/wordpress/gutenberg/blob/602fcc35ac076cf46cf9571d2219d3b33ba408d2/packages/block-library/src/video/save.js#L25

So, I'm wondering if we need to do something similar in Jetpack to add support for the attributes/props in the overridden video block's edit and save methods?

[jeyip]

@andrewserong

I think the theory about blockProps makes a ton of sense, but I'm stumped about one thing -- I couldn't seem to reproduce the issue in a local environment earlier with jetpack, and I still can't seem to do so. I wonder why 🤔

Either way, I'll definitely start exploring this.

[andrewserong]

@jeyip I haven't (yet) been able to reproduce either in a Jetpack site, but I think we might need to use a paid plan to be able to test it there. A few more links from some digging 😀 :

• On this line it checks for availability of the jetpack/videopress extension: https://github.com/Automattic/jetpack/blob/dcfa5ca8bdfc31aacec107aec27bb24357d6cdac/extensions/blocks/videopress/editor.js#L66
• The extension is enabled here: https://github.com/Automattic/jetpack/blob/ebec0a8fb35ffac4766cce36646ebf01c5d56063/modules/videopress/class.videopress-gutenberg.php#L100
• It's enabled based on the check in check_videopress_availability: https://github.com/Automattic/jetpack/blob/ebec0a8fb35ffac4766cce36646ebf01c5d56063/modules/videopress/class.videopress-gutenberg.php#L50
• And in that check, it looks like it only returns an array with 'available' => true if there's a paid plan, so the core/video block is probably only getting overridden when the paid Jetpack or wpcom plan is present.

[jeyip]

And in that check, it looks like it only returns an array with 'available' => true if there's a paid plan, so the core/video block is probably only getting overridden when the paid Jetpack or wpcom plan is present.

Ahhh I see. I'll try to replicate the problem. Going to hard code check_videopress_availability to true in a local jetpack dev environment.

If we can reproduce it, I think we'll be in a good place 🙂

[jeyip]

Hmmm... having trouble getting hard coded values to work.

The local environment has been early returning with a fall back to the Core Video Editor: https://github.com/Automattic/jetpack/blob/dcfa5ca8bd/extensions/blocks/videopress/edit.js#L293-L295

This might explain why I've been unable to reproduce the problem in a dev environment.

[jeyip]

Still chugging along. Spent today filling in _a lot_ of gaps in knowledge about jetpack and setting up a local tunnel and "connecting" my local jetpack environment with a paid plan. I'm pretty confident that the reason we couldn't replicate the issue locally was because, when unconnected, our dev environment wasn't uploading videos to jetpack videopress servers.

This was causing the fallback to the Core Video Editor, which doesn't share the same HTML anchor tag issues. I've connected jetpack successfully, but am now having trouble uploading videos at all. Will update here as I make progress.

[andrewserong]

A little more info on useBlockProps: https://make.wordpress.org/core/2020/11/18/block-api-version-2/ — I wonder if it might be tricky adding in the appropriate support so that WP 5.6 / current Gutenberg versions get the appropriate id attribute in the markup, but folks running Jetpack on earlier versions don't run into block validation issues / errors because useBlockProps isn't available... 🤔