1

in gutenberg how can I get list of used blocks in the post by javascript ?

then I want whenever content of each block changed , a javascript function called.

how can I do this ?

wordpress gutenberg documentations is very confusing and I can't understand them :(

3

1 Answer 1

4
+50

You can access the blocks used in the post in js using getBlocks():

wp.data.select( 'core/block-editor' ).getBlocks();

In terms of updating on changes - the editor saves all it's data in a store, so you would want to subscribe and react based on what changes you need to react to. As an example:

( () => {
    let blocksState = wp.data.select( 'core/block-editor' ).getBlocks();
    wp.data.subscribe( _.debounce( ()=> {
        newBlocksState = wp.data.select( 'core/block-editor' ).getBlocks();
        if ( blocksState.length !== newBlocksState.length ) {
            doMyJsFn();
        }
        // Update reference.
        blocksState = newBlocksState;
    }, 300 ) );
} )();

You could filter further to act on different changes. I just used a length comparison to keep it simple for the example. You mentioned changes to block content, so you could filter the objects returned in blocksState and newBlocksState variables by comparing each block in the objects' attributes keys then calling whatever function you want.

There are other ways to go about this, and it really depends on what you're trying to do specifically when you say call your own function. Just think in terms of taking action when the application's state changes, not when the DOM changes. The link above to the getBlocks() method should give you more ideas of some of the functionality that is there. I'd also suggest looking at the documentation for the wp.data package, which details how the data package is used more in depth(such as the subscribe method mentioned).

Edit:addressing comment:

The example above is only checking the if blocksState and newBlocksState are the same length ie if you add a block or remove a block. I mentioned this above along with resources you can reference and ways you could check for other stuff. Additional checks would be made depending on your needs, only you would know your own application's logic, not me. Using the documentation link above I see a method called getEditedPostContent(), so here is an approach of checking the post content:

( () => {
    let contentState = wp.data.select( 'core/editor' ).getEditedPostContent();
    wp.data.subscribe( _.debounce( ()=> {
        newContentState = wp.data.select( 'core/editor' ).getEditedPostContent();
        if ( contentState !== newContentState ) {
            console.log( 'triggered' );
        }
        // Update reference.
        contentState = newContentState;
    }, 1000 ) );
} )();

This will then log "triggered" in console when the content of the editor changes. I also bumped up the debounce interval to help cover when user is typing, so it doesn't trigger as frequently. There is also isTyping() method which could be used to help optimize a bit further.

2
  • thanks. I replaced doMyJsFn(); with console.log('change') . but when I was changing content of blocks didn't execute the console.log . Feb 10, 2020 at 9:48
  • Yes, that was mentioned. I have updated my answer with further explanation/example checking post content, which might be closer to what you're looking for.
    – Tim Elsass
    Feb 10, 2020 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.