2

I'm developing a plugin that registers a PluginDocumentSettingPanel in Gutenberg. As this is not a block, I cannot use the register_block_type function to add its assets, so I have to employ the enqueue_block_editor_assets action in its place.

function my_enqueue_block_editor_assets() {

    $dir = dirname( __FILE__ );
    $script_asset_path = "$dir/build/index.asset.php";
    if ( ! file_exists( $script_asset_path ) ) {
        throw new Error(
            'You need to run `npm start` or `npm run build` for the block first.'
        );
    }
    $script_asset = require( $script_asset_path );

    wp_enqueue_script(
        'my-gutenberg-plugin',
        plugins_url( 'build/index.js', __FILE__ ),
        $script_asset['dependencies'],
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
    );

}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

But, using this approach it seems that I cannot use the generated index.asset.php file to load the script dependencies, as I'm getting multiple wp.editor is undefined / wp.coreData is undefined / etc... errors. If I explicitly state ALL the script dependencies using array( 'wp-editor', 'wp-data', etc... ), there are no errors.

Is there a way to use the index.asset.php file with enqueue_block_editor_assets? If so, how?

Improve this question

1 Answer 1

Reset to default
2

Yes you can use the index.asset.php file in the 'enqueue_block_editor_assets' action. I guess you missed to npm install the dependencies you want to use and import them in your script. That's how @wordpress/scripts generates your asset.php file. If you do not import the dependencies in your JavaScript files the dependency management of asset.php wont work.

For example:

npm install @wordpress/api-fetch --save

In your script:

import apiFetch from '@wordpress/api-fetch;

Improve this answer
3
  • So, does this mean that, for example, I have to replace const { useSelect } = wp.data; with import { useSelect } from '@wordpress/data'; ? Commented May 16, 2021 at 17:55
  • 2
    You have to add the import line at the top of your script, yes. You can still use wp.data in your script but you should replace that too because you can profit from code suggestions if you use VS Code or PHP Storm when you use the imported functions. Commented May 16, 2021 at 18:03
  • If you are importing the WordPress modules using the import { useSelect } from '@wordpress/data'; syntax, you should not need to npm install anything. Using that syntax allows wp-scripts to detect which dependencies you need, and map those to the appropriate wp global properties automatically. Put another way, using the import does two things: - Populates the dependencies array in the asset.php so that those bundles will load first - Automatically remaps your import statement into the correct wp.data.... or wp.editor... global reference Commented Mar 4, 2024 at 3:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.