-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Search block: Remove unnecessary useEffects #52519
base: trunk
Are you sure you want to change the base?
Conversation
Size Change: -34 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
Flaky tests detected in ece768c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5522563462
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still works as expected and is a nice performance improvement.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isSearchFieldHidden
looks like it's also used for adding wp-block-search__searchfield-hidden
which won't be updated when the block is selected/deselected.
gutenberg/packages/block-library/src/search/style.scss
Lines 97 to 116 in a25cb9d
&.wp-block-search__searchfield-hidden { | |
overflow: hidden; | |
.wp-block-search__inside-wrapper { | |
overflow: hidden; | |
} | |
.wp-block-search__input { | |
width: 0 !important; | |
min-width: 0 !important; | |
padding-left: 0 !important; | |
padding-right: 0 !important; | |
border-left-width: 0 !important; | |
border-right-width: 0 !important; | |
flex-grow: 0; | |
margin: 0; | |
flex-basis: 0; | |
} | |
} | |
} |
^^^ Not sure if this is important (even if it is !important
😉), but I figured I'd mention it.
You're right, we do need to set the attribute. I changed the approach here, but it creates a warning. Not sure what we can do here. I'll close unless someone has an idea :) |
Block attributes shouldn't be based on the Fortunately, it looks like |
If I understand the issue correctly, what about the approach of not using the That is, always display the input field when the block is selected, and only the button otherwise, eliminating the hasOnlyButton && ! isSelected
? 'wp-block-search__searchfield-hidden'
: undefined 12a75b413a14a9af4f7164309d2486d6.mp4 |
3ca85dd
to
739289e
Compare
What?
While looking into #52342 I discovered that we can simplify the code of the search block quite a bit.
Why?
useEffects run every time the component is rendered. We should avoid this for performance reasons if we can.
How?
Rather than triggering this code on every render, I think we can just update the logic about when to show the text field. This is also less code.
Testing Instructions