Details Block: remove overflow:hidden style
#60270
Merged
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
t-hamano
added
[Type] Bug
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -18 B (0%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
|
Thanks for opening the issue and creating a PR! The overflow was originally hidden to "fix background clipping": If hiding the overflow is necessary, I can think of a few other possibilities to try.
|
Thank you for finding that! That commit appears to be part of #45055, where the first Details block was added. When this block was first added, it was divided into three blocks: Details, Details Summary and Details Content. My understanding is that the
So it looks like the style is meant to solve the problem shown in the screenshot in this comment. However, the current Details block is a single block and cannot have a background color applied to the Summary element or Content, so this issue should not occur. In fact, the same problem can be reproduced if we delete
Therefore, in #49808, when the Details block was merged into one, it seems that radius support was removed to avoid causing this problem, at least in the Details block. Taking these into account, it seems safe to remove @carolinan Are there any concerns about removing this style? |
carolinan
approved these changes
Apr 4, 2024
|
@carolinan Thanks for the review! @sabernhardt I would like to merge this PR as I don't think it is necessary to hide the overflow in the current implementation. |
|
in which directory and file i have to do these changes, please provide the path. iam facing the same problem rectangualr box around links or any clickable element, including detail block |
|
@abhisin Hi, Could you please tell me more details? This PR about the Details block itself has already been merged, so it should automatically ship to future WordPress major versions. If what you want to solve is not limited to the Details block, it might be better to open a new issue. |
cbravobernal
pushed a commit
to garridinsi/gutenberg
that referenced
this pull request
Apr 9, 2024
Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: sabernhardt <sabernhardt@git.wordpress.org>
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.
Fixes #60269
What?
This PR removes the
overflow: hiddenapplied to the Details block. This will eliminate the unnatural outline when thesummaryelement is focused, as reported in #60269.This is a screenshot in TT4.
Summary element is focused
When content is open
Why?
To avoid cutting off the focus outline. Especially when the focus style is customized, like in Twenty Twenty-Four, the focus outline can disappear completely or the outline of certain sides can disappear.
How?
I simply deleted
overflow: hidden. As far as I've tested, this doesn't cause any problems. I also looked into #45055 and #49808 and couldn't find any reason why this style was explicitly applied either.Testing Instructions for Keyboard