Question

我收到控制台错误

ReferenceError: selectImage is not defined
    at edit (index.js?fb2e:95)

我认为 selectImage 是在以下古腾堡块中定义的：

/**
 * Block dependencies
 */
import icon from './icon';
import './style.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
    RichText,
    MediaUpload,
    BlockControls,
    BlockAlignmentToolbar,
} = wp.editor

/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/heroblock',
    {
        title: __( 'Hero Block', 'jsforwpblocks' ),
        description: __( 'Large block with hero image, text and buttons', 'jsforwpblocks' ),
        category: 'common',
        icon: {
            background: 'rgba(254, 243, 224, 0.52)',
            src: icon,
        },   
        keywords: [
            __( 'Banner', 'jsforwpblocks' ),
            __( 'Call to Action', 'jsforwpblocks' ),
            __( 'Message', 'jsforwpblocks' ),
        ],
        attributes: {
            message: {
                type: 'array',
                source: 'children',
                selector: '.message-body',
            },
            blockAlignment: {
                type: 'string',
                default: 'wide',
            },
            imgUrl: {
                type: 'string',
                default: 'http://placehold.it/500'
            }
        },
        getEditWrapperProps( { blockAlignment } ) {
            if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
                return { 'data-align': blockAlignment };
            }
        },
        selectImage(value) {
            console.log(value);
            setAttributes({
                imgUrl: value.sizes.full.url,
            })
        },
        edit: props => {
            const { attributes: { message, blockAlignment }, className, setAttributes } = props;
            const onChangeMessage = message => { setAttributes( { message } ) };

            return (
                <div className={ className }>
                    <BlockControls>
                        <BlockAlignmentToolbar
                            value={ blockAlignment }
                            onChange={ blockAlignment => setAttributes( { blockAlignment } ) }
                        />
                    </BlockControls>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={ __( 'Add your custom message', 'jsforwpblocks' ) }
                        onChange={ onChangeMessage }
                        value={ message }
                    />
                    <div className="media">
                        <MediaUpload 
                            onSelect={selectImage}
                            render={ ({open}) => {
                                return <img 
                                    src={attributes.imgUrl}
                                    onClick={open}
                                    />;
                            }}
                        />
                    </div>
                </div>
            );
        },
        save: props => {
            const { attributes: { message, blockAlignment, imgUrl } } = props;
            return (
                <div
                    className={classnames(
                        `align${blockAlignment}`
                    )}
                    style={backgroundImage={imgUrl}}
                >
                    <h2>{ __( 'Call to Action', 'jsforwpblocks' ) }</h2>
                    <div class="message-body">
                        { message }
                    </div>
                </div>
            );
        },
    },
);

编辑

如果我将函数向下移动到编辑函数中，错误就会消失：

    edit: props => {
        const { attributes: { message, blockAlignment }, className, setAttributes } = props;
        const onChangeMessage = message => { setAttributes( { message } ) };

        function selectImage(value) {
            console.log(value);
            setAttributes({
                imgUrl: value.sizes.full.url,
            })
        }

        return (
            <div className={ className }>

但是，我收到一个新错误：

ReferenceError: attributes is not defined
    at Object.render (index.js:101)

第 101 行是最后一行：

    save: props => {
        const { attributes: { message, blockAlignment, imgUrl } } = props;
        return (
            <div
                className={classnames(

updated code is here (pastebin.com)。

感谢帮助。

Answer 1

我认为您必须像在 className 中所做的那样将 save 中的 props 添加到 edit 对象析构中：

const { attributes: { message, blockAlignment, imgUrl }, className } = props;

另外两件事：

下面几行您使用的是 class，我也会将其更改为 className
如果我在自定义块中使用 classnames，我总是将它添加到我的导入中：

import classnames from 'lodash/classnames'

实际上还没有尝试过它是否可以在不导入的情况下工作。

Answer 2

我刚刚在我的设置中快速检查了您的块（来自 pastebin 的原始版本 - 没有我以前的编辑），我遇到了同样的错误。但错误不是指save，而是指edit。在 imgUrl 中将 edit 添加到您的属性破坏中有所帮助（与 save 中相同）：

const { attributes: { message, blockAlignment, imgUrl }, className, setAttributes } = props;

然后只在您的 imgUrl MediaUpload return 中使用 src 像这样：

return <img src={imgUrl} onClick={open} />;

Answer 3

作为对您在 Pastebin 上的第二个文件的补充，请尝试以下替代您的保存功能：

save: props => {
            const { attributes: { message, blockAlignment, imgUrl } } = props;
            const divStyle = {
                backgroundImage: 'url(' + imgUrl + ')',
              };
            return (
                <div
                    className={classnames(
                        `align${blockAlignment}`
                    )}
                    style={divStyle}
                >
                    <h2>{ __( 'Call to Action', 'jsforwpblocks' ) }</h2>
                    <div className="message-body">
                        { message }
                    </div>
                </div>
            );
        },

而 classnames 导入实际上只是这样工作（但可能取决于您如何设置依赖项）：

import classnames from 'classnames'

古腾堡自定义块，未定义功能/属性

3 个答案: