-
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
Extensibility: Defer applying filters for component until it is about to be mounted #4002
Conversation
Looks awesome 👍 |
Indeed, this will help a lot! 👍 |
It looks like you can't subscribe for changes in the filters registry. I pinged @adamsilverstein on Slack to confirm. |
@gziolo would something like this suffice in hooks to enable what you want to do? https://github.com/WordPress/packages/compare/feature/events-on-add-remove?expand=1 |
@adamsilverstein, thanks for sharing this. Yes, I think it might work. It's a pretty nice idea, anyway. Let's add this to I'm merging this PR to make integration easier. I will open a follow-up once we have changes for |
@gziolo I can confirm that I have a problem though doing a very simple thing. I want to add a simple button to the paragraph block. I've managed to do to but I get an error. Here is my code
The error I'm getting is
Any ideas of what might be wrong with my code? |
var element = el( BlockEdit, props ); Did you check if a |
No, |
You should add it yourself to the object passed as props. React needs those keys when using an array as children. It’s very annoying 🙁 |
Unfortunately I'm not able to add it to the |
You should always treat props as an immutable object. It might be exposed as read-only by React. I’m not sure. Object.assign will do the trick for you:
|
Good to know, thanks a lot for you help and your prompt answers. |
My pleasure 😃Extend Gutenberg and prosper! |
@kmgalanakis is your code working? Would you mind sharing the fixes. Tried it on my end and no luck. Thanks! |
@phpbits are you talking about the code that fixes the Following Greg's suggestion I did something like
Let me know if this fixes your issue. |
@kmgalanakis I didn't get the warning but the code doesn't do anything. Tried adding console.log too to check if it's working but it's not. Do you have the updated working one? Thanks! |
@kmgalanakis Sorry! Updated my gutenberg plugin and it's working fine now! Thanks! |
@phpbits I'm glad to hear that! Thanks for letting me know. |
@kmgalanakis I'm trying to modify the code and add elements on the inspector control instead. Would you mind helping me? Thanks! edited: |
@kmgalanakis would you mind if I ask you another question? Do you know how to use |
If I get your question right, you need to do something like
If this is not what you are looking for, please elaborate more. |
@kmgalanakis I'm creating a filter function similar to
So |
Just realize that it's same as your example. I need something like that :) Thanks @kmgalanakis ! |
Then, It should be:
|
@kmgalanakis That's the first I've tried but |
On the root of your project, inside a terminal execute Then, on the top of your script, add You should be good to go. |
@kmgalanakis I'm using ES5 JavaScript and |
Yes, you can simply put all the class names in array and join with a space instead 😃 |
Or even concatenate those strings. |
@gziolo concatenation is giving |
@gziolo and @kmgalanakis I just added the values on Additional CSS Classes field :) Thank you very much! |
Description
Tries to address the issue raised by @kmgalanakis and confirmed by @andreiglingeanu in #3800:
This PR tries to postpone applying filters to all components wrapped with
withFilters
Higher-Order Component until the original component is about to be rendered. In most of the cases, it will happen when the editor is rendered. This should give enough flexibility to make adding filters straightforward.I'm planning to explore if we could also rerender such components whenever filters get added or removed. It might be provided in its own PR.
How Has This Been Tested?
Manually, unit tests.
I tested it by loading Gutenberg and clicking around to make sure everything works without errors.
The best way is to register your own filter in the console which replaces the block and add new block to make sure it works:
You should see sth like:
Checklist: