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):


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(
                        attribute1: instance.raw.attribute1,
                        attribute2: instance.raw.attribute2,
                if ( ! instance.raw?.title ) {
                    return transformedBlock;
                return [
                    createBlock( 'core/heading', {
                        content: instance.raw.title,
                    } ),


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?

  • 1
    Note that at the time this question was asked, the block based widget editor has yet to be finalised and is due to be included in the as yet unreleased WordPress 5.8.
    – Tom J Nowell
    Jun 16, 2021 at 17:13
  • Yep, I'm trying the beta2 at the moment.
    – leemon
    Jun 16, 2021 at 17:20
  • Hello, I'm not familiar with block editor at all. Trying to migrate legacy widget to a block but stuck at #2 (Add block transform). I don't know how or where to add those transform:{..} code. Do you know any example? Thanks.
    – vee
    Jan 11, 2022 at 3:12

1 Answer 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.

  • 1
    i have a question for you, where to put javascript file... what to name it? etc... the docs mention block's definition ... where is that? can you help please?
    – shadi
    Oct 5, 2021 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.