Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#58732 new enhancement

WordPress Gallery Block: Column Count Issue Results in Unbalanced Item Widths

Reported by: sarathar's profile sarath.ar Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0
Component: Editor Keywords: close 2nd-opinion
Focuses: Cc:

Description

Enhancement

Description

The WordPress gallery block is currently experiencing an issue when users select a specific column count. The problem arises when attempting to achieve a balanced layout, as the items within the gallery block are not receiving a common width. This results in inconsistent and unbalanced item widths. Currently, there is an option to keep all the items in the same width.

Environment

  • WordPress: 6.3-beta3-56143
  • PHP: 7.4.33
  • Server: TasteWP-S1 Official/3.0.0
  • Database: mysqli (Server: 8.0.32-0ubuntu0.20.04.2 / Client: mysqlnd 7.4.33)
  • Browser: Chrome 112.0.0.0 (macOS)
  • Theme: Twenty Twenty-Three 1.1
  • MU-Plugins: None activated
  • Plugins:
    • WordPress Beta Tester 3.5.0

Steps to Reproduce

  1. Add a gallery block
  2. Add a few images to the gallery
  3. Change the number of columns option

Expected Results

  1. Same column size for all gallery items

Actual Results

  1. If there are 6 gallery items and the column count is 4 the last 2 items are showing as 2 columns instead of 4.

Attachments (3)

image_2023_07_06T12_59_20_961Z.png (895.7 KB) - added by sarath.ar 5 months ago.
image_2023_07_06T12_59_31_682Z.png (964.8 KB) - added by sarath.ar 5 months ago.
image_2023_07_06T12_59_46_532Z.png (1.4 MB) - added by sarath.ar 5 months ago.

Change History (4)

#1 @sabernhardt
5 months ago

  • Component changed from General to Editor
  • Keywords close 2nd-opinion added
  • Version changed from trunk to 5.0

Thanks for the report!

GB2422 added flex-grow: 1 to the Gallery block's "Crop images" setting. The resizing may be unexpected the first time, but anyone who has used the block that way probably expects it now. Related: GB2465

If the crop setting is good otherwise, I was able to keep the images the same size with this custom CSS:

.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: 0;
}
Note: See TracTickets for help on using tickets.