Skip to content

Fix: Randomization in Gallery Block doesn't work when Lightbox is enabled #71408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
t-hamano merged 1 commit into from
Sep 1, 2025
Merged

Fix: Randomization in Gallery Block doesn't work when Lightbox is enabled #71408

t-hamano merged 1 commit into from
Sep 1, 2025

Conversation

@t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Aug 29, 2025 •
edited
Loading

Reclose #65120
See: #65120 (comment)

What?

This PR fixes the issue that randomization in the Gallery Block doesn't work when Lightbox is enabled.

Why?

We introduced a functionality to randomize images inside the Gallery block in #58733. I realized that the regular expression doesn't work if the provided HTML contains line breaks.

For example, when the lightbox is disabled, the rendered HTML is the following:

<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2">
<figure class="wp-block-image size-large"><img data-id="26" src="http://localhost:8888/wp-content/uploads/2025/08/1.png" alt="" class="wp-image-26"/></figure>
<figure class="wp-block-image size-large"><img data-id="27" src="http://localhost:8888/wp-content/uploads/2025/08/2.png" alt="" class="wp-image-27"/></figure>
</figure>

On the other hand, when the lightbox is enabled, the image block has the button element, and there are a lot of line breaks and tabs:

Details 
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2">
<figure data-wp-context="{&quot;imageId&quot;:&quot;68b16ea4d77e3&quot;}" data-wp-interactive="core/image" data-wp-key="68b16ea4d77e3" class="wp-block-image size-large wp-lightbox-container"><img data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" data-id="26" src="http://localhost:8888/wp-content/uploads/2025/08/1.png" alt="" class="wp-image-26"/><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="Enlarge"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on-async--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>
<figure data-wp-context="{&quot;imageId&quot;:&quot;68b16ea4d79ea&quot;}" data-wp-interactive="core/image" data-wp-key="68b16ea4d79ea" class="wp-block-image size-large wp-lightbox-container"><img data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" data-id="27" src="http://localhost:8888/wp-content/uploads/2025/08/2.png" alt="" class="wp-image-27"/><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="Enlarge"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on-async--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>
</figure>

How?

Uses the dotall flag (s) to make . match including newline characters.

Ref: PHP: Possible modifiers in regex patterns - Manual

Testing Instructions

  • Insert a Gallery block and put images inside it.
  • Enable the "Expand on Click" from the Gallery block's toolbar.
  • Open the post on the front end.
  • Confirm that the order of images differs every time you reload your browser.

Screenshots or screencast

fed2cb03887e7786e0bf002420ac7cda.mp4

@t-hamano t-hamano mentioned this pull request Aug 29, 2025
Closed
2 tasks
@t-hamano t-hamano self-assigned this Aug 29, 2025
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Gallery Affects the Gallery Block - used to display groups of images labels Aug 29, 2025
@t-hamano t-hamano marked this pull request as ready for review August 29, 2025 09:23
@github-actions
Copy link

github-actions bot commented Aug 29, 2025 •
edited
Loading

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: t-hamano <[email protected]>
Co-authored-by: ramonjd <[email protected]>

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

ramonjd
ramonjd approved these changes Sep 1, 2025
View reviewed changes
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working as expected for me with no regressions. I checked PHP logs as well.

I noticed there are no PHP unit tests for block_core_gallery_render(). I guess it would be good to have coverage for this one day, but for this specific case (interactivity API) it might be more appropriate to extend gallery.spec.js E2E tests.

Seeing as this is fixing a bug and there are no existing tests, let's get the bugfix in at least.

Nice one.

@github-actions
Copy link

github-actions bot commented Sep 1, 2025

Flaky tests detected in ed8f9de.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17319611081
📝 Reported issues:

@t-hamano
Copy link
Contributor Author

t-hamano commented Sep 1, 2025

@ramonjd thanks for the review!

I'd like to consider adding some e2e tests as a follow-up.

@t-hamano t-hamano merged commit f1821bb into trunk Sep 1, 2025
97 of 99 checks passed
@t-hamano t-hamano deleted the fix/gallery-randomize-order branch September 1, 2025 06:34
@github-actions github-actions bot added this to the Gutenberg 21.6 milestone Sep 1, 2025
@t-hamano t-hamano mentioned this pull request Sep 1, 2025
Closed
@maxschmeling maxschmeling mentioned this pull request Oct 7, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ramonjd ramonjd ramonjd approved these changes

@aaronrobertshaw aaronrobertshaw Awaiting requested review from aaronrobertshaw

Assignees

@t-hamano t-hamano

Labels

[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 21.6

Development

Successfully merging this pull request may close these issues.

3 participants

@t-hamano @ramonjd