GutenBricks
  • ๐Ÿš€ Getting Started
    • Next: Common Troubleshooting Issues
    • Next: Configure Page Template to render
    • Next: Manage Block using Template Bundles
    • ๐Ÿค”Most common troubleshooting step
  • ๐ŸŒŸFeatures
    • Working with Elements
    • Variants
    • InnerBlock
    • Fine-Tune Text Editing
    • Dynamic Class
    • Code Block with Dynamic Data
    • ๐Ÿ’กQuick Tips
      • Dynamic Short Code
      • Accordion Block using InnerBlock
    • โšกAdvanced
      • Custom Block HTML ID
      • Value Binding (coming soon)
      • Creating "comments and docs" inside a template
      • Globally Updating Block Styles
      • Block Wrapper Dynamic Class
      • Working with WPML or Polylang
  • ๐Ÿ€Dynamic Data
    • GB:Meta
    • ACF
      • Setting Up ACF
      • Post Object Field (in-progress)
    • Meta Box
      • Setting Up Meta Box (In-progress)
      • Post Field (in-progress)
    • Built-in GutenBricks Dynamic Data
  • ๐ŸฐClient Experience
    • Documenting Blocks
    • Custom Block Preview
    • Custom Pop-up Text
    • Default Page Template
  • ๐Ÿ› ๏ธCustomizing Gutenberg
    • Gutenberg Editor Custom CSS
      • CSS Snippet: Make the block section not full height for ACSS
  • ๐ŸคนResources
    • ๐Ÿ‘ฉโ€๐Ÿ’ป Developer API
      • echo:gb_current_element_id returns unique ID
      • GutenBricks Events for Gutenberg Editor
      • gb_get_field()
      • Unique IDs
      • Filter: gutenbricks_bricks_theme_name
    • ๐Ÿ”Œ Third Party Integrations
      • ACSS integration with GutenBricks
        • ACSS 2.8.0 Section padding missing
      • ACF / Meta Box integration
    • โค๏ธ Our Approach and Philosophy
  • ๐Ÿ“– Changelog
    • Known issues and bugs
    • Current Changelog
    • Past Changelog
      • v1.1-RC (Released as v1.1.0)
      • v1.0-RC (Released as v1.0)
Powered by GitBook
On this page
  • Dynamic Data For Events
  • What's inside event.detail
  1. Resources
  2. ๐Ÿ‘ฉโ€๐Ÿ’ป Developer API

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.

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

Previousecho:gb_current_element_id returns unique IDNextgb_get_field()

Last updated 7 months ago

๐Ÿคน
You can use these dynamic data for events