GutenBricks Events for Gutenberg Editor

Since v1.1

GutenBricks blocks triggers custom events when blocks are loaded. These events are useful if you want to run custom JavaScript within Gutenberg Editor.

These events are only available in Gutenberg Editor and NOT frontend.

gb:block:init

This event is triggered when the block is rendered and initialized with all the editing features. This is when your custom JavaScripts should run.

jQuery(document).on('load gb:block:init', function(event) {
    const { clientId, blockElement, block } = event.detail
    console.log('block is initiated and ready to go', block.blockId);
    
    // you can check if the event is triggered for the specific block
    if (block.blockId === {gb_block_id}) {
        console.log("I'm the block you're looking for!");
    }
});

// OR

// you can use the dynamic data built specifically for event
// you can check out the dynamic data for events below
jQuery(document).on('{gb_event_block_load}', function(event) {
    const { clientId, blockElement, block } = event.detail
    console.log('block is initiated and ready to go', block.blockId);
});

gb:block:removed

Triggered when the block is removed from the editor. You can use this to clean up.

jQuery(document).on('load gb:block:removed', function(event) {
    const { clientId, blockElement, block } = event.detail
    console.log('block removed', block.blockId);
});

gb:block:prerendered

Triggered when the block content is rendered once in the editor. This content doesn't have editing features instantiated yet. Because it is prerender, the DOM elements are deleted after gb:block:init. It is useful, when you want to add custom loading animation.

jQuery(document).on('load gb:block:removed', function(event) {
    const { clientId, blockElement, block } = event.detail
    console.log('block removed', block.blockId);
});

Dynamic Data For Events

GutenBricks provides dynamic data built for events. These events are triggered when a specific block loads, removes and prerenders (meaning renders static block without editing features.) You can use these dynamic events to run JavaScript functions for any blocks inside the Gutenberg editor.

You can use these dynamic data for events

GutenBricks Event: Block Load

Triggered when a block is fully loaded with editing features. In normal circumstances, this is the default event to use.

GutenBricks Event: Block Remove

Triggered when a block is removed from the document DOM. You can use this to clean up JavaScript instances to free up the memory and avoid side effects.

GutenBricks Event: Block Prerender

Triggered when the static block is rendered. The static DOM elements lasts very shortly. So we recommend you not to use this to modify element DOMs. Instead you can use it to pre-load any important functions for the block.

What's inside event.detail

clientId

A unique ID for the block

domElement

The dom element of the block rendered

block

GutenBricks block object