Gutenberg Gallery Flex Styles Missing

[carbondigitalus]

## display: flex missing from .wp-block-gallery.has-nested-images stylesheet

WordPress Version: (please fill in)
Block: Gallery (nested images / has-nested-images format)

### Description

The gallery block's stylesheet (style.min.css) is missing display: flex on the .wp-block-gallery.has-nested-images selector. Every flex-dependent property in the has-nested-images ruleset — flex-wrap, justify-content, align-items, etc. — is silently ignored by the browser because the flex formatting context is never established.

### Steps to Reproduce

1. Create a page or post.
2. Add a Gallery block with two or more images (this produces the has-nested-images markup).
3. Inspect the outer <figure> element in browser devtools.
4. Observe that justify-content: center (from .wp-block-gallery.has-nested-images.aligncenter) and other flex properties have no effect.

### Expected Behavior

Images in the gallery lay out in a row, wrapping as expected, with alignment controls functioning correctly.

### Actual Behavior

The gallery images stack vertically (block layout). Flex properties such as justify-content and flex-wrap are ignored because display: flex is never set on the container.

### Root Cause

The legacy (non-nested) gallery format correctly sets display: flex:

`css
.wp-block-gallery:not(.has-nested-images) {

display: flex;
flex-wrap: wrap;
...

}
`

However, the has-nested-images ruleset never sets display: flex on the outer gallery container. The ruleset contains:

`css
.wp-block-gallery.has-nested-images.aligncenter {

justify-content: center; /* has no effect — no flex context */

}
`

...among other flex-dependent rules, but the foundational display: flex declaration is absent.

### Suggested Fix

Add the following to the has-nested-images ruleset:

`css
.wp-block-gallery.has-nested-images {

display: flex;
flex-wrap: wrap;

}
`

### Workaround

Users can add the above CSS manually via their theme or a custom stylesheet until this is addressed in core.

[shreyasikhar26]

Hey @carbondigitalus

I checked this issue but I cannot reproduce it.

From my observation,
The outer <figure> element with class .wp-block-gallery.has-nested-images is getting the display: flex css through another class is-layout-flex.
I checked this with mentioned WP version 6.9.4

I hope you are testing with default WP theme and no plugin active.

[carbondigitalus]

Thanks for checking. The is-layout-flex class and its associated styles are generated dynamically by the block editor's JavaScript — they are not part of the core gallery stylesheet. In environments where that JS pipeline is interrupted (e.g. third-party page builders rendering blocks server-side), is-layout-flex styles may not load, and since the gallery stylesheet has no display: flex of its own, the layout breaks entirely.
The issue is that style.min.css is incomplete — it defines flex-dependent properties like justify-content and flex-wrap for .wp-block-gallery.has-nested-images but never declares display: flex itself. The stylesheet should not rely on a separate dynamically-injected class to establish the flex context that its own rules depend on.

[jamesbregenzer]

I tested this on current trunk and was not able to reproduce the reported issue.

Environment:

• WordPress 7.1-alpha-62161-src
• Local wp-env/Docker environment
• Firefox

Steps tested:

1. Created a new post.
2. Added a Gallery block with multiple images.
3. Set the Gallery block alignment to center.
4. Published the post and inspected the frontend markup/styles.

Result:
The outer gallery element included wp-block-gallery, aligncenter, and has-nested-images, and the browser identified it as a flex container. The gallery appeared centered as expected.

I did not see the missing display: flex behavior described in the ticket.