Немного новичок в Гутенберге, и в течение последних 10 часов я пытался разрешить загрузку фонового изображения для вложенного блока согласно этому руководству: https://www.liip.ch/en/blog/add-an-image-selector-to-a-gutenberg-block
Это прекрасно работает в бэкэнде, но изображение вообще не выводится во внешнем интерфейсе.
Как правильно перенести стили из редактирования. js в функцию save () {}?
Моя конечная цель - вывести div-упаковщик с изображением в качестве фона: url.
block. js
// block.js
import edit from './edit';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.editor;
registerBlockType( 'myblock-container-widget/image-selector', {
title: __( 'Container block', 'myblock-container-widget' ),
icon: 'format-image',
category: 'common',
keywords: [
__( 'Container block', 'myblock' ),
],
supports: {
align: [ 'full' ],
},
attributes: {
bgImageId: {
type: 'number',
},
},
edit,
save() {
return (
<InnerBlocks.Content />
);
},
} );
edit. js
// edit.js
// Load dependencies
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { InspectorControls, InnerBlocks, MediaUpload, MediaUploadCheck } = wp.editor;
const { PanelBody, Button, ResponsiveWrapper, Spinner } = wp.components;
const { compose } = wp.compose;
const { withSelect } = wp.data;
const ALLOWED_MEDIA_TYPES = [ 'image' ];
class ImageSelectorEdit extends Component {
render() {
const { attributes, setAttributes, bgImage, className } = this.props;
const { bgImageId } = attributes;
const instructions = <p>{ __( 'To edit the background image, you need permission to upload media.', 'myblock-container-widget' ) }</p>;
let styles = {};
if ( bgImage && bgImage.source_url ) {
styles = { backgroundImage: `url(${ bgImage.source_url })` };
}
const onUpdateImage = ( image ) => {
setAttributes( {
bgImageId: image.id,
} );
};
const onRemoveImage = () => {
setAttributes( {
bgImageId: undefined,
} );
};
return (
<Fragment>
<InspectorControls>
<PanelBody
title={ __( 'Background settings', 'myblock-container-widget' ) }
initialOpen={ true }
>
<div className="wp-block-myblock-container-widget-image">
<MediaUploadCheck fallback={ instructions }>
<MediaUpload
title={ __( 'Background image', 'myblock-container-widget' ) }
onSelect={ onUpdateImage }
allowedTypes={ ALLOWED_MEDIA_TYPES }
value={ bgImageId }
render={ ( { open } ) => (
<Button
className={ ! bgImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview' }
onClick={ open }>
{ ! bgImageId && ( __( 'Set background image', 'myblock-container-widget' ) ) }
{ !! bgImageId && ! bgImage && <Spinner /> }
{ !! bgImageId && bgImage &&
<ResponsiveWrapper
naturalWidth={ bgImage.media_details.width }
naturalHeight={ bgImage.media_details.height }
>
<img src={ bgImage.source_url } alt={ __( 'Background image', 'myblock-container-widget' ) } />
</ResponsiveWrapper>
}
</Button>
) }
/>
</MediaUploadCheck>
{ !! bgImageId && bgImage &&
<MediaUploadCheck>
<MediaUpload
title={ __( 'Background image', 'myblock-container-widget' ) }
onSelect={ onUpdateImage }
allowedTypes={ ALLOWED_MEDIA_TYPES }
value={ bgImageId }
render={ ( { open } ) => (
<Button onClick={ open } isDefault isLarge>
{ __( 'Replace background image', 'myblock-container-widget' ) }
</Button>
) }
/>
</MediaUploadCheck>
}
{ !! bgImageId &&
<MediaUploadCheck>
<Button onClick={ onRemoveImage } isLink isDestructive>
{ __( 'Remove background image', 'myblock-container-widget' ) }
</Button>
</MediaUploadCheck>
}
</div>
</PanelBody>
</InspectorControls>
<div
className={ className }
style={ styles }
>
<InnerBlocks />
</div>
</Fragment>
);
}
}
export default compose(
withSelect( ( select, props ) => {
const { getMedia } = select( 'core' );
const { bgImageId } = props.attributes;
return {
bgImage: bgImageId ? getMedia( bgImageId ) : null,
};
} ),
)( ImageSelectorEdit );