Prevent jumping of search button#66929
Prevent jumping of search button#66929sarthaknagoshe2002 wants to merge 2 commits intoWordPress:trunkfrom
Conversation
|
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. |
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sarthaknagoshe2002! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
akasunil
added
[Type] Bug
|
Thanks for the PR 🙌 Screen.Recording.2025-06-18.at.1.13.48.PM.movThe fixes suggested by @EldarAgalarov in 70450 might be helpful... |
| } | ||
|
|
||
| .wp-block-search__input { | ||
| transition-duration: 300ms; |
There was a problem hiding this comment.
From my understanding... adding an explicit default width here
| transition-duration: 300ms; | |
| transition-duration: 300ms; | |
| width: 250px; |
And setting flex-basis to 100% for .wp-block-search__input here should help to achieve the desired effect...
There was a problem hiding this comment.
I don't think setting default width is a good idea considering the fact the this block's width can be set by the user manually. Are you sure that the DOM would handle it in the right & efficient way when user set the width of the search block? incase if we agree to this approach then should there be a fallback when enough room is not available for the block?
There was a problem hiding this comment.
From my testing, overrides from dashboard still work. Without explicit width the transition don't seem to work.
But yes it can cause issues when sufficient room isn't available (have to check how the current implementation handles this case)
There was a problem hiding this comment.
If it does not works as expected when enough room is not available then in that case maybe we will have to choose not setting the default width over prioritising the transition, otherwise your suggestion is the best approach that we should proceed with😇
3 participants
Fixes: #52854
What?
When the search box has
change button positionset tobutton onlyand is aligned to the right while having blocks to it left, the search button jumps, highlighted in #52854.This PR fixes this jumping of search button when the search box expands.
How?
Removed
flex-basisproperty from the input box which was making the button jump.Testing Instructions
change button positiontobutton only.Screenshots or screencast
Before
Screen.Recording.2024-11-12.at.5.30.57.PM.mov
After
Screen.Recording.2024-11-12.at.5.31.25.PM.mov