Image Block retains rounded style within Lightbox

[relic-se]

Description

I expect for the full image to be visible when opened within the Lightbox modal. The "Rounded" style should only apply within the site blocks, not within the Lightbox.

I understand that this is likely a preference that is dependent on the scenario and is up for debate. I'd like to bring it up as a discussion point at the least to assess a potential solution.

Step-by-step reproduction instructions

1. Add an image block to a Gutenberg-enabled page.
2. Set the image block to the "Rounded" style within the "Styles" tab of the block settings sidebar.
3. Use the link drop down of the contextual menu and select "Expand on click" on the image block.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.7.1, Gutenberg 19.7.0, Twenty-Twenty Five Theme
• Browser: Firefox
• Device: Desktop with Debian Linux

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mayank-Tripathi32]

Hello @relic-se,

Thank you for raising this issue and sharing your thoughts! If I understand correctly, you’re suggesting that images in the Lightbox should display in their normal (unrounded) style, instead of inheriting the "Rounded" style from the block. Is that right?

This is a good point, as Lightbox images are usually expected to show their original form. We could consider adding a toggle in the block settings to let users choose whether Lightbox should inherit the block’s styles or use a default look.

Let me know if this idea works, or if there are other suggestions we can explore! 😊

[relic-se]

Hi @Mayank-Tripathi32! After talking it over a bit, I think that a toggle would be the optimal route. It could also be a setting defined within the block-level lightbox theme.json settings.

gutenberg/lib/theme.json

Lines 276 to 279 in 5b286b7

	"core/image": {
	"lightbox": {
	"allowEditing": true
	}

[Mayank-Tripathi32]

Hey @relic-se, I will work on adding the toggle in a quick demo in the morning. Look forward to it and review. Thanks!

[Mayank-Tripathi32]

Hey @relic-se,
Here’s a video demonstrating a simple toggle that applies styles conditionally for classes and styles in the image block. It becomes visible when lightbox mode is enabled.

demo.mp4

Let me know if this look like viable solution! Thanks

block.json

	"lightbox": {
			"type": "object",
			"enabled": {
				"type": "boolean"
			},
			"applyStyles": {
				"type": "boolean",
				"default": "true"
			}
		},

[Mayank-Tripathi32]

Kindly review the code as well. I have updated the attributes in block.json to achieve this.

[relic-se]

Wow, great work! That's a clean implementation that I think addresses the problem very well. I am not incredibly well-versed in the Gutenberg codebase, so someone else with a better understanding should definitely take a closer look. Still, I'll let you know if I see anything awry.