Image: Fix design of close button for the lightbox (correct PR) #51206
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
artemiomorales
force-pushed
the
fix/lightbox-close-button-design
branch
from
252521c to
85182b5
Compare
The lightbox will now load the original image when opened; the src attribute is set dynamically so it will not be unnecessarily loaded by the browser. In addition, removed the padding and hid the caption.
artemiomorales
force-pushed
the
fix/lightbox-close-button-design
branch
from
85182b5 to
2850a77
Compare
SantosGuillamot
approved these changes
Jun 5, 2023
There was a problem hiding this comment.
It looks good to me 🙂 It seems to solve the mentioned issues, and it matches the design shared here.
I just left a couple of minor comments.
|
@SantosGuillamot Thanks for the review! I removed the obsolete code 👍 |
This was referenced Jun 6, 2023
ndiego
added
[Feature] Interactivity API
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…Press#51206) * Revise CSS to contain images within overlay properly * Set horizontal images to occupy space of container * Make square images fit by height rather than expand to full width * Revise so lightbox loads original image; remove padding and hide caption The lightbox will now load the original image when opened; the src attribute is set dynamically so it will not be unnecessarily loaded by the browser. In addition, removed the padding and hid the caption. * Fix PHP spacing for linter * Fix test; image src is now only set after lightbox opens * Improve styles for lightbox close button * Fix PHP spacing for linter * Darken the scrim * Remove obsolte code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR changes the design of the close button in the lightbox so that it is easily visible at all times.
Additionally, it ensures the image is contained within the lightbox so that the close button design is implemented as closely as possible.
Why?
Fixes #51126, wherein the close button was appearing on top of images and was hard to see in cases where the image was dark, and also fixes #51125, #51170, and #51171 as a part of those changes.
How?
It rebases on top of and replaces #51164 to make use of those fixes, then uses and sets the close button color to be the theme contrast color, adds padding, and makes the close button smaller.
Testing Instructions
wp_get_global_styles: return values instead of CSS Custom Properties #49712, but you can experiment with changing theme styles.)Testing Instructions for Keyboard