Skip to content

Feat: Add uniform image sizes toggle to Gallery Block#68585

Open
yogeshbhutkar wants to merge 3 commits intoWordPress:trunkfrom
yogeshbhutkar:68563/add-uniform-image-sizes-toggle
Open

Feat: Add uniform image sizes toggle to Gallery Block#68585
yogeshbhutkar wants to merge 3 commits intoWordPress:trunkfrom
yogeshbhutkar:68563/add-uniform-image-sizes-toggle

Conversation

@yogeshbhutkar
Copy link
Contributor

What, Why & How?

Adds support for maintaining uniform image sizes in gallery blocks, preventing the last image in a row from expanding to full width when there are fewer images than columns.

  • Added new has-uniform-image-sizes class support.
  • Used flex properties to maintain consistent image widths.
  • Prevented image growth using flex: 0 0 width.
  • Maintained existing gap calculations.
  • Preserved default column behavior when uniform sizing is disabled.

Testing Instructions

  1. Create a Gallery Block.
  2. Add 4 Image Blocks to it.
  3. Set the column count to 3.
  4. Notice, by default the last image occupies the full width.
  5. Try toggling the control labeled uniform image sizes and notice all the image blocks now take the same sizes.

Screencast

Feature Demo

Closes: #68563

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review January 10, 2025 09:22
@github-actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: jartes <jartes@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar
Copy link
Contributor Author

The feature implementation is complete. I will update the test cases after the initial round of review.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Gallery Affects the Gallery Block - used to display groups of images labels Jan 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Gallery Block: Add option to keep images the same size

2 participants