-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Add props to withFilters #10195
Add props to withFilters #10195
Conversation
@@ -28,6 +28,7 @@ export default function withFilters( hookName ) { | |||
/** @inheritdoc */ | |||
constructor( props ) { | |||
super( props ); | |||
this.ComponentProps = applyFilters( hookName + 'Props', props ); |
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.
I think this should be called also inside throttledForceUpdate
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.
good point - thanks for the feedback - addressed in 08f27c3. If you think this might be something we would adopt, I can take a pass at adding some tests.
Not sure why the test is failing? Any other feedback/ideas for this PR? |
I still this PR its valuable on its own to make |
What's the status for this PR. Can it be ready for 4.2? |
I will update it and land on Monday. We no longer need to apply changes to publish components but having a way to filter props might simplify a few things. |
I hope to get back to it tomorrow. 4.2-RC1 is out so I should have some time to take care of it. |
@gziolo let me know if you need any testing on your updated approach! |
I'm coming to the conclusion that we could achieve a similar result by using the existing logic as follows: import { withFilters } from '@wordpress/components';
import { addFilter } from '@wordpress/hooks';
const MyComponent = ( { hint, title } ) => (
<div>
<h1>{ title }</h1>
<p>{ hint }</p>
</div>
);
const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
addFilter(
'MyHookName',
'example/filtered-component',
( FilteredComponent ) => ( props ) => (
<FilteredComponent
{ ...props }
hint="Overriden hint"
/>
)
); This way you wouldn't have to introduce a new filter but still, you would be able to override one of the existing props. Let me know if that makes sense. |
@gziolo That does make sense, although it took a while to sink in what the code does. Seems like it would be worth documenting this approach if it isn;t already, at the very least adding your example so developers know how that can filter props. |
Docs updated in #11313. Let's continue there. I'm closing this one. Thanks @adamsilverstein for starting this discussion. I didn't come up with this idea earlier, but now it should be more clear with the proposed changes to the documentation. |
Description
Another potential solution to #7020 this PR enhances the
withFilters
higher order component to also run the components props thru a filter. This enables filtering of the props passed to a filtered component and in the case of the publish buttons would allow developers to filter theisSavable
prop. As with other filters applied withwithFilters
the component receives a forced update when a filter is added or removed.How has this been tested?
I didn't get very far with testing yet, this is a POC so far.
Screenshots
Types of changes
withFilters
using a new filter that is 'FilterName' + 'Props' (filtername is passed to the function)Checklist: