manually duplicate serialized block

[pwkip]

Maybe not so much an issue, but just something I'm wondering about.

Say, I have a block like this:

<!-- wp:acf/files {
    "id":"block_5f5f66a404b23",
    "name":"acf/files",
    "data": { 
        "files_0_file":8460,
        "_files_0_file":"field_5f3e4591bd4e6",
        "files_0_filename":"My first file",
        "_files_0_filename":"field_5f46b891c44ef",
        "files_1_file":920,"_files_1_file":"field_5f3e4591bd4e6",
        "files_1_filename":"My second file",
        "_files_1_filename":"field_5f46b891c44ef",
        "files":2,"_files":"field_5f3e4578bd4e5"
    },
    "mode":"edit"
} /-->

But I would like to duplicate it manually, so my HTML code will look like this:

<!-- wp:acf/files {
    "id":"block_5f5f66a404b23",
    "name":"acf/files",
    "data": { 
        ...
    },
    "mode":"edit"
} /-->
<!-- wp:acf/files {
    "id":"block_5f5f66a404b23",
    "name":"acf/files",
    "data": { 
        ...
    },
    "mode":"edit"
} /-->

Now I end up with 2 blocks with the same ID. If I make changes to the second block, they are not reflected on the front-end, I guess because the 2 blocks share the same ID. So if I wanted to duplicate a block like this, can I just update the ID with anything I like (as long as I know it is unique)?

So for example: will this work, without any additional complications?

<!-- wp:acf/files {
    "id":"block_5f5f66a404b23",
    "name":"acf/files",
    "data": { 
        ...
    },
    "mode":"edit"
} /-->
<!-- wp:acf/files {
    "id":"block_my_own_unique_id",
    "name":"acf/files",
    "data": { 
        ...
    },
    "mode":"edit"
} /-->

[pwkip]

I'm solving it now by generating the block id with uniqid('block_'). This seems to work great. If you can confirm that this is an appropriate way to handle this kind of manual (programmatic) duplication, this issue can be closed I think.

[elliotcondon]

Hi @pwkip

Thanks for the question. Yes, each block requires a unique ID in the format "block_x". As you have encountered, if two blocks use the same ID, they will update each other's content, similar to if two Posts had the same ID 👍.

[CreativeDive]

Hey @elliotcondon Is there any progress in changing the IDs automatically if they already exist?

[elliotcondon]

@CreativeDive Unfortunately not. The conversation with Gutenberg team went stale. I'm not aware of any API changes that would allow us to listen for the paste block event.

[pwkip]

I do believe the block IDs update automatically as long as you duplicate the block via the Gutenberg interface.

When you duplicate the block code manually, however, it seems like you need to update the block id manually as well. I guess ACF could do a sanity check on post save, and ensure that there are no duplicate block IDs. Or are there valid cases where 2 blocks can have the same ID?

[CreativeDive]

@elliotcondon and @pwkip I think it would prevent many problems in the future if the ID was updated automatically. I see a big problem in copying and pasting blocks. I use e.g. post types to edit other areas of a website with the gutenberg editor. For example, if I copy an ACF block from post type A to post type B. Then the block from post type B always has the properties of the block from post type A.

[elliotcondon]

@CreativeDive @pwkip We are all in agreement here 👍. The best case scenario is to hook into the "paste block" event and generate a fresh block ID. We have a solution for this when duplicating a block within the same post, but not when pasting a block (or using a block within other features such as block-patterns) into a post.

You can follow the discussion on this GitHub issue, but please do not use this as a forum to push the feature-request. The Gutenberg team do not respond well to this kind of behavior. WordPress/gutenberg#23377