Изображение не выводится в пользовательском блоке Гутенберга - PullRequest
Новая
       153

Изображение не выводится в пользовательском блоке Гутенберга

1 голос
/ 15 апреля 2020

Немного новичок в Гутенберге, и в течение последних 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 );
...