-
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
Components: Move kebabCase() function from block-editor package and mark it as private API #56758
Conversation
…ark it as private API
Size Change: -152 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
Flaky tests detected in 102e985. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7189905886
|
As mentioned in this comment, I am trying to move the
However, the Mobile Unit Test is failing and I haven't been able to resolve it yet. If you know anything about this please let me know 🙏 |
Yes, this is because we have two separate versions of the components package - one for web and one for React Native. Then the web one exports the private APIs: gutenberg/packages/components/src/index.ts Line 222 in 1c2f437
But the mobile one doesn't: To resolve this, you'll have to start exporting the private APIs from the mobile version, just like it's done for the editor package: Let me know if that helps! |
Thanks for the advice, @tyxla. Oddly enough, this PR already exports private APIs for React Native. Additionally, a |
Ah, I missed that you already tried that. Okay, it seems like something is off with how the native version is handling imports. I think I've seen something similar and we fixed it by unlocking later, when all modules are properly loaded by RN. Will look for a reference. In the meantime I've pushed a couple of commits that aim to directly utilize It works in my local tests, let's see whether everything is green and let me know whether it works for you too. |
Looks like this resolved the mobile test issues as expected. |
Thank you! My local tests now also pass 👍 |
I'd also like to cc @ciampo and the rest of the @WordPress/gutenberg-components team since they maintain the |
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.
Furthermore, I used the opportunity to add a --watch
mode for RN tests in #56788 if you're interested in taking a look.
packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
Show resolved
Hide resolved
As a follow-up, if this PR is merged, I will also replace the proprietary |
Will leave the final approval to @ciampo since I've also contributed a fair amount to this PR 😅 |
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.
🚀 Thank you all for working on this!
Native e2e are failing but at a first glance it didn't seem related. I triggered a re-run.
Is components the right package for this? It's not a component? Nor really a component util but rather a very general util? |
I see your point. For more context, this decision was discussed in #56713 (comment) What package would be a better fit, in your opinion? |
I agree it's not the best fit, but neither was the block editor package before that. IMHO, ideally, we should either have a general utility package or use an external package, which could be what we do in the future with such utilities. I'm happy to move it to somewhere else if you feel there is a better fit. |
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
…ark it as private API (#56758) * Components: Move kebabCase() function from block-editor package and mark it as private API * Update changelog * Fix native app test * Try to fix native app test * Try to fix mobile app test * Try importing kebabCase directly from components * Fix another import * Move changelog entry to Internal section * Change the argument type of kebabCase function to unknown * Fix lint error * Merge duplicate Internal sections * Remove type info in the JSDoc comment --------- Co-authored-by: Marin Atanasov <[email protected]>
See this discussion for information on why this PR was submitted: #56713 (comment)
What?
This PR moves the
kebabCase
function, a utility function that exists in theblock-editor
package, to thecomponents
package and marks it as a private API.Why?
This function is used to separate words with hyphens. This function is equivalent to WP Core's _wp_to_kebab_case() function and also takes numbers into account.
On the other hand, the
kebabCase()
function (originally theparamCase()
function) imported from the externalchange-case
package does not consider numbers. As a result, as reported in #55587, due to different kebab-case rules, there may be an issue where CSS variable names do not match.How?
To make the
kebabCase()
function that the block editor package has available to many packages, including the component package itself, I moved it to the component package and marked it as a private API.For backwards compatibility, the block editor package's
kebabCase()
function remains and internally references the component package's private API.Testing Instructions
Since I just moved the function, the logic remains the same and there should be no build errors or test failures.