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.

• javascript
• block-editor

• 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

1 Answer 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?