How to transform a legacy widget into a block

The question:

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

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

Leave a Comment