The mistake I made was that I didn’t set the attribute property in the deprecated block to the proper value. I have to assign the expected attributes here, just as I did in block.json. If the attributes changed, I’d put the old attributes here. Since they did not change, I used the current value of attributes from block.json.
My fixed index.js file:
/**
* Registers a new block provided a unique name and an object defining its behavior.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
import { registerBlockType } from '@wordpress/blocks';
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* All files containing `style` keyword are bundled together. The code used
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
import './style.scss';
/**
* Internal dependencies
*/
import Edit from './edit';
import save from './save';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
/**
* @see ./save.js
*/
save,
deprecated: [
{
attributes: metadata.attributes,
save( props ) {
return (
<>
<h3>{ props.attributes.morecontent }</h3>
<p>{props.attributes.content}</p>
</>
);
},
},
],
} );