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.
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
llamarReact.useEffect()
– Tim
21 de enero a las 16:10
Encontré este enlace con contenido relacionado, pero aún no puedo lograrlo: github.com/WordPress/gutenberg/tree/master/packages/compose/src/…
–Leandro Berg
12 de enero de 2020 a las 16:04
No creo que quieras soltarlo directamente en el atributo de esa manera. Probablemente desee guardarlo primero como una variable local. github.com/WordPress/gutenberg/tree/master/packages/compose/src/…
– jshwlkr
27 mayo 2020 a las 21:50