Gutenberg getBlockIndex in save() function

Question

In my block's edit() function i'm getting the index of each inner block:

// a block used in innerblocks
edit( { attributes, setAttributes, clientId } ) {

    let blockIndex = wp.data.select( 'core/editor' ).getBlockIndex( clientId );
    
    ...

This works fine. However i tried the same in save() but I get index -1 for each block. How can I make getBlockIndex() work in save()?

I need to add index number to class names of inner blocks in HTML.

Answer 1

You cannot use wp.select in your save component, a save component can only use the block attributes. If you generate markup from using data from other sources then it will fail block validation.

If you want data such as the index of the block, you need to store it in the attributes in the edit component, or render the block in PHP.

The same goes for other "effects", you should not do these things in a save component:

• use state
• make HTTP requests
• retrieve data that didn't come from block attributes
• interactive components
• query the data store
• react hooks e.g useEffect or useCallback
• prompt the user for data
• extract data from DOM nodes or global variables

The job of a save component is to take the blocks attributes and turn them into static HTML that gets saved in the database. Any interactivity or effects that do work need to go in the edit component or elsewhere, and their results stored in attributes.