Estoy tratando de crear un bloque personalizado para Wordpress Gutenberg.

Tengo los siguientes atributos:

 "icon": { "type": "object", "source": "html", "selector": ".jig_defbox-icon" }, "color": { "type": "string", "default": "#919191" }

En mi EditJS, trato de almacenar valores de un selector de color y un grupo de radio en estos atributos.

 const [ toggled, setToggled ] = useState( ); return( <InspectorControls> <ColorPalette colors={[ {name: 'lightgray', color: '#d8d8d8'}, {name: 'darkgray', color: '#919191'}, {name: 'red', color: '#dc1a22'} ]} disableCustomColors={true} onChange={(value) => {props.setAttributes({color: value});}} value={props.attributes.color} clearable={false} /> <RadioGroup onChange={ (value) => {setToggled(value);props.setAttributes({icon: value});} } checked={props.attributes.icon} > { str_array.map( item => ( <Radio value={item}><Icon icon={icon_getter(item);}/></Radio>) ) } </RadioGroup> </InspectorControls> )

En mi SaveJS, trato de representar mi marcado de acuerdo con estos atributos:

 const {attributes} = props <div style={{"fill": attributes.color}}> <Icon icon={icon_getter(attributes.icon)}/> </div>

El objetivo es representar un icono svg de acuerdo con la selección en mi grupo de radio.

Problema 1: cada nueva sesión de edición en el backend, la selección de mi grupo de radio desaparece, incluso con useState (intenté sin useState primero)

Problema 2: cada nueva sesión de edición, se registra un error de consola que dice que el marcado posterior al cuerpo no coincide con el marcado devuelto por la función de guardar, porque el marcado de guardado no contiene el contenido del atributo del icono

En la medida en que pude encerrar el problema, el atributo del icono no se guardó correctamente. Traté de guardar la "clave" para el ícono como una cadena y un objeto. Si registro el valor en la función de guardar, está vacío, mientras que el color seleccionado funciona como se esperaba, tanto en el frontend como en el backend.