-
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
Composite: remove store prop and useCompositeStore hook #64723
Conversation
2946983
to
d68c3e1
Compare
Size Change: -301 B (-0.02%) Total Size: 1.78 MB
ℹ️ View Unchanged
|
packages/block-editor/src/components/block-patterns-list/index.js
Outdated
Show resolved
Hide resolved
packages/components/src/circular-option-picker/circular-option-picker.tsx
Outdated
Show resolved
Hide resolved
packages/dataviews/src/components/dataviews-filters/search-widget.tsx
Outdated
Show resolved
Hide resolved
@WordPress/gutenberg-components can you take a look at the proposed approach? If we agree on moving forward, I'll tackle the missing changes and make it ready to review properly. |
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.
The approach seems very sensible for the most part 👍
It appears we might need to expose some additional utilities to work with parts of the store, instead of the entire store as is currently necessary in dataviews.
If we continue to work directly with the store in dataviews, it feels like we're defeating the purpose of concealing the store prop in the first place. Would be nice if we can explore some alternatives, and expose only parts of the store that we'll actually need.
Would love to hear feedback from @mirka as well.
packages/block-directory/src/components/downloadable-blocks-list/index.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/block-patterns-list/index.js
Outdated
Show resolved
Hide resolved
packages/components/src/circular-option-picker/circular-option-picker-option.tsx
Outdated
Show resolved
Hide resolved
packages/dataviews/src/components/dataviews-filters/search-widget.tsx
Outdated
Show resolved
Hide resolved
Ideally, I'd like to find ways for consumers of the component to achieve the desired behaviour without the need for the For example:
I'll see if I can apply these ideas into practice in this PR |
ba27ce2
to
25dc6da
Compare
I pushed a few commits where I refactored some of the the most involved usages of the composite store — they now rely on controlling the There are still some usages left (and one usage to polish), but I'd say that this is looking promising and I think that we may be able to move away from using |
c63db73
to
1a7d717
Compare
packages/components/src/circular-option-picker/circular-option-picker-option.tsx
Outdated
Show resolved
Hide resolved
@WordPress/gutenberg-components I'd appreciate some feedback on this approach, as it's currently blocking any further progress on stabilizing |
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'm assuming we're doing more in-depth reviews in the partial PRs later, but at a high-level this certainly looks viable. I'm still worried about when we'll need any of the store methods, but it seems ok for now?
packages/dataviews/src/components/dataviews-filters/search-widget.tsx
Outdated
Show resolved
Hide resolved
packages/dataviews/src/components/dataviews-filters/search-widget.tsx
Outdated
Show resolved
Hide resolved
packages/dataviews/src/components/dataviews-filters/search-widget.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/circular-option-picker/circular-option-picker-option.tsx
Outdated
Show resolved
Hide resolved
Thank you, @mirka! There seems to be consensus around moving forward with this approach. [EDIT: the list was moved to the PR description for better discovery] Once all of the above are merged, I can rebase this PR including only changes to |
Thanks for working on it @ciampo 👍 the approach makes sense to me as well. Will take a look at the more focused PRs. |
a2fe333
to
1d9e82c
Compare
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. |
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.
Beautiful, great work on this! The rtl
thing can be kicked to a follow-up, by the way.
/** | ||
* The component store, used for advanced usage of the component. | ||
*/ | ||
store?: unknown; |
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.
Sorry if this was already discussed somewhere — why is this unknown
now? Might need a code comment since it was non-obvious to me.
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 it was discussed in one of the (many) inline comments, definitely quite easy to miss 😅
We thought that, in order to discourage store
usage, we'd change the type to unknown
— which still allows TypeScript to correctly validate scenarios like context forwarding (check the "With Slot Fill" example), but it wouldn't give insight into what store
is and does.
I added a comment for now to clarify.
What do you think? Too much?
Happy to make changes in a follow-up.
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.
Ok, I see 😂
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.
Love this CSF 3 refactor ❤️
Great to see this one land! 🚀 |
What?
Remove the
useCompositeStore
export and thestore
prop from theComposite
componentWhy?
See #63704 (comment)
How?
useCompositeStore
from the component's exported APIs;store
prop from theComposite
component;store
prop fromComposite.Context
;All usages of the
useCompositeStore
hook and thestore
prop were removed in separate PRs:Testing Instructions
No runtime changes, apart from this one.
useCompositeStore
left, apart from theComposite
component itself;store
prop toComposite
or its sub-components;Composite
's Storybook docs are up to date and the examples work as expected;useCompositeStore
anymore)