How to transform a legacy widget into a block

WP 5.8 (not released yet) will include support for transforming legacy widgets into blocks. I have a custom legacy widget I’m trying to add support for transforming it into a block. Reading the docs I added the following code to one of my blocks. My legacy widget had two attributes (attribute1 and attribute2):

JAVASCRIPT:

transforms: {
    from: [
        {
            type: 'block',
            blocks: [ 'my/custom-block' ],
            isMatch: ( { idBase, instance } ) => {
                if ( ! instance?.raw ) {
                    // Can't transform if raw instance is not shown in REST API.
                    return false;
                }
                return idBase === 'my-custom-widget';
            },
            transform: ( { instance } ) => {
                const transformedBlock = createBlock(
                    'my/custom-block',
                    {
                        attribute1: instance.raw.attribute1,
                        attribute2: instance.raw.attribute2,
                    }
                );
                if ( ! instance.raw?.title ) {
                    return transformedBlock;
                }
                return [
                    createBlock( 'core/heading', {
                        content: instance.raw.title,
                    } ),
                    transformedBlock,
                ];
            },
        },
    ]
},

PHP:

This is the __construct() function in my legacy widget. I added the show_instance_in_rest arg so the widget can be seen in the REST API:

function __construct() {
    $widget_ops = array(
        'classname'             => 'my-custom-widget',
        'show_instance_in_rest' => true
    );
    parent::__construct( 'my-custom-widget', 'My Custom Widget', $widget_ops );
}

But when I click the Transform button in the new widget editor in WP 5.8 beta2, there is no option to transform it into my custom block, just into the Columns and Group blocks.

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In case anyone is interested, I’m answering my question:

The blocks parameter in the transform code should be [ 'core/legacy-widget' ] instead of [ 'my/custom-block' ]. For a from transform it indicates the block(s) you want to transform from, which in this case is a legacy widget.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0