Add data-wp-key attribute

[luisherranz]

Sometimes we are going to need a key prop in some tags to improve the client-side navigation diffing, but key is not a valid HTML attribute. I suggest adding data-wp-key and then copying its value to props.key during the creation of the virtual nodes.

[SantosGuillamot]

For reference, we needed a key prop to improve the diffing of the images in the Movies demo. We ended up using the HTML Tag Processor to add a key attribute to all the images, but it would be great to have that data-wp-key attribute.

[luisherranz]

You ended up implementing this in the movies demo, didn't you Mario? If so, could you add a link to the code for reference?

[SantosGuillamot]

Yes, I got it working as part of the View Transitions API experiment, combining these two pull requests: one in the Block Hydration Experiments (link), and another in the Movies Demo (link).

If I remember correctly, to support the data-wp-key attribute, this is the relevant code: link.

[luisherranz]

Thanks!!

[luisherranz]

Also implemented in Woo in this PR: woocommerce/woocommerce-blocks#10604

[luisherranz]

Implemented in #53844.

• Interactivity API: Support for the data-wp-key directive #53844

[luisherranz]

I wonder if we should also use id as the key: If the element has an id and doesn't have a data-wp-key, use the id as the key.

What do you think?

[SantosGuillamot]

It could make sense. It would enable the possibility to define a data-wp-key through the editor, through the anchor input field.

On the other hand, I didn't think about it too much, but could this create unexpected behaviors? I'm thinking about unexpected duplicated data-wp-key, or plugins relying on data-wp-key assuming they have been added consciously.

[luisherranz]

I guess it's possible but highly unlikely because keys only need to be unique among their siblings.

Anyway, it's just a possibility. We can keep it in mind, but we don't have to do it yet 🙂

[luisherranz]

I'm going to close this as finished. We will reopen if necessary.