wordpress - Gutenberg MediaUpload 在编辑器中消失

Question

我正在尝试在古腾堡中创建一个涉及上传图像的自定义 block 。我遇到的问题是 render在MediaUpload不工作。我想我错过了一些东西，但我找不到它。

每当我尝试输入 MediaUpload block 中的元素，它变为空。在下面的代码中，如果您检查它，您将看到 <div class="image-test">但里面什么也不会。

我尝试简化为下面的代码，以确保没有任何东西干扰它，但它仍然对我不起作用。

这是block.js代码:

const { registerBlockType } = wp.blocks;
const { MediaUpload, MediaUploadCheck } = wp.editor;
const { Button } = wp.components;

registerBlockType( 'custom/image-test', {
    title: 'Image Test',
    icon: 'warning',
    category: 'custom-blocks',

    edit( { attributes, className, setAttributes } ) {
        return (
            <div className="image-test">
                <MediaUploadCheck>
                    <MediaUpload
                        onSelect={ media => console.log( media.length ) }
                        render={ ({ open }) => (
                            <Button onClick={ open }>
                                Open Media Library
                            </Button>
                        )}
                    />
                </MediaUploadCheck>
            </div>
        );
    },

    save( { attributes } ) {
        return (
            <div class="image-test">
                <p>Image Test</p>
            </div>
        );
    },
} );

这是我在函数中声明 block 的位置:

function image_test_block(){
    wp_register_script(
        'image-test-script', // name of script
        get_template_directory_uri() . '/js/block-image-test.js', // path to script
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ) // dependencies
    );

    register_block_type('custom/image-test', array(
        'editor_script' => 'image-test-script'
    ) );
}
add_action( 'init', 'image_test_block', 10, 0 );

Answer 1

首先，据我所知，MediaUploadCheck 还不是官方的 WP 组件。这是proposal ticket

使用 block 开发工具，如 create guten block省去配置的麻烦。我不确定您的脚本排队情况，很可能您是通过不正确的 Hook 添加 Assets 。

这是一个工作配方卡，其中包含 mediaUpload 组件。

const { __, setLocaleData } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;
const {
    RichText,
    MediaUpload,
} = wp.editor;
const { Button } = wp.components;

setLocaleData( window.gutenberg_examples_05_esnext.localeData, 'gutenberg-examples' );

registerBlockType( 'gutenberg-examples/example-05-recipe-card-esnext', {
    title: __( 'Example: Recipe Card (esnext)', 'gutenberg-examples' ),
    icon: 'index-card',
    category: 'layout',
    attributes: {
        title: {
            type: 'array',
            source: 'children',
            selector: 'h2',
        },
        mediaID: {
            type: 'number',
        },
        mediaURL: {
            type: 'string',
            source: 'attribute',
            selector: 'img',
            attribute: 'src',
        },
        ingredients: {
            type: 'array',
            source: 'children',
            selector: '.ingredients',
        },
        instructions: {
            type: 'array',
            source: 'children',
            selector: '.steps',
        },
    },
    edit: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaID,
                mediaURL,
                ingredients,
                instructions,
            },
            setAttributes,
        } = props;
        const onChangeTitle = ( value ) => {
            setAttributes( { title: value } );
        };

        const onSelectImage = ( media ) => {
            setAttributes( {
                mediaURL: media.url,
                mediaID: media.id,
            } );
        };
        const onChangeIngredients = ( value ) => {
            setAttributes( { ingredients: value } );
        };

        const onChangeInstructions = ( value ) => {
            setAttributes( { instructions: value } );
        };

        return (
            <div className={ className }>
                <RichText
                    tagName="h2"
                    placeholder={ __( 'Write Recipe title…', 'gutenberg-examples' ) }
                    value={ title }
                    onChange={ onChangeTitle }
                />
                <div className="recipe-image">
                    <MediaUpload
                        onSelect={ onSelectImage }
                        allowedTypes="image"
                        value={ mediaID }
                        render={ ( { open } ) => (
                            <Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
                                { ! mediaID ? __( 'Upload Image', 'gutenberg-examples' ) : <img src={ mediaURL } alt={ __( 'Upload Recipe Image', 'gutenberg-examples' ) } /> }
                            </Button>
                        ) }
                    />
                </div>
                <h3>{ __( 'Ingredients', 'gutenberg-examples' ) }</h3>
                <RichText
                    tagName="ul"
                    multiline="li"
                    placeholder={ __( 'Write a list of ingredients…', 'gutenberg-examples' ) }
                    value={ ingredients }
                    onChange={ onChangeIngredients }
                    className="ingredients"
                />
                <h3>{ __( 'Instructions', 'gutenberg-examples' ) }</h3>
                <RichText
                    tagName="div"
                    multiline="p"
                    className="steps"
                    placeholder={ __( 'Write the instructions…', 'gutenberg-examples' ) }
                    value={ instructions }
                    onChange={ onChangeInstructions }
                />
            </div>
        );
    },
    save: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaURL,
                ingredients,
                instructions,
            },
        } = props;
        return (
            <div className={ className }>
                <RichText.Content tagName="h2" value={ title } />

                {
                    mediaURL && (
                        <img className="recipe-image" src={ mediaURL } alt={ __( 'Recipe Image', 'gutenberg-examples' ) } />
                    )
                }

                <RichText.Content tagName="h2" className="ingredients" value={ ingredients } />

                <RichText.Content tagName="div" className="steps" value={ instructions } />
            </div>
        );
    },
} );

您的 mediaUload 组件缺少媒体 ID、强制 onSelect 功能，并且您正在搜索控制台中输出值。