Support » Developing with WordPress » Use Hooks in Gutenberg

Use Hooks in Gutenberg

  • kabir93

    (@kabir93)


    1 week ago

    I am creating custom block in gutenberg using npx @wordpress/create-block, and I need to use hooks in my save.js file, how to do that?

    Second, I need to use external react packages e.g react-slider in my save.js file, how to do that?

    Third, How would I select element by using raw javascript e.g querySelector? When I try to do that, it gives me null. Why and How to solve this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • goodmassage4u

    (@goodmassage4u)

    4 days, 3 hours ago

    To utilize hooks in your Gutenberg custom block’s save.js file, you can import wp.element and access the necessary hooks like useState or useEffect.

    For external React packages like react-slider, you’ll first need to install it using a package manager like npm or yarn. Then, import and use the component within your save.js file. As for selecting elements using raw JavaScript like querySelector, ensure that the element you’re trying to select exists in the DOM at the time of the selection.

    Double-check the element’s existence, and consider triggering your script after the DOM has fully loaded. If the issue persists, review your HTML structure or ensure that the JavaScript code is running at the appropriate time in the Gutenberg lifecycle.

    Thread Starter kabir93

    (@kabir93)

    1 day, 16 hours ago

    @goodmassage4u

    Using hooks and react packages like this way works in edit.js file, but when I try to implement that on save.js file then it gives me an error,

    react-dom.min.js?ver=18.2.0:10 Error: Minified React error #321
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Views