Estoy creando un bloque Gutenberg personalizado usando node.js y REACT. Eventualmente, este será un control deslizante de Bootstrap al que se le pueden agregar diapositivas dinámicamente. Para cada diapositiva, el usuario debe cargar un video o una imagen. Estoy haciendo esto usando el componente integrado que forma parte de @wordpress/block-editor.

He agregado 3 componentes <MediaUpload> en <InspectorControls> que se mostrarán en la columna de controles de bloque de la derecha en WordPress.

Funcionan llamando a una función "onChange" que actualiza el atributo backgroundImage que se estableció originalmente en block.json.

 <InspectorControls> <PanelRow> <fieldset class="media-upload"> <strong>Select slide 1 video or image:</strong> <MediaUpload onSelect={onImageSelect} type={ [ 'image', 'video' ] } value={backgroundImage} render={({ open }) => ( <button onClick={open}> Upload Image! </button> )} /> </fieldset> <fieldset class="media-upload"> <strong>Select slide 2 video or image:</strong> <MediaUpload onSelect={onImageSelect} type={ [ 'image', 'video' ] } value={backgroundImage} render={({ open }) => ( <button onClick={open}> Upload Image! </button> )} /> </fieldset> <fieldset class="media-upload"> <strong>Select slide 3 video or image:</strong> <MediaUpload onSelect={onImageSelect} type={ [ 'image', 'video' ] } value={backgroundImage} render={({ open }) => ( <button onClick={open}> Upload Image! </button> )} /> </fieldset> </PanelRow> </InspectorControls>

EDITAR Estoy actualizando esta pregunta ahora que Teemu ha aclarado que los nombres de variables en JavaScript no pueden ser dinámicos.

Para simplificar la pregunta. ¿Cómo puedo escribir las siguientes 3 funciones en menos líneas de código? Creo que necesito incrementar el atributo backgroundImage[1] usando un bucle, pero no sé cómo escribir esto.

 const onImageSelect1 = ( imageObject ) => { setAttributes( { backgroundImage1: imageObject.url } ) } const onImageSelect2 = ( imageObject ) => { setAttributes( { backgroundImage2: imageObject.url } ) } const onImageSelect3 = ( imageObject ) => { setAttributes( { backgroundImage3: imageObject.url } ) }