getBlockVariations(…) is undefined in Widget and Template Part editors but not Post Editor

Question

I'm using this technique to hide various embed blocks:

wp.domReady( function() {

    /*
     * Hide Embed Variations
     */
    wp.blocks.getBlockVariations('core/embed').forEach(function (embed) {

        // loop through a bunch of embeds

    });

});

The file with that script is registered and enqueued like this:

<?php
wp_register_script(
    'block-editor-js',
    plugins_url( 'js/block-editor.js', dirname(__FILE__) ),
    array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
);

wp_localize_script(
    'block-editor-js',
    'editorOptions',
    [ /* some values */ ]
);

wp_enqueue_script( 'block-editor-js' );

This works as expected in the block editor!

It does not work in the block-based widget editor or the template part editor. In Firefox in both cases, I get the following error:

Uncaught TypeError: wp.blocks.getBlockVariations(...) is undefined

I am totally flummoxed as to what the issue is. My two guesses are that I need some additional dependencies on the pages that break or that domReady is too early and I need to hook onto somewhere later.

Any help will be greatly appreciated!

Answer 1

Here's why did you get an undefined

The function itself was defined, but the function call (wp.blocks.getBlockVariations( 'core/embed' )) returned an undefined because by the time that you called the function, the block/Gutenberg editor had not yet been initialized.

Hence, undefined was returned instead of an array of block variations, because core block types like Embed had not yet been registered — and if you had called wp.blocks.getBlockTypes(), you'd see that core/embed is not in the list.

How to ensure your code runs properly

WordPress uses wp_add_inline_script() to add an inline script which calls the function that initializes the editor, so you need to add the same dependency passed to wp_add_inline_script(), which is the 1st parameter, to your script's dependencies ( the 3rd parameter for wp_register_script() ):

• For the block-based post editor, the dependency is wp-edit-post which will load wp-includes/js/dist/edit-post.js that defines wp.editPost.initializeEditor() and is used to initialize the block-based post editor.

  See source on GitHub: wp-admin/edit-form-blocks.php, line 303 and line 290

• For the block-based widgets editor, the dependency is wp-edit-widgets which will load wp-includes/js/dist/edit-widgets.js that defines wp.editWidgets.initialize() and is used to initialize the block-based widgets editor.

  See source on GitHub: wp-admin/widgets-form-blocks.php, lines 38-46

• For the Site Editor, the dependency is wp-edit-site which will load wp-includes/js/dist/edit-site.js that defines wp.editSite.initializeEditor() and is used to initialize the Site Editor.

  See source on GitHub: wp-admin/site-editor.php, lines 120-128

So, just add either wp-edit-post, wp-edit-widgets or wp-edit-site to your script's dependencies, depending on the current admin page, or the editor type (post/widgets/site).

That way, the editor initialization function would already be defined and called when you call wp.blocks.getBlockVariations() and thus, you'd get the proper result.

Working Example

$deps = array( 'wp-blocks', 'wp-dom-ready' );

global $pagenow;
// If we're on the Widgets admin page, add wp-edit-widgets to the dependencies.
if ( 'widgets.php' === $pagenow ) {
    $deps[] = 'wp-edit-widgets';
// If we're on the Site Editor admin page, add wp-edit-site to the dependencies.
} elseif ( 'site-editor.php' === $pagenow ) {
    $deps[] = 'wp-edit-site';
// If we're on the post/Page/CPT editing screen (e.g. at wp-admin/post.php), add
// wp-edit-post to the dependencies.
} else {
    $deps[] = 'wp-edit-post';
}

wp_register_script(
    'block-editor-js',
    plugins_url( 'js/block-editor.js', dirname(__FILE__) ),
    $deps
);

Notes

• I used the enqueue_block_editor_assets action/hook to run the above code.

• The minified version of the JS files mentioned above, where the file name ends with .min.js, will be loaded instead when script debugging is not enabled.