CoBlocks: Logos & Badges, Masonry, Stacked have missing images in Preview

[zdenys]

Steps to reproduce

1. Starting at URL: WordPress.com > My Sites > Site > Pages/Post > Add New
2. Click ⨁ on top left
3. Hover over CoBlocks Logos & Badges or CoBlocks Galleries: Masonry or CoBlocks Galleries: Stacked

What I expected

See a preview image

What happened instead

Preview image is missing

Chrome Inspector shows 404 for images like these:

https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/logo-1.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/logo-2.jpg

https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-1.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-2.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-3.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-4.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-5.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-6.jpg
https://SITEADDRESS.wordpress.com/wp-content/plugins/coblocks/dist/images/examples/gallery-7.jpg

Screenshot / Video

Link: https://cld.wthms.co/J4xTRD

Context / Source

#ust-bugreport in pb1bze-ej-p2

[gwwar]

@kwight do you mind confirming?

[kwight]

Ah, yes, it even makes sense: the URLs don't take into account our versioned directories (/wp-content/plugins/coblocks/1.16.1/dist/images/examples/logo-1.jpg). We also should be serving from static (s0-3.wp.com). I'll see if I can hook in somewhere.

[kwight]

Hm, they're all hardcoded. We may be able to filter the block settings though (maybe hang our URLs from wpcomGutenberg?).

[gwwar]

Hm, they're all hardcoded.

🤔 not sure how open folks would be to being able to config the path dir upstream. Might be worth a shot.

We can modify the block settings if needed, something like:

const changeBlockPreviews = ( settings, name ) => {
	if ( 'coblocks' === settings.category ) {
		// mutate block settings
	}
	if ( 'coblocks-gallery' === settings.category ) {
		// mutate block settings
	}
	return settings;
} );

addFilter( 'blocks.registerBlockType', 'wpcom/coblocks', changeBlockPreviews )

[mmtr]

Noting that this will be automatically fixed once we activate 1.17.1 on production since block previews use now images hotlinked from Wikimedia Commons: godaddy-wordpress/coblocks#1106

[kwight]

We'll be pushing out a modified 1.17.1-wpcom, that is v1.17.1 plus godaddy-wordpress/coblocks#1134 – that will close this, while keeping images kosher.