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?

here is solutions:

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Solution 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.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

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 Reply