Gutenberg: Where to add JavaScript code for registerBlockStyle()

[dgwyer]

The docs for registerBlockStyle() explain what the function does and it's parameters but not _how_ to add the function to your own code.

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#modifying-blocks

For now I'm just using the jQuery document ready callback function:

jQuery( document ).ready( function( $ ) {
    wp.blocks.registerBlockStyle( 'core/button', { name: 'custom-btn1', label: 'Custom 1' });
} );

Is there an officially recommended way to use registerBlockStyle()? I'm currently writing a Tuts+ tutorial on this so I'd prefer to use the correct method to call this function.

[danielbachhuber]

Flagging Documentation because I think the docs make an assumption of prior knowledge around where to place JavaScript integrations. It'd be helpful if there was a "Getting Started with JavaScript" that walked the end user through how to use the extensibility APIs.

[dgwyer]

Yes please! I'm struggling with some fairly simple examples. In particular the isDefault setting seems to be ignored in my call to registerBlockStyles() which I'm thinking is due to how I'm calling it.

Also, the docs state the unregisterBlockStyles() is available but I'm getting a console error saying function not recognized.

[ocean90]

Also, the docs state the unregisterBlockStyles() is available

unregisterBlockStyles() will be available with 4.2.

[youknowriad]

with #11532 merged, you can now register/unregister styles at any time, the UI will update accordingly, there's not timing issues anymore.

[youknowriad]

I'm reopening in case people want to add some documentation.

[mario-neuhold]

According to #11338 we're still experiencing timing issues fo runregisterBlockStyle() - it's not working in our plugins, but e.g. via Chrome Dev Console the function is working fine. Should we open a dedicated issue on that?

[katerlouis]

Apparently you need to use wp.domReady() to unregister block types– although some issues talked about that this shouldn't be necessary? As usual, it's pretty confusing.

The docs are still highly unreliable; how am I supposed to figure out if I made a mistake or the docs are faulty? By flipping a coin? Vage or misleading docs is one thing, but if the provided example is already not working at all, that's unacceptable.

My suggestion is to remove statements from the docs, which clearly do not work as described, and add them back, once they do.