Say that I am making a Block that accepts between 2 and 5 images with the MediaUpload component as input. How would I go about that? Ideally for UI I would like the multiple and addToGallery props to both be true.

There must be a simple solution for this, given how common the use case is, but I haven’t been able to find anything on the documentation, StackOverflow, or Google.

There are old clunky answers about globally filtering the image upload prefilter, but I need this to be scoped to specific blocks (and ideally a javascript solution.)

Here is my existing code if it’s helpful:

                        <MediaUpload
                        multiple={ true }
                        gallery={ true }
                        onSelect={ (media) => onSelectSliders(media) }
                        allowedTypes={ ['image'] }
                        accept="image/*"
                        value={ sliderimages.length && sliderimages.map(item => item.id) }

                        render={ ({open}) => {
                            return (
                                <>
                                    <Button
                                        isPrimary={ true }
                                        onClick={ (event) => {
                                            event.stopPropagation();
                                            open();
                                        } }
                                    >
                                        { sliderimages.length > 0 ? __('Edit Images', 'pb') : __('Select Images', 'pb') }
                                    </Button>
                                </>
                            );
                        } }
                    />