我试图创建自己的自定义 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>
);
}
1条答案
按热度按时间lvmkulzt1#
经过大量的搜索和阅读,找到的解决方案几乎是显而易见的。因此,WordPress加载图像的
srcset
只需将CSS类传递给包含wp-image-{mediaid}
的图像。