最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Custom Gutenberg-Block esnext pass variables

programmeradmin0浏览0评论

I am trying to create a Block with @wordpress/create-block, for this you have to use exnext. I`m not pretty good with JS at the moment, still learning.

So far it is working (the block appears in the editor).

The files are created with separate files and export functions.

index.js with

import Edit from './edit';

/**
* @see ./edit.js
*/
edit: Edit,

edit.js with

export default function Edit({className, props}) {

    console.log(props);

    return (
        <div>
            <p>
                Text
            </p>
        </div>
    )

}

The className is available in the Edit function export default function Edit({className}) { ... }, but I cannot get props variable.

I am trying to create a Block with @wordpress/create-block, for this you have to use exnext. I`m not pretty good with JS at the moment, still learning.

So far it is working (the block appears in the editor).

The files are created with separate files and export functions.

index.js with

import Edit from './edit';

/**
* @see ./edit.js
*/
edit: Edit,

edit.js with

export default function Edit({className, props}) {

    console.log(props);

    return (
        <div>
            <p>
                Text
            </p>
        </div>
    )

}

The className is available in the Edit function export default function Edit({className}) { ... }, but I cannot get props variable.

Share Improve this question edited Oct 14, 2020 at 14:02 Bloxxor asked Oct 14, 2020 at 10:58 BloxxorBloxxor 435 bronze badges 2
  • Did you follow the tutorial before you actually used the @wordpress/create-block package to create your block? You could also start with a simple block before using the create-block command. – Sally CJ Commented Oct 14, 2020 at 11:12
  • Yes, es5 blocks are working, props is properly displaying if I put the function inline: edit(props) {console.log(props); ... – Bloxxor Commented Oct 14, 2020 at 11:32
Add a comment  | 

1 Answer 1

Reset to default 1

The problem in your "edit" file is that your Edit() function in there is unpacking/destructuring the props, hence props is no longer defined or what you expected it to be.

So you should do function Edit( props ) and not function Edit({className, props}) — and it should be noted that className is in that props, i.e. props.className.

function Edit( props ) {
  console.log( props.className, props );
}

// .. Or when unpacking the props object:

// Assuming your block got an attribute named myAttribute.
function Edit( { attributes, setAttributes, className } ) {
  console.log( className, attributes.myAttribute );
}

I hope that helps and I suggest you to check, if you haven't already done so, the block editor handbook, e.g. the "Edit and Save" section.

BTW, you don't actually have that import Edit from './edit'; in the edit.js file, do you?

发布评论

评论列表(0)

  1. 暂无评论