[wp-trac] [WordPress Trac] #65277: Gutenberg Gallery Flex Styles Missing

[WordPress Trac]

#65277: Gutenberg Gallery Flex Styles Missing
-------------------------------+-----------------------------
 Reporter:  carbondigitalus    |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Posts, Post Types  |    Version:  6.9.4
 Severity:  normal             |   Keywords:  needs-patch
  Focuses:  ui, css            |
-------------------------------+-----------------------------
 ## `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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65277>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform