Post Title: link color not applied in the view

[jffng]

Description

Attempting to change the post title's link color does not work.

Step-by-step reproduction instructions

Add some markup like this to a template:

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":10}} -->
<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
<!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-red"}}}}} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

Verify the link color is correct in the editor, but not the front end.

Screenshots, screen recording, code snippet

Using emptytheme:

Editor	View

Environment info

• Gutenberg trunk
• Chrome latest, Safari, Firefox

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Hi @jffng,

Thanks for the report.

I believe this issue is related to #50906.

As far as I can tell, this problem occurs in all blocks that have a parent block. For example, if a link color is applied to a block within a group block, the link color is not applied on the front end:

Editor

Frontend

The link text color is applied by using the gutenberg_get_elements_class_name() function to generate an md5 hash value based on the serialized value of the block array and using a class name such as .wp-elements-{hash}. I believe the problem is caused by the difference between the class name applied to the rendered block and the hash value of the generated CSS selector.

First, the CSS selector is generated by the pre_render_block hook.

Then the render_block_data hook adds a new is_inner_block key to the array if the parent block exists.

Subsequently, the render_block hook adds the class name to the block to be rendered. However, since the block array contains a new is_inner_block key, a different hash value is generated than for the CSS selector.

This problem would also occur if the developer used hooks related to the rendering of blocks and altered the array of blocks, so a radical approach might be necessary.

[luisherranz]

So it's just that we are adding extra is_inner_block keys, right? Would it suffice if we change that key to something else, like is_not_root_block, or even something more specific to the Interactivity API?

[luisherranz]

I'm looking into this. Any extra key breaks it, so I'm looking for an alternative solution.

[luisherranz]

I filled a PR with a fix.

[t-hamano]

@luisherranz Thanks for submitting the PR. I have confirmed that this issue has been fixed in the latest trunk 🎉

[luisherranz]

Thanks to you, @t-hamano. Your triage was super helpful to fix the issue.