Question about Gutenberg transforms.to usage with multiple blocks

  • ImageXaver

    (@xaverb)


    1 month, 3 weeks ago

    Hi,

    I’m working on a custom block and using the transforms API to allow it to convert into other blocks. The docs show that you can list multiple block types in the blocks array, but I’m unsure how to handle different logic for each target.

    Here’s a simplified example:

    registerBlockType( 'my/block', {
        title: 'My Block',
        category: 'widgets',
        attributes: {
            content: { type: 'string' },
        },

        transforms: {
            to: [
                {
                    type: 'block',
                    blocks: [ 'core/paragraph', 'core/heading' ],
                    transform: ( attributes ) => {
                        // How do I know if the user picked "Paragraph" or "Heading" here?
                        return createBlock( 'core/paragraph', {
                            content: attributes.content,
                        } );
                    },
                },
            ],
        },
    } );

    My question:

    • When I provide multiple block names in the blocks array, is there a way inside the transform function to know which block type the user selected?
    • Or is the recommended approach to declare separate transform objects for each target block instead (one for core/paragraph, one for core/heading)?

    I didn’t see this clarified in the Block Transforms documentation.

    Thanks for any guidance!

Viewing 1 replies (of 1 total)
  • Imagebuildwithhimu

    (@buildwithhimu)

    1 month, 2 weeks ago

    That’s a great question. It’s one of the slightly confusing parts of the transforms API.

    The short answer is: with the structure you’re using, you don’t know which one the user picked. When you put multiple blocks inside a single transform object’s blocks array, you’re essentially telling Gutenberg that this one transform function is generic enough to handle all of them, which isn’t what you want here.

    To run different logic for each target block, you need to provide a separate transform object for each block inside the to array.

    Here is how you should structure your code:

    JavaScript

    registerBlockType( 'my/block', {
    title: 'My Block',
    category: 'widgets',
    attributes: {
        content: { type: 'string' },
    },

    transforms: {
        to: [
            {
                type: 'block',
                blocks: [ 'core/paragraph' ], // Only paragraph here
                transform: ( attributes ) => {
                    // This logic only runs when transforming TO a Paragraph
                    return createBlock( 'core/paragraph', {
                        content: attributes.content,
                    } );
                },
            },
            {
                type: 'block',
                blocks: [ 'core/heading' ], // Only heading here
                transform: ( attributes ) => {
                    // This logic only runs when transforming TO a Heading
                    return createBlock( 'core/heading', {
                        content: attributes.content,
                        // You could add other default attributes here
                        // level: 2, 
                    } );
                },
            },
        ],
    },
} );
Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.