Is there a way to get the current block id? I would like to add it in the html generated in the save function (registerBlockType).

The save portion of my block:

save: props => {
        const {
            attributes: { images, isCropped },
            className,
        } = props;
        return (
            <div className={ `${className} ${isCropped ? 'is-cropped' : ''}` }>
                <div className={`grid`}>
                    { images.map( img => (
                        <div className={ `grid-item` }
                            <img src={ img.src } />
                        </div>
                    ))}
                </div>
            </div>
        );
    }

Thx!

Is there a way to get the current block id? I would like to add it in the html generated in the save function (registerBlockType).

The save portion of my block:

save: props => {
        const {
            attributes: { images, isCropped },
            className,
        } = props;
        return (
            <div className={ `${className} ${isCropped ? 'is-cropped' : ''}` }>
                <div className={`grid`}>
                    { images.map( img => (
                        <div className={ `grid-item` }
                            <img src={ img.src } />
                        </div>
                    ))}
                </div>
            </div>
        );
    }

Thx!

• block-editor

• Do you have code we can refer to for your block? – Tom J Nowell ♦ Commented Feb 18, 2019 at 14:38
• Hello Tom! Thx for your answer. I have added the save function of my block. Hope this will help! – Venizia Commented Feb 18, 2019 at 14:42

1 Answer 1

The block id is saved in the clientId field. It's regenerated at each save of the post and is only available in props in the edit function. In order to use this field as unique id in the save function, it needs to be saved as attribute in the edit section. It will be then available in the save function via props.attributes.