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.
1 Answer
Reset to default 1The 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?
create-block
command. – Sally CJ Commented Oct 14, 2020 at 11:12props
is properly displaying if I put the function inline:edit(props) {console.log(props); ...
– Bloxxor Commented Oct 14, 2020 at 11:32