Gutenberg: Request to document how to declare dependency to to things like wp-element and wp-data so wp.data.select('core/editor') is not undefined while editor starts

[websupporter]

Describe the bug
Using wp.data.select('core/editor').getBlocks() or other methods of core/editor in the wp.data.subscribe() ends up in a white screen, when opening the editor. typeof wp.data.select('core/editor') returns at some point of the startup undefined.

To Reproduce
Steps to reproduce the behavior:

1. Activate the following plugin:

_plugin.php:_

<?php
/**
 * Plugin Name: Test
 */
add_action('enqueue_block_editor_assets', 'test_script');
function test_script() {
    wp_enqueue_script(
        'script',
        plugins_url( '/script.js', __FILE__ ),
        array( 'wp-data' )
    );
}

_script.js:_

wp.data.subscribe(
    () => {
        console.log(wp.data.select('core/editor').getBlocks().length);
    }
);

1. open editor
2. see white screen.

Expected behavior
The editor should show up and the number of blocks should be printed correctly in the console.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 14.04
• Browser Chrome / Firefox

Additional context

• WordPress 5.0.3

[youknowriad]

If you use the editor store, make sure you add wp-editor as a script dependency, that's where the editor store gets defined.

Good luck.

[websupporter]

Thank you @youknowriad :heart:

[designsimply]

Noting the relevant handbook documentation for reference: https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/#enqueuing-block-scripts (partly so I can remember to look at this myself in case I find this later 🙂).

[websupporter]

@designsimply for me I think the problem was or is: I understand, when I want to use some functionality from the wp.element object I have to declare dependency to wp-element. So, when I want to use wp.data.select() I depend on wp-data.

To me the new information was that using data stores also brings me into dependencies like in this case. If you want to use the core/editor data store, you depend on wp-editor. A good place for such an information would be in my opinion on the documentation of the data store, so for core/editor here https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/data/data-core-editor.md or for core/notices here https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/data/data-core-notices.md (if there is any dependency for the notices store)...

Thank you all for your great work.

[designsimply]

Thanks! This is helpful to me!

[designsimply]

Re-opening as a documentation request to help make this more clear, perhaps in the JavaScript tutorial or in the places @websupporter noted. 🙂