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 '20 at 11:12
  • Yes, es5 blocks are working, props is properly displaying if I put the function inline: edit(props) {console.log(props); ...
    – roxxor
    Oct 14 '20 at 11:32
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.
    – roxxor
    Oct 14 '20 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.
    – roxxor
    Oct 14 '20 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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