[Resolved] gallery block (wp-core) not rendering properly because of gp

[Heinrich]

hi team,
following setup is in place:
gp, woocommerce and a snippet which allows to edit products with gutenberg. all other plugins disabled.

a used gallery block with setting of two columns doesn`t render as expected in frontend. in backend all is looking fine.
when i change to a standard theme (twenty twenty three) the rendering in the frontend is fine. back to gp – it sucks.

this is the result of research with ying (support generateblocks) and woocommerce support.
to mention that this setup was working fine over a year, not sure which update og gp causes the issue.

can you have a look please?
tks in advance

[David]

Hi there,

the issue arose in a WP 6.1.x update, where WP changed (again) the markup and CSS generation for certain blocks. This included replacing some block specific CSS such as that used for a Gallery Layout to using utility classes e.g is-layout-flex.

For any block on a page that has one of those utility classes, WordPress is meant to print the dynamic CSS for it.

And for a lot of users it does, here for example is a dev site running woocommerce on GP, using block editor to add a gallery to the product description, as per your example:

As you can see it works as you would expect.

On your site, the HTML is the same, and the gallery has the is-layout-flex class, but WP has not generated the CSS for it.

Why does this it work on 2023 ? Because that is a block based theme, and WP have built there dynamic CSS system for block based themes.

Why does it work on my site and not yours? That is a good question. And something we don’t have an answer. The issue lies at the feet of WordPress and how they output their CSS. And there isn’t something that we can add to a theme to make sure WP does its job.

To fix your issue, you can add this CSS to your site:

body .is-layout-flex {
    display: flex;
    flex-wrap: wrap;
}

If of course we find there is something we can do to assist with this, we will do so.

[Heinrich]

hi david, tks for this detailed info and solution.
this really helps. is working now.

all the best
heinrich

[David]

You’re welcome

[Author]

Posts