Wp-calypso: Coblocks: Custom URLs in galleries invalidates the block content

Created on 23 Jul 2019  路  6Comments  路  Source: Automattic/wp-calypso

Steps to reproduce

  1. Starting at URL: https://wordpress.com/block-editor/page
  2. Add a Coblocks gallery block.
  3. Under "Link Settings" in the Block Settings, choose Custom URL.
  4. Enter addresses with http:// or https:// in the gallery image custom URLs.
  5. Publish the page/post.

What I expected

To be taken to the external website upon clicking the gallery image.

What happened instead

You're taken to: https://mygroovysite.wordpress.com/coblocks/www.blah.com

This is odd because A) it creates a coblocks slug and B) we don't actually allow periods in our slugs, we convert them to dashes.

Also, when you open the post in the editor again, it becomes an "Attempt block recovery". If you recover the block, all links are lost.

Browser / OS version

Version 75.0.3770.144 (Official Build) (64-bit) Chrome OS

Screenshot / Video

Screen Shot on 2019-07-23 at 11_36_15

Context / Source

[Goal] Gutenberg [Type] Bug

Most helpful comment

There are actually 2 issues here:

  • WP.com is stripping out the data-imglink attributes added to the images, causing the "This block contains unexpected or invalid content." error. This should be fixed by D31657-code.
  • The URLs are not being sanitized / validated, so entering an URL without the schema (http(s)://) will create a relative URL. This issue is also present in the plugin itself, so I reported it there: https://github.com/godaddy/coblocks/issues/747

All 6 comments

Got this same issue. Only that I would get the This block contains unexpected or invalid content. error with any custom URL I add.

Here's a quick video:

https://cld.wthms.co/GdJ8NF

Browser / OS version
Google Chrome Version 75.0.3770.142 (Official Build) (64-bit) | macOS Mojave 10.14.5 (18F132)

I had another report of this today in #13850331-hc.

I was able to reproduce on my test site as well (simple site). When I try and resolve the block after returning to the post/page I can see it's wanting to remove a trailing slash from the tags and then wrap the links inside an extra figure tag.

ETA: I only see the unexpected or invalid content method when there are links in the blocks. It happens with the correct URL formatting and without. When I remove the per-image links the block loads fine.

Here's what I see:

The console shows the block validation error as well:

I also noticed that there is no correlation between the links set in the link overlay in the block and the "Link Settings" area in the sidebar:

There are actually 2 issues here:

  • WP.com is stripping out the data-imglink attributes added to the images, causing the "This block contains unexpected or invalid content." error. This should be fixed by D31657-code.
  • The URLs are not being sanitized / validated, so entering an URL without the schema (http(s)://) will create a relative URL. This issue is also present in the plugin itself, so I reported it there: https://github.com/godaddy/coblocks/issues/747

I also noticed that there is no correlation between the links set in the link overlay in the block and the "Link Settings" area in the sidebar

This is normal, @katiebethbrown. The "Link Rel" setting is intended to set the rel attribute of the link.

This is normal, @katiebethbrown. The "Link Rel" setting is intended to set the rel attribute of the link.
Oops - I totally missed that. Thanks for letting me know!

Closed in D31657-code.

Was this page helpful?
0 / 5 - 0 ratings