get used blocks in post and detect changing

admin管理员组

文章数量:1393071

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 :(

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 :(

• block-editor

Share Improve this question asked Jan 27, 2020 at 13:40 saeid ezzatisaeid ezzati 8511 silver badge1010 bronze badges 3

• May have been answered already: wordpress.stackexchange/questions/331488/… – Electronic Ink Commented Feb 5, 2020 at 22:06
• Where are you trying to get the list of used blocks? In the Editor, or on the front end? – WebElaine Commented Feb 7, 2020 at 20:04
• @WebElaine In the Editor – saeid ezzati Commented Feb 8, 2020 at 11:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 8 +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.

本文标签： get used blocks in post and detect changing