Hooks - JavaScript

Last modified: April 17 2024.

Besides PHP hooks, Blockstudio also provides JavaScript events to manipulate values and blocks inside the editor.

Since events are tied to block names and attribute IDs, we will use namespace/my-block as the name in the following examples. Of course, you will need to replace it with your own block name.

Blocks

refresh

This event can be dispatched to refresh blocks.

script-editor.js


            const RefreshEvent = new CustomEvent('blockstudio/namespace/my-block/refresh');
    document.dispatchEvent(RefreshEvent);

      Copy

loaded

This event is dispatched when the blocks are loaded. It can be used to initialise code once the block has loaded in the editor.

script-editor.js


            document.addEventListener('blockstudio/namespace/my-block/loaded', function() {
      console.log('my-block loaded');
    });

      Copy

Alternatively, you can listen to all blocks.

script-editor.js


            document.addEventListener('blockstudio/loaded', function() {
      console.log('my-block loaded');
    });

      Copy

rendered

This event is dispatched when the blocks are rendered. It can be used to initialise code once the block has rendered in the editor.

script-editor.js


            document.addEventListener('blockstudio/namespace/my-block/rendered', function() {
      console.log('my-block rendered');
    });

      Copy

Alternatively, you can listen to all blocks.

script-editor.js


            document.addEventListener('blockstudio/rendered', function() {
      console.log('my-block rendered');
    });

      Copy

Attributes

update

This event is dispatched when an attribute is updated. For this example we will imagine a text field with the ID of text.

script-editor.js


            document.addEventListener('blockstudio/namespace/my-block/attributes/text/update', function (event) {
      const {
        attribute,
        attributes,
        block,
        value,
        clientId,
        repeaterId
      } = event.detail;
    });

      Copy

Alternatively, you can listen to all attribute updates.

script-editor.js


            document.addEventListener('blockstudio/attributes/update', function (event) {
      const {
        attribute,
        attributes,
        block,
        value,
        clientId,
        repeaterId
      } = event.detail;
    });

      Copy

Example

block.json


            {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "blockstudio/events",
      "title": "Native Events",
      "category": "blockstudio-test-native",
      "icon": "star-filled",
      "description": "Native Blockstudio Events block.",
      "blockstudio": {
        "attributes": [
          {
            "id": "select",
            "type": "select",
            "label": "Layouts",
            "options": [
              {
                "value": "layout-1",
                "label": "Layout 1"
              },
              {
                "value": "layout-2",
                "label": "Layout 2"
              }
            ]
          }
        ]
      }
    }

      Copy

script-editor.js


            document.addEventListener(
      'blockstudio/blockstudio/events/attributes/select/update',
      ({ detail }) => {
        // Get data from event.
        const { clientId, value } = detail;

        // Get current block and InnerBlocks.
        const currentBlock = wp.data
          .select('core/block-editor')
          .getBlocksByClientId(clientId)[0];
        const childBlocks = currentBlock.innerBlocks;

        // Remove current InnerBlocks.
        const clientIds = childBlocks.map((block) => block.clientId);
        clientIds.forEach((item) => {
          wp.data.dispatch('core/block-editor').removeBlock(item);
        });

        // Add new layout depending on the current value.
        if (value.value === 'layout-1') {

          const heading = wp.blocks.createBlock('core/heading', {
            content: 'This is the first layout',
          });
          const paragraph = wp.blocks.createBlock('core/paragraph', {
            content: 'This is a paragraph from the first layout',
          });
          wp.data.dispatch('core/editor').insertBlock(heading, 0, clientId);
          wp.data.dispatch('core/editor').insertBlock(paragraph, 1, clientId);

        } else if (value.value === 'layout-2') {

          const heading = wp.blocks.createBlock('core/heading', {
            content: 'This is the second layout',
          });
          const heading2 = wp.blocks.createBlock('core/heading', {
            content: 'With another heading',
            level: 3,
          });
          const paragraph = wp.blocks.createBlock('core/paragraph', {
            content: 'This is a paragraph from the second layout',
          });
          wp.data.dispatch('core/editor').insertBlock(heading, 0, clientId);
          wp.data.dispatch('core/editor').insertBlock(heading2, 1, clientId);
          wp.data.dispatch('core/editor').insertBlock(paragraph, 2, clientId);

        }
      }
    );

      Copy

The example above will change the InnerBlocks template depending on the option selected the select field.

With key

Since IDs are not necessarily unique across attributes (for example inside and outside repeaters), you can specify a key inside the attribute object to uniquely identify the attribute when using events.

block.json


            {
      "blockstudio": {
        "attributes": [
          {
            "id": "repeater",
            "type": "repeater",
            "label": "Repeater",
            "attributes": [
              {
                "id": "text",
                "type": "text",
                "label": "Text"
              },
              {
                "id": "repeater",
                "type": "repeater",
                "label": "Repeater",
                "textButton": "Add repeater",
                "attributes": [
                  {
                    "key": "my-unique-key",
                    "id": "text",
                    "type": "text",
                    "label": "Text"
                  }
                ]
              }
            ]
          }
        ]
      }
    }

      Copy

With the setup above, listening to the key instead of the ID will only trigger the event when the text field inside the repeater is updated.

script-editor.js


            document.addEventListener(
    "blockstudio/namespace/my-block/attributes/my-unique-key/update",
      function (event) {
        const {
          attribute,
          attributes,
          block,
          value,
          clientId,
          repeaterId
        } = event.detail;
      }
    );

      Copy