如何在Gutenberg Block attributes中实现图片数组及动态内容字段配置

1. 修改attributes定义 #

删除原有零散的图片、富文本属性定义，统一声明两个对象类型属性即可：

attributes: {
    // 统一存储所有图片资源
    images: {
        type: 'object',
        default: {}
    },
    // 统一存储所有富文本内容
    content: {
        type: 'object',
        default: {}
    }
}

2. 封装通用图片选择处理逻辑 #

重写图片选择回调函数，支持传入自定义key自动写入images对象：

const onSelectImage = (imgKey) => (image) => {
    // 不可变更新对象，避免直接修改原状态
    const updatedImages = {
        ...attributes.images,
        [imgKey]: {
            url: image.url,
            id: image.id,
            alt: image.alt || ''
        }
    };
    setAttributes({ images: updatedImages });
};

调用MediaUpload时仅需传入对应key即可，示例如下：

<MediaUpload
    onSelect={onSelectImage('bg')}
    type="image"
    value={attributes.images?.bg?.id}
    render={({open}) => (
        <figure className={!attributes.images?.bg?.id ? ' image-button' : ' image-preview'} onClick={open} >
            {!attributes.images?.bg?.id ? __("Upload Image") : <img src={attributes.images.bg.url} alt={attributes.images.bg.alt} />}
        </figure>
    )}
/>

后续使用图片属性时直接通过attributes.images.bg.url、attributes.images.icon_1.id的形式调用即可。

3. 封装通用富文本更新逻辑 #

封装统一的富文本内容更新函数，支持传入自定义key自动写入content对象：

const handleContentChange = (contentKey) => (newValue) => {
    const updatedContent = {
        ...attributes.content,
        [contentKey]: newValue
    };
    setAttributes({ content: updatedContent });
};

RichText组件调用示例：

<RichText
    tagName="h2"
    value={attributes.content?.heading || ''}
    onChange={handleContentChange('heading')}
    placeholder={__('请输入标题')}
/>

新增富文本字段时仅需传入新的key即可，无需提前在attributes中声明，后续调用时直接通过attributes.content.自定义key获取对应内容。

注意事项 #

• 代码中使用的?.可选链操作符是为了避免属性未初始化时报错，如果需要兼容低版本环境，可以替换为&&链式判断写法。
• 古腾堡区块原生支持object类型属性的序列化存储，无需额外处理数据持久化逻辑。

内容的提问来源于stack exchange，提问作者Łukasz Górski