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.

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
    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
    Oct 14, 2020 at 11:32

1 Answer 1

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?

2
  • 1
    That import ind the edit.js was a mistake, I corrected that, sorry.
    – Bloxxor
    Oct 14, 2020 at 14:04
  • 1
    Thank you, that pointed me in the right direction. The function Edit has the comment: @param {Object} [props] Properties passed from the editor. So they already contain the content, which I misunderstood. Also I looked at developer.wordpress.org/block-editor/tutorials/create-block/…. I missed some things, it is working now.
    – Bloxxor
    Oct 14, 2020 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.