Cómo obtener el ID único del bloque dentro de las funciones de edición y guardado en registerBlockType

2 minutos de lectura

Estoy tratando de asignar una ID única a mi elemento SVG linearGradient, esto es para un bloque de Gutenberg personalizado en el que estoy trabajando, básicamente necesito obtener acceso (o generar) una identificación única para poder colocarla en la identificación HTML del elemento parámetro.

Sé que tenemos una ID de bloque principal, podemos hacer estilos con CSS y también crear un ancla, pero esto no es útil en lo que estoy tratando de lograr.

encontré esto https://developer.wordpress.org/block-editor/packages/packages-compose/#withInstanceId pero no entiendo cómo usarlo, los documentos no tienen ejemplos simples para mí.

Sigue aquí parte de mi código de bloque (esto no funciona):

attributes: {
            id: {
                type: 'string',
                default: withInstanceId(function({instanceId}){ return instanceId })
            }

Como puede ver, estoy tratando de asignar la ID de la instancia a un atributo para poder acceder a las funciones GUARDAR y EDITAR con props.attributes.id

Gracias por cualquier ayuda.

avatar de usuario
Kishan Jasani

Para obtener una identificación única dentro de Gutenberg Edit y Save Métodos que puedes usar clientId Props que proporciona en el interior props de Editar y Guardar Métodos.

Ejemplo:

Primer atributo establecido:

attributes: {
   blockId: {
      type: 'string'
   }
}

Método de edición interna

edit: function( props ) {
    const { attributes, setAttributes, clientId } = props;
    const { blockId } = attributes;
    if ( ! blockId ) {
        setAttributes( { blockId: clientId } );
    }
}

Desde WP 5.8necesita envolver la llamada de función con useEffect.

edit: function( props ) {
    const { attributes, setAttributes, clientId } = props;
    const { blockId } = attributes;

    React.useEffect( () => {
        if ( ! blockId ) {
            setAttributes( { blockId: clientId } );
        }
    }, [] );
}

Dentro del método Guardar

save: function( props ) {
    const { attributes } = props;
    const { blockId } = attributes;

    // So here `blockId` attribute will have a unique ID

}

¡Espero eso ayude!

  • ¡Esto es útil! El ID de cliente debe escribirse como una “cadena”, ya que contiene guiones. De lo contrario obtendrá un error de validación.

    – PattyOK

    5 de marzo de 2021 a las 4:01

  • Esto funcionaba bien con WP 5.7, pero en 5.8 (react v16.3.1) necesitamos envolver el setAttributes llamar React.useEffect()

    – Tim

    21 de enero a las 16:10


¿Ha sido útil esta solución?