search

WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
65 stars 26 forks source link

Blocks page: Image on rosetta sites is slightly darker #317

Closed ryelle closed 3 months ago

ryelle commented 1 year ago

On rosetta sites, ex https://es.wordpress.org/blocks/, the top image is slightly darker, and does not blend in with the header background.

Main Rosetta
Screen Shot 2023-08-14 at 14 12 52 Screen Shot 2023-08-14 at 14 13 58

The issue appears to be due to Rosetta loading the image from wp.org, while the main site uses a Jetpack CDN provided URL: https://wordpress.org/files/2023/08/blocks-header-image.png vs https://i0.wp.com/wordpress.org/files/2023/08/blocks-header-image.png?w=2394&ssl=1

I believe this is because the image is technically a local image on the main site, so the responsive images code runs to inject srcset (and then Jetpack adjusts those URLs). On rosetta sites, the image is technically from a remote url, so it can't add srcset or use the Jetpack URLs.

I'm not sure why the image hosted on wp.org is darker, but the processed image on wp.com is correct (maybe a png/webp difference?) If anything I would expect the opposite.

Maybe the URL in the content should be updated to use the wpcom URL by default? It is only 4KB, vs the 40KB of the wp.org png.

dd32 commented 1 year ago

This is caused by two issues:

Jetpack Photon is not active on Rosetta sites Easy fix. Add it to https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/plugins/rosetta/inc/site/class-locale-main.php#L78

Jetpack Photon requires that the attachment metadata is available in order to inject the values Harder to fix, The attachment ID does not exist on the rosetta site (And if an image does exist with that ID, it's going to insert that instead of the intended image). Using the Photon CDN url is a quick fix, and probably the only fix we can realistically do. The alternative would be to switch_to_blog( MAIN_SITE ) while outputting the_content(), but since these are block themes, I don't think it'd be easy to just do that for content within the content and not for things like the header/etc.

Longer term, this is an issue of having translated content via multiple sites. Ideally we'd not have individual rosetta sites, and instead we'd just be viewing wordpress.org but with a different locale set.

ryelle commented 3 months ago

The image has been updated and the new one doesn't have this issue, so I'm going to close this.