Skip to content
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

Refactors Gutenberg Feature #870

Merged

Conversation

jomurgel
Copy link
Contributor

@jomurgel jomurgel commented Sep 14, 2022

Closes: #868

  • Refactors the Gutenberg plugin to use modern WP JavaScript standards.
  • Removes use of legacy functions withState, withDispatch, withSelect.
  • Restructures src directory and breaks out and documents components.
  • Improves fetch performance.
  • Updates and includes necessary dependencies.
    • Updates the @wordpress/scripts package and updates the package.json script for formatting.

NOTE: The giant diff is a result of the package-lock.json file.

Copy link
Contributor

@leogermani leogermani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution!

I'm unable to test it, when I checkout this branch I get an error on the console when trying to interact with the sidebar element:

Uncaught TypeError: l.useSelect(...) is not iterable

Can you verify if everything is in place or maybe update the PR with some test instructions if any additional step is needed?

Thanks!

src/components/author-selection/README.md Outdated Show resolved Hide resolved
@jomurgel
Copy link
Contributor Author

jomurgel commented Nov 2, 2022

@leogermani are you able to give me a little more information about where that error occurs in the code or if the console gives you any additional context? I did make one update in which I could see an error being thrown, but I double-checked my code and I was not able to replicate that error.

Do you have coauthors (guest authors) on your WP install for testing, or is it an empty author set? Perhaps if my fix does not solve that problem and that is the case I can re-check with zero coauthors.

@leogermani
Copy link
Contributor

Uncaught TypeError: l.useSelect(...) is not iterable

S@https://leogermani.jurassic.tube/wp-content/plugins/Co-Authors-Plus/build/index.js?ver=bb6ab69775bc015b8da7:1:3653
renderWithHooks@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:15015:29
mountIndeterminateComponent@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:17841:15
beginWork@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:19079:18
callCallback@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3942:16
invokeGuardedCallbackDev@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3991:18
invokeGuardedCallback@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:4053:33
beginWork$1@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23994:30
performUnitOfWork@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22806:14
workLoopSync@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22737:24
renderRootSync@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22700:9
performSyncWorkOnRoot@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22323:20
flushSyncCallbackQueueImpl/<@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11357:28
unstable_runWithPriority@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764:14
runWithPriority$1@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306:12
flushSyncCallbackQueueImpl@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11352:28
flushSyncCallbackQueue@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11339:5
discreteUpdates$1@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22450:11
discreteUpdates@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3753:14
dispatchDiscreteEvent@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:5919:20
EventListener.handleEvent*addEventBubbleListener@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:6041:12
addTrappedEventListener@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:8441:31
listenToNativeEvent@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:8404:30
listenToAllSupportedEvents/<@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:8356:30
listenToAllSupportedEvents@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:8354:23
createRootImpl@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:25917:33
ReactDOMBlockingRoot@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:25865:26
createLegacyRoot@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:25930:12
legacyCreateRootFromDOMContainer@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:26011:12
legacyRenderSubtreeIntoContainer@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:26037:46
render@https://leogermani.jurassic.tube/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:26133:12
initializeEditor@https://leogermani.jurassic.tube/wp-includes/js/dist/edit-post.js?ver=1061d7ff888412c29dbd:9764:49
window._wpLoadBlockEditor</<@https://leogermani.jurassic.tube/wp-admin/post-new.php:319:25
EventListener.handleEvent*domReady@https://leogermani.jurassic.tube/wp-includes/js/dist/dom-ready.js?ver=7c25017459f1da90355d:71:12
window._wpLoadBlockEditor<@https://leogermani.jurassic.tube/wp-admin/post-new.php:318:6
@https://leogermani.jurassic.tube/wp-admin/post-new.php:317:30
@https://leogermani.jurassic.tube/wp-admin/post-new.php:322:4
The above error occurred in the <S> component:

Tested in 2 different sites. One with Guest Authors and one without...

I'm running npm install and npm run build.

Maybe some missing build step?

@jomurgel
Copy link
Contributor Author

@leogermani thanks for the info. I was able to replicate, resolve the failure, and retest with a fresh install. Please let me know if you continue to have the issue.

@elliott-stocks
Copy link

To help with performance could we consider only performing the fetch when there's > 2 characters entered in the search field?

A fetch is also performed on every key press, a delay of ~500ms would help reduce the number of unnecessary network calls.

@jomurgel
Copy link
Contributor Author

@elliott-stocks that's probably a good idea. I've made an update that allows this with a threshold of 2 added with an optional filter for modification.

Copy link
Contributor

@leogermani leogermani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It tests well for me, I only fixed the threshold check in f4cfa7a

On testing the feature, I noticed a few glitches and things we could improve, but nothing that was added by this PR, so let's not block it by these improvements.

In particular, we could have a debounce so we don't trigger multiple request while typing a user name

@rebeccahum rebeccahum merged commit e6c6467 into Automattic:master Jan 16, 2023
@elliott-stocks
Copy link

elliott-stocks commented Jan 16, 2023

@leogermani @jomurgel As I was testing this I noticed that any changes to authors are reflected instantly, prior to saving the post. Is this a bug? I wouldn't expect any edits in the editor to take effect until I've saved the post.

Previously the updates were handled within subscribe() and checking for isSavingPost(), however, with this change the updates are within useEffect() instead.

Happy to provide additional info if needed.

@leogermani
Copy link
Contributor

@elliott-stocks

I confirm there was a change in this behavior.

But I also confirmed there was a bug in the previous implementation: Even though things were supposed to only be saved when you saved the post, the authors update was also triggered by an auto-save (in theory, auto saves are not applied to the post, it's saved separately)

Considering this, maybe this is not a regression, but making it more explicit on how this works.

What do you think @rebeccahum ?

If in doubt, we can always revert it.

@rebeccahum
Copy link
Contributor

@leogermani This feels like a regression to me, as any changes shouldn't be saved until the post has been saved. Is it possible to patch it to use isSavingPost()?

@leogermani
Copy link
Contributor

This feels like a regression to me, as any changes shouldn't be saved until the post has been saved.

Agree, but note that this already happens in a much more non explicit way, in the form of a bug. If you want to confirm this:

  • Checkout a commit before this PR was merged and build
  • Edit a post
  • Make a change to the authors but do not save the post
  • keep editing the post until you see an auto-save being triggered
  • at this point, the authors will be update against your will

Is it possible to patch it to use isSavingPost()?

It's definitely possible, but on a quick attempt I encountered some other issues, so this would require more time I'm afraid. (until this day, there is not a straight forward way to trigger a callback when a post is saved - WordPress/gutenberg#17632 )

Maybe it's worth reverting this and taking some more time.

@rebeccahum
Copy link
Contributor

I think it's worth reverting and sleeping on since I would prefer not to introduce a (further) regression.

@elliott-stocks
Copy link

Is it possible to patch it to use isSavingPost()?

@leogermani We recently implemented a fix for this on our fork - eupolitico@230b1f3.

That's based on the same PR, so it should work in this case - but let me know if not.

(Thanks to to @Ritesh-patel).

@rebeccahum
Copy link
Contributor

@elliott-stocks Did you want to make a PR for that fix?

@leogermani
Copy link
Contributor

This implements the above patch. Works well for me

#914

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

withState being _hard_ deprecated in WP 6.2
4 participants