Fix image layout shift from placeholder to selected placeholder #59857
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
jasmussen
added
the
[Type] Regression
jasmussen
requested review from
ajitbohra,
artemiomorales and
michalczaplinski
as code owners
|
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. |
fabiankaegy
reviewed
Mar 14, 2024
| @@ -212,7 +212,7 @@ | |||
|
|
|||
| // By painting the borders here, we enable them to be replaced by the Border control. | |||
| @include placeholder-style(); | |||
| overflow: auto; | |||
| overflow: hidden; | |||
There was a problem hiding this comment.
Overflow hidden seems risky here as it could cause some controls to be inaccessible via the UI 🤔
Would it make sense to only apply overflow hidden when the block is not selected/reset it to auto when the block is selected?
There was a problem hiding this comment.
They are already hidden in the UI, this is not accessible in any way shape or form:
This is why we've increasingly been careful about using the generic Placeholder pattern, and in fact why the Site Logo and Featured Image placeholders are patterns to follow for the best results, rather than the existing component. Those feature only a single button, acknowledging the fact that so long as you can insert a block into a colum that's 50x50px, they simply need to scale. There's a bit more discussion here: #58685 (comment)
I hear you though, there may be a larger refactor necessary of the image block component. Perhaps #59275 can lead the way?
Alternatively I'd recommend a revert of the original PR to fix it.
There was a problem hiding this comment.
Yeah in the screenshot you have there it is a very subpar experience. But technically (and I know because I had to fight this a few times already) you can still scroll the area and find what you are looking for.
I would love a refactor of this. But I think an immediate fix would be to only apply the
overflow: hidden when the block is not selected. That would still prevent the layout shift but still retain the ability to scroll this area here
There was a problem hiding this comment.
I would love a refactor of this. But I think an immediate fix would be to only apply the overflow: hidden when the block is not selected. That would still prevent the layout shift but still retain the ability to scroll this area here
I have to temporarily move on to a separate thing, but good point, I can try this later. Otherwise if you're up for it feel free to push directly to the branch.
There was a problem hiding this comment.
Seems to work, what do you think?
|
Size Change: -29 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in bd2091e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8277502618
|
fabiankaegy
approved these changes
Mar 14, 2024
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Mar 27, 2024
…Press#59857) * Fix image layout shift from placeholder to selected placeholder * Only when not selected. * Update changelog.
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?
Alternative to #59305. Still fixes #59226.
The original fix caused the unselected image block placeholder to collapse in height, so there's a layout shift between selected and unselected states:
For reference, before it would look like this, without the layout shift:
This was caused by hiding the fieldset when the block was unselected. This PR hides overflow instead. First, removing the original fix restored the scrollbars:
The overflow rule hides them again:
Why?
Selecting and deselecting blocks should not cause layout shifts.
Testing Instructions