Estoy intentando crear un bloque de Gutenberg que me permita seleccionar/cargar varias imágenes desde el Administrador de medios de WordPress.
Lo ideal sería tener un botón en los controles del Inspector que abra el Administrador de medios y luego guarde los ID de los medios seleccionados en un objeto/matriz en el bloque $attributes.
He probado más de una docena de combinaciones diferentes para intentar conseguirlo.
¿Dónde está lo que tengo hasta ahora para mi edit.js?
/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
*/
import { __ } from '@wordpress/i18n';
import {DynamicGallery, StaticGallery,MyMediaUploader} from './components/gallery';
import metadata from './block.json';
import "./editor.scss"
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
*/
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { useState } from 'react';
import {
PanelBody,
MediaUploadCheck,
MediaUpload,
SelectControl,
__experimentalNumberControl as NumberControl,
Button,
ToggleControl,
DropZone,
TextControl
} from '@wordpress/components';
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* Those files can contain any CSS code that gets applied to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
import './editor.scss';
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {Element} Element to render.
*/
export default function Edit(props) {
console.log(props);
const{className, ...blockProps} = useBlockProps();
return (
<>
label={__('Images Source', metadata.textdomain)}
value={props.attributes.source}
onChange={(newValue) => props.setAttributes({ source: newValue })}
options={[
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
{ value: 'meta_field', label: __('Meta field of current post', metadata.textdomain) },
{ value: 'linked_table', label: __('Linked Table', metadata.textdomain) }
]}
/>
{props.attributes.source == "meta_field" && (
label="Meta Field Name"
value={props.attributes.sourceMetaField}
onChange={(newValue) => props.setAttributes({ sourceMetaField: newValue })}
/>
)}
{ props.setAttributes({
includePostThumbnail: isChecked
})
}
} checked={props.attributes.includePostThumbnail}
label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
/>
label={__('Select an Option', metadata.textdomain)}
value={props.attributes.initialLayout}
onChange={(newValue) => props.setAttributes({ initialLayout: newValue })}
options={[
{ value: 'inline', label: __('Inline', metadata.textdomain) },
{ value: 'grid', label: __('Grid', metadata.textdomain) },
{ value: 'justified', label: __('Justified', metadata.textdomain) },
{ value: 'masonry', label: __('Masonry', metadata.textdomain) }
]}
/>
{props.attributes.initialLayout == "grid" && (
{__('Grid Columns', metadata.textdomain)}
onChange={(newValue) => {
props.setAttributes({
gridColumns: parseInt(newValue)
});
}}
value={props.attributes.gridColumns}
isShiftStepEnabled={true}
shiftStep={10}
/>
)}
onChange={(isChecked) => {
props.setAttributes({
dynamic: isChecked
})
}
} checked={props.attributes.dynamic}
label={__('Load Dynamically', metadata.textdomain)}
/>
{props.attributes.dynamic && (
{__('Max to load', metadata.textdomain)}
onChange={(newValue) => {
props.setAttributes({
maxInitialImages: parseInt(newValue)
});
}}
value={props.attributes.maxInitialImages}
isShiftStepEnabled={true}
shiftStep={10}
/>
)}
onChange={(isChecked) => {
props.setAttributes({
loop: isChecked
})
}
} checked={props.attributes.loop}
label={__('Enable Loop', metadata.textdomain)}
/>
onChange={(isChecked) => {
props.setAttributes({
download: isChecked
})
}
} checked={props.attributes.download}
label={__('Allow Download', metadata.textdomain)}
/>
label={__('Download Image Size', metadata.textdomain)}
value={props.attributes.downloadMaxSize}
onChange={(newValue) => props.setAttributes({ downloadMaxSize: newValue })}
options={[
{ value: 'full', label: __('Full (Original Size)', metadata.textdomain) },
{ value: 'medium', label: __('Medium (Up to 300x300px - Not Cropped)', metadata.textdomain) },
{ value: 'large', label: __('Large (Up to 1024 x 1024px - Not Cropped)', metadata.textdomain) },
{ value: 'thumbnail', label: __('Thumbnail (150 x 150px - Cropped', metadata.textdomain) }
]}
/>
onChange={(isChecked) => {
props.setAttributes({
allowZoom: isChecked
})
}
} checked={props.attributes.allowZoom}
label={__('Allow Zoom In/Out', metadata.textdomain)}
/>
onChange={(isChecked) => {
props.setAttributes({
closeOnTap: isChecked
})
}
} checked={props.attributes.closeOnTap}
label={__('Close on tap', metadata.textdomain)}
/>
onChange={(isChecked) => {
props.setAttributes({
showCounter: isChecked
})
}
} checked={props.attributes.showCounter}
label={__('Show counter', metadata.textdomain)}
/>
onChange={(isChecked) => {
props.setAttributes({
showControls: isChecked
})
}
} checked={props.attributes.showControls}
label={__('Show Previous/Next Buttons', metadata.textdomain)}
/>
>
);
}