How do you use edit.js and save.js when using @wordpress/create-block

I’m just now learning WP block development, however, I’ve been creating NextJS React apps for over a year now, and have an okay grasp on React in general.

The WP documentation points to using npx @wordpress/create-block to generate a new block file structure. This is pretty cool, and saves a lot of typing! Out of the box, it looks like this:

registerBlockType( 'create-block/some-block-name, {
  .... other stuff ...
  edit: Edit,
  save,
}

This command generates and edit.js and a save.js. In concept, that seems pretty self explanatory, but how do you pass attributes through to create editable blocks?

registerBlockType( 'create-block/some-block-name', {
  .... other stuff ...
  edit: Edit,  <--- how do we pass attributes to this? (points to edit.js)
  save,
}

All documentation or examples I can find simply pass (props) into edit: and save: in the index.js file. Like this:

registerBlockType( 'create-block/some-block-name', {
  .... other stuff ...
  edit: (props) => {
    ... do some stuff ...
  },
  save: (props) => {
    ... do some stuff ...
  },
}

What is the new WordPress standard for this? Should I be using edit.js and save.js, or just do all the work in the index.js file, and ignore these files?

Leave a Comment