Get the current block ID

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

Share Improve this question edited Feb 18, 2019 at 14:41 Venizia asked Feb 18, 2019 at 14:25 VeniziaVenizia 16111 silver badge66 bronze badges 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 12

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.