Your code uses very old way of saving data to meta. This (using meta property in attributes) is not recommended anymore.
Instead, use useEntityProp
hook to save data to meta (example in handbook).
In your case, you’ll have to construct array from image metadata, where data of each image may be array or object and you save array of images as array of objects or array of arrays. In register_meta you’ll have to set ‘single’ to false
to facilitate saving array. In useEntityProp I use ‘page’ as second argument for brevity, but that depents on your post type, or you can use getCurrentPostType
selector like in handbook example to get current post type and that would work for all.
import { useEntityProp } from '@wordpress/core-data';
const [ meta, setMeta ] = useEntityProp( 'postType', 'page', 'meta' );
// meta is object where meta data are properties
function saveImageMeta(gallery) {
// construct your array here
// (if I remember correctly, you do get already formed array from MediaUpload, but you may want to remove excessive properties
// I will use just gallery for brevity
// add gallery property to existing meta's
setMeta({...meta, gallery});
}
}
// save like this
return (
<MediaUpload
onSelect={(gallery) => {
saveImageMeta(gallery);
}}
type="image"
multiple
value={meta['gallery']}
render={({ open }) => (
<Button className="button button-large" onClick={open}>
Select Images
</Button>
)}
/>
);
However, I think value={meta['gallery']}
would not work for selecting already chosen images, you’ll have to construct correct array, if I am not mistaken. Please try to figure out this yourself.
Do note also that reading this meta’s in PHP is a bit more complicated, as it is an array of arrays or array of objects.