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

如何解决古腾堡自定义块，未定义功能/属性

我收到控制台错误

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',category: 'common',icon: {
            background: 'rgba(254,243,224,0.52)',src: icon,},keywords: [
            __( 'Banner',__( 'Call to Action',__( 'Message',],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,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,imgurl } } = props;
        return (
            <div
                className={classnames(

updated code is here (pastebin.com)。

感谢帮助。

解决方法

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

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

另外两件事：

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

import classnames from 'lodash/classnames'

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

,

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

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

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

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

,

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

save: props => {
            const { attributes: { message,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'