Skip to content

Enhance: Added toggle to apply styling in Lightbox conditionally#67596

Open
Mayank-Tripathi32 wants to merge 1 commit intoWordPress:trunkfrom
Mayank-Tripathi32:try/enhance-67535-add-lightbox-style-toggle
Open

Enhance: Added toggle to apply styling in Lightbox conditionally#67596
Mayank-Tripathi32 wants to merge 1 commit intoWordPress:trunkfrom
Mayank-Tripathi32:try/enhance-67535-add-lightbox-style-toggle

Conversation

@Mayank-Tripathi32
Copy link
Contributor

Attempt to resolve #67535, PR is aimed to explore the possibility.

What?

This PR introduces a toggle for the lightbox feature to conditionally apply styles.

Why?

Styles should only be applied within the site blocks and not inside the Lightbox. Since the Lightbox opens in a modal, there should be an option to disable custom site styles for it.

How?

  • The lightbox attribute is updated to include a new applyStyles property, which defaults to true.
  • If the lightbox feature is enabled, a new toggle option is added to BlockControls.
  • This gives users the flexibility to disable custom styles specifically for Lightbox images.

Testing Instructions

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

Screenshots or screencast

demo.mp4

@github-actions
Copy link

github-actions bot commented Dec 4, 2024

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: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: relic-se <ogrecooper@git.wordpress.org>

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

icon={ formatIndent }
label={ __( 'Apply Custom Styles to lightbox' ) }
onClick={ toggleStylingLightbox }
isActive={ lightbox?.applyStyles ?? false }
Copy link

Choose a reason for hiding this comment

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

In order to maintain existing functionality on existing block-enabled content, the default value should be true if applyStyles is not already available within the lightbox block settings.
Correct me if I'm wrong here in case the default value defined in block.json is used in this situation.

Copy link
Contributor Author

@Mayank-Tripathi32 Mayank-Tripathi32 Dec 4, 2024

Choose a reason for hiding this comment

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

Oh yes, I initially wrote the logic in reverse and then refactored it. I'll update it (though it won't make much of a difference since it defaults to true in block.json). It's fine to leave it as is. This is mainly for visual indication, and since the lightbox can be undefined when inactive, setting it to true might cause issues.

@michalczaplinski michalczaplinski added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block labels Dec 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Image Affects the Image Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image Block retains rounded style within Lightbox

3 participants