Search code examples
wordpresswordpress-gutenberg

Programmatically open "Block Settings"


I know when developing a gutenberg plugin I can have user's access the block settings by having them click on the three stacked dots for "More options" and then click on "Show Block Settings". Is there an API/function I can call on to open the block settings instead of having the user go through the "More options"?


Solution

  • Like for many gutenberg related questions, the wp data module is your key to success. There you will find function for selecting blocks and opening sidebars, you will need a combination of both functions.

    const yourBlockClientId = ''
    //select the block you want
    wp.data.dispatch( 'core/block-editor' ).selectBlock( yourBlockClientId )
    //open the edit-block sidebar
    wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
    

    The function to get your blockId is left to you. There are functions to get all blocks with ids in a collection: wp.data.select( 'core/block-editor' ).getBlocks() or to just get the ids wp.data.select( 'core/block-editor' ).getBlockOrder(). You will have to get your blockId from there.