我试图创建自己的自定义 gutenberg 块来上传图像和内容，但我无法为上传的图像配置srcset。
在某些地方，据说WordPress会自动添加srcset，但对我来说情况并非如此，当我加载下面的代码时，它会正确保存所有内容，但图像没有srcset。
我试图创建一个插件使用的代码张贴在这里，我已经搜索了很多，并没有发现任何关于srcset自定义 gutenberg 块.

block.js

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "dt-panphagia/dt-panphagia",
    "version": "0.1.0",
    "title": "Panphagia",
    "category": "widgets",
    "icon": "admin-site-alt",
    "description": "",
    "keywords": [ "dt", "saurus", "archive" ],
    "supports": {
        "align": ["full", "wide"]
    },
    "textdomain": "dt-panphagia",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "viewScript": "file:./view.js",
    "attributes": {
        "content": {
            "type": "string",
            "selector": "p"
        },
        "heading": {
            "type": "string"
        },
        "mediaId": {
            "type": "number",
            "default": 0
        },
        "mediaUrl": {
            "type": "string",
            "default": ""
        }
    }
}

edit.js

import { __ } from '@wordpress/i18n';

import { 
    useBlockProps, RichText, MediaUpload, MediaUploadCheck, InspectorControls
} from '@wordpress/block-editor';

import {
    TextControl, ToggleControl, PanelBody, PanelRow, Button, ResponsiveWrapper,
    __experimentalHStack as HStack
} from '@wordpress/components';

import { 
    Fragment 
} from '@wordpress/element'

import './editor.scss';

export default function Edit({ attributes, setAttributes, className }) {

    const blockProps = useBlockProps();

    const removeMedia = () => {
        setAttributes({
            media: ""
        });
    }

    return (
        <Fragment>
            <InspectorControls>
                <PanelBody title={__('Imagem/Achievement', 'dt-panphagia')} initialOpen={ true }>
                    <div className="editor-post-featured-image">
                        <div className='editor-post-featured-image__container'>
                        <MediaUploadCheck>
                            <MediaUpload
                                onSelect = {(media) => {
                                    setAttributes({
                                        mediaId: media['id'],
                                        mediaUrl: media['url'],
                                        mediaWidth: media['width'],
                                        mediaHeight: media['height']
                                    });
                                }}
                                type = "image"
                                value = {attributes.mediaId}
                                render = {({ open }) => {
                                    return (
                                        <Button
                                            className = {attributes.mediaId == 0 ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
                                            onClick = {open}
                                        >
                                        {attributes.mediaId == 0 && __('Escolha uma Imagem', 'dt-panphagia')}
                                        {attributes.mediaId != 0 &&
                                                <ResponsiveWrapper naturalWidth={ attributes.mediaWidth } naturalHeight={ attributes.mediaHeight }>
                                                    <img src={attributes.mediaUrl} />
                                                </ResponsiveWrapper>
                                        }
                                        </Button>
                                    );
                                }}
                            />
                        </MediaUploadCheck>
                        {attributes.mediaId != 0 &&
                        <HStack className='editor-post-featured-image__actions'>
                            <Button className='editor-post-featured-image__action' onClick={removeMedia}>{__('Remove', 'dt-panphagia')}</Button>
                            <MediaUploadCheck>
                                <MediaUpload
                                    title={__('Replace image', 'awp')}
                                    value={attributes.mediaId}
                                    onSelect = {(media) => {
                                        setAttributes({
                                            mediaId: media['id'],
                                            mediaUrl: media['url'],
                                            mediaWidth: media['width'],
                                            mediaHeight: media['height']
                                        });
                                        {console.log(media);}
                                    }}
                                    type = "image"
                                    render = {({open}) => (
                                        <Button className='editor-post-featured-image__action' onClick={open}>{__('Replace', 'dt-panphagia')}</Button>
                                    )}
                                />
                            </MediaUploadCheck>
                        </HStack>
                        }
                        </div>
                    </div>
                </PanelBody>
            </InspectorControls>
            <div {...blockProps} className='achievement'>
                <div className='achievement-wrap'>
                    <div className='achievement-image'>
                        <img
                            className="eb-feature-list-img"
                            src={attributes.mediaUrl} width="54"
                            alt=""
                        />
                    </div>
                    <div className='achievement-content'>
                        <RichText
                            tagName="h3"
                            value={ attributes.heading }
                            allowedFormats={ [ 'core/bold', 'core/italic' ] }
                            onChange={ ( heading ) => setAttributes( { heading } ) }
                            placeholder="Enter heading here..."
                        />
                        <RichText
                            tagName="p"
                            value={ attributes.content }
                            allowedFormats={ [ 'core/bold', 'core/italic' ] }
                            onChange={ ( content ) => setAttributes( { content } ) }
                            placeholder="Button text..."
                        />
                    </div>
                </div>
            </div>
        </Fragment>
    );
}

保存.js

import { useBlockProps, RichText} from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return (
        <div {...useBlockProps.save()} className='achievement'>
            <div className='achievement-wrap'>
                <div className='achievement-image'>
                    <img
                        className="eb-feature-list-img"
                        src={attributes.mediaUrl} width="54"
                        alt=""
                    />
                </div>
                <div className='achievement-content'>
                    <RichText.Content tagName="h3" value={ attributes.heading } />
                    <RichText.Content tagName="p" value={ attributes.content } />
                </div>
            </div>
        </div>
    );
}