search

Automattic / newspack-blocks

Gutenberg blocks for the Newspack project.
205 stars 43 forks source link

Blog Posts Block - Featured Images Oversized and Overlap in the Editor #1826

Open donalirl opened 1 month ago

donalirl commented 1 month ago

Describe the bug Images in the Blog Posts block (grid view) appear distorted in the editor, making it difficult to edit the site.

To Reproduce Steps to reproduce the behavior:

  1. Activate a block theme
  2. Visit the site editor and edit the homepage template
  3. Add a Blog Posts block
  4. In the toolbar, choose Grid View
  5. Ensure three posts are loaded and that each post has a featured image

Screenshots Images are suddenly extremely large and pushed up against each other: Screenshot 2024-08-03 at 10 31 54 AM

Expected behavior I expected the editor view to show the images with correct spacing, like we see on the live site: Screenshot 2024-08-03 at 10 34 52 AM

philnick206 commented 1 month ago

Another report: 8582019-zd-a8c

mxhassani commented 2 weeks ago

Another one: 8622597-zen Theme: Masu Workaround: use query loop block

masperber commented 2 weeks ago

Another report here: 8663356-zd-a8c

m1r0 commented 4 days ago

I was able to reproduce it.

cc @Automattic/newspack-product to increase visibility.

laurelfulford commented 4 days ago

Thanks for the reports, all!

It look like this is related to this optimization change that loads some of the editor styles as needed -- these styles include a max-width for the images, and they're being loaded into the regular post editor but not the site editor: https://github.com/Automattic/newspack-blocks/pull/1548

We'll be looking into a fix!