3

In the event that a custom block that is already deployed on the site needs to be updated, I'd like to do so in a way that doesn't trigger the 'This block has invalid content' error.

I found that this is possible by adding a deprecated property to the registerBlockType function. However, adding this property creates a new error which says:

Your site doesn’t include support for the "toms/first-block" block.
You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.

This is my code: index.js

/**
 * 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,

            save( props ) {
                return (
                    <>
                        <h3>{ props.attributes.morecontent }</h3>
                        <p>{props.attributes.content}</p>
                    </>
                );
            },
        },
    ],
} );

edit.js

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';
import { BlockToolbar } from '@wordpress/block-editor';

const MyBlockToolbar = () => <BlockToolbar />;
/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, BlockControls } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit(props) {
    const {attributes, setAttributes} = props;
    return (
        <>
        <MyBlockToolbar />
        <RichText
        tagName='h2'
        value={attributes.morecontent}
        onChange={(morecontent)=>setAttributes({morecontent})}
        placeholder = 'Type Content Here'
        />
        <RichText
        tagName='p'
        value={attributes.content}
        onChange={(content)=>setAttributes({content})}
        placeholder = 'Type Content Here'
        />
        </>
    );
}

save.js

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save(props) {
    const {attributes} = props;
    return (
        <>
        <RichText.Content
        tagName='h2'
        value={attributes.morecontent}
        />
        <RichText.Content
        tagName='p'
        value={attributes.content}
        />
        </>
    );
}
2
  • Is your block triggering an error in the browser console? Does it work again if you remove the deprecated property? Is the content of the deprecated->save exactly the same as the previous function?
    – Tim
    Dec 1, 2022 at 15:41
  • 1
    Thank you for reminding me to check SCRIPT_DEBUG on. That tipped me off to the problem. Dec 1, 2022 at 18:23

1 Answer 1

3

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>
                    </>
                );
            },
        },
    ],
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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