Plugin Development : wp is not defined | Javascript runs in different theme, but not Sage

sage
1

Hi All,

I’m trying to write a custom Guttenberg block to work with my Sage 10 theme. I need to pull some CPT data to allow users to select which post will have it’s data exposed via the block when in the editor screen.

To pull the posts in when in the editing view I’d like to use a version of this type of javascript:

wp.data.select("core").getEntityRecrods("postType","person",{per_page: -1})

That being said, if I run this in the console I get an error that says:

Uncaught ReferenceError: wp is not defined
    at <anonymous>:1:1

Digging around I’ve read this could be either a plugin or theme conflict and may be related to defered JS loading. I turned off all plugins, that didn’t help.

I finally changed my theme to the standard Twenty Twenty Three theme and the error changes slighting in the console.

I’m now seeing this:

VM388:1 Uncaught TypeError: Cannot read properties of undefined (reading 'select')
    at <anonymous>:1:9

I believe this makes sense because my CPTs are part of the theme. I suspect the Javascript is running but not finding the CPTs.

Back to the original question. Anyone know how to get the javascript code working sage 10? Do I need to add another dependency maybe? or make some other adjustment to not defer JS scripts?

2

This an editor script for the Gutenberg editor, right? How are you enqueuing it, is this at the right place and with the right dependencies?

3

I am trying to pull it in via a dependency in the plugin (NPM). I’m currenlty trying it import the package as part of my block’s index.js file. Here is what I have at the top of my index.js file.

import "./index.scss"
import {useSelect} from "@wordpress/data"

I’ve never done this before, do I maybe need to have a wider scope of that import? Maybe something additional to the {useSelect} statement there? I’m currently following an online tutorial so please pardon my ignorance.

4

The build should already work with this, when you look at the default editor.js:

The error you are showing happens on run-time not on build-time.
wp should be available, but it is not.

Are you enqueueing that script as an editor asset, like Sage does by default for the editor bundle?
https://github.com/roots/sage/blob/40dedd67a54bf2888626f090b7ca65c15cf45222/app/setup.php#L25-L27

5

I have not added any specific “add-action()” statements to enqueue any scripts. I was under the impression that the import in my index.js would handle any access to the scripts I needed.

do i need to add something like

import { registerBlockStyle, unregisterBlockStyle } from '@wordpress/blocks';

At the top of my plugin js file?

6

The script should only import what it is actually needing.

You posted your script:

import "./index.scss"
import {useSelect} from "@wordpress/data"

So it would import useSelect from @wordpress/data.
For wp.data being usable at runtime (where currently your error occurs),
that script must be enqueued as editor script, so that the editor-related variables are available.

7

Thanks for your guidance here. This is helpful. I understand the logic now. This is the first project where I am using NPM to pull in all of the dependencies and I’m new to this. Any suggestions on how I can figure how out which specific js file I need to enqueue to have access to the wp.data pieces? I looked in the @Wordpress director in node-modules and I don’t see nay directory or file that is obviously related. Maybe there is a developer resource that explains this type of stuff somewhere that I am not familiar with?

8

You should be able to get this working by just putting the code into the editor.js (or importing it there).