WordPress自定义块多MediaUpload异常：后续上传器显示为空

问题根源 #

第二个MediaUpload组件的allowedTypes参数错误设置为['image2']，这不是WordPress认可的合法媒体类型，导致媒体库过滤掉所有内容，出现空界面。

修正后的代码片段 #

{
    html: false,
    // Turn off reusable block feature
    reusable: false,
    // Add alignwide and alignfull options
    align: false
},
attributes: {
    image: {
        type: 'object',
        selector: 'grid-wide-4-logo-1'
    },
    image2: {
        type: 'object',
        selector: 'grid-wide-4-logo-2'
    }
},

edit: props => {
    const { attributes, className, setAttributes } = props
    const { image, image2 } = attributes // 移除未定义的image3
    return (
        <div className="grid-wide-4-block">
            <div>
                <div>
                    <MediaUploadCheck>
                        <MediaUpload
                            className="grid-wide-4-logo-1"
                            allowedTypes={['image']}
                            multiple={false}
                            value={image ? image.id : ''}
                            onSelect={image => setAttributes({ image: image })}
                            render={({ open }) => (
                                image ?
                                    <div>
                                        <p>
                                            <img src={image.url} className="grid-wide-4-logo-1" />
                                        </p>
                                        <p>
                                            <Button onClick={() => setAttributes({ image: '' })} className="button is-small">Remove</Button>
                                        </p>
                                    </div> :
                                    <Button onClick={open} className="button">Upload Image</Button>
                            )}
                        />
                    </MediaUploadCheck>
                </div>

                <div>
                    {/* 修正allowedTypes参数 */}
                    <MediaUploadCheck>
                        <MediaUpload
                            className="grid-wide-4-logo-2"
                            allowedTypes={['image']} // 这里改为正确的image类型
                            multiple={false}
                            value={image2 ? image2.id : ''}
                            onSelect={image2 => setAttributes({ image2: image2 })}
                            render={({ open }) => (
                                image2 ?
                                    <div>
                                        <p>
                                            <img src={image2.url} className="grid-wide-4-logo-2" />
                                        </p>
                                        <p>
                                            <Button onClick={() => setAttributes({ image2: '' })} className="button is-small">Remove</Button>
                                        </p>
                                    </div> :
                                    <Button onClick={open} className="button">Upload Image</Button>
                            )}
                        />
                    </MediaUploadCheck>
                </div>
            </div>
        </div>
    )
}

关键说明 #

• allowedTypes参数仅接受WordPress内置的媒体类型值，比如image（图片）、video（视频）、audio（音频）等，不能使用自定义的属性名称（如image2）。
• 若需要添加第三个MediaUpload组件，需在attributes中补充image3的定义，同时确保其allowedTypes设置为['image']。

内容的提问来源于stack exchange，提问作者user17844877