Adding custom blocks

[edjeavons]

After a lot of experimentation I still can't find the correct way to add custom blocks to the editor. I'm using it outside of WordPress and here's a minimal example of what I'm trying. What have I got wrong?

Sorry to use the issue tracker to ask a support question but I think the answer will help others too.

import {registerBlockCollection, registerBlockType} from '@wordpress/blocks';

window.wp = {
    ...(window.wp ?? {}),
    registerBlockCollection,
    registerBlockType,
};

// Register the collection.
wp.registerBlockCollection( 'my-collection', {
    title: 'Custom Collection',
} );

// Register a block in the same namespace to add it to the collection.
wp.registerBlockType( 'my-collection/block-name', {
    title: 'My First Block',
    edit: () => <div>'Hello from the editor!'</div>,
    save: () => <div>'Hello from the saved content!</div>,
} );

wp.attachEditor(document.getElementById('editor'));

[johngodley]

You don't appear to be using the Isolated Block Editor here and are just directly using Gutenberg?

Also you are importing functions and using the globals - you should pick one or the other.

[edjeavons]

Thanks for the reply.

Apologies if I've got a fundamental misunderstanding but I'm trying to use it as per https://github.com/Automattic/isolated-block-editor/tree/trunk/src/browser. Should that allow custom blocks or am I trying to achieve the impossible?

[johngodley]

Yes, custom blocks are possible. I have not tried your code directly, or tried with a block collection, but you may want to check your are registering things correctly and at the right time. That is, you are not registering too early and maybe Gutenberg is clearing all registered blocks when initialised.

[johngodley]

Closing this for now, please reopen with more details.