CODEWITHSUNDEEP
javascriptwordpress
Ben Kaplan
Ben Kaplan

Reputation: 31

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?

Upvotes: 2

Views: 2643

Answers (2)

Ben Kaplan
Ben Kaplan

Reputation: 31

I've been able to figure this out.

I was getting lost in the WordPress documentation, as most of it refers to using the edit and save parts of the index.js for functionality. There is other documentation that has you put the functionality into the edit.js and save.js files.

The combination of passing the array of {attributes, className, setAttributes} in the react hook like way, as well as using the WP useBlockProps() was what I was missing in the documentation.

Here's a generic index.js file that registers a block:

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';
    registerBlockType( 'my-custom-blocks/header-bg-line', {
        attributes: {
            content: {
                type: "string",
                source: "html",
                selector: "h2",
            },
        },
        supports: {
            html: true,
        },
        edit: Edit,
        save,
    });

Here are the sample edit.js and save.js files that work correctly:

edit.js

import { useBlockProps, RichText  } from '@wordpress/block-editor';
export default function Edit({ attributes, setAttributes, className }) {
    const blockProps = useBlockProps();
    return (
        <h2 {...blockProps}>
            <RichText
                tagName="span"
                value={attributes.content}
                allowedFormats={["core/italic"]}
                onChange={(content) => setAttributes({ content })}
                placeholder={__("Heading with a background line...")}
            />
        </h2>
    );
}

save.js

import { useBlockProps, RichText  } from '@wordpress/block-editor';
export default function save({ attributes }) {
    const blockProps = useBlockProps.save();
    return (
      <h2 {...blockProps}>
        <RichText.Content
            tagName="span"
            value={attributes.content}
        />
      </h2>
    );
}

Upvotes: 1

tdesero
tdesero

Reputation: 201

Look inside the index.js file. The save.js and edit.js are just imported there. I think it is up to you, whether you use them or simply put everything inside index.js. If your functions get large, it is probably better to put them in separate files.

Upvotes: 0

Related Questions