3

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!

1 Answer 1

2

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

0

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.