Description

For example, suppose you set the link color of the parent block (Group) to red and the link color of the child block (Paragraph) to blue. In this case, you would expect the inline styles to be output in the following order, with the child settings taking precedence

// Link style for the group block
.wp-elements-XXXXXXXXXXXXXXXXXXXXXXXXXX a {
    color: #ff0000; // red
}

// Link style for the paragraph block
.wp-elements-XXXXXXXXXXXXXXXXXXXXXXXXXX a {
    color: #0000ff; // blue
}

This order is kept correctly on the front end. It also remains normal immediately after loading the editor. However, if the link color of the group block is reset and the link color is changed again, the inline style order is reversed as follows:

// Link style for the paragraph block
.wp-elements-XXXXXXXXXXXXXXXXXXXXXXXXXX a {
    color: #0000ff; // blue
}

// Link style for the group block
.wp-elements-XXXXXXXXXXXXXXXXXXXXXXXXXX a {
    color: #ff0000; // red
}

This results in a different link color than the front end. I think the logic on the editor side needs to be such that the nested block styles are always output later.

Step-by-step reproduction instructions

• Insert a Group block and set the link color to red.
• Insert a paragraph block inside the group block and set the link color to blue.
• Apply the link to the text of the paragraph.
• The link color should be blue (correct).
• In the parent group block, re-set the link color to red.
• The paragraph's link color should change from blue to red (incorrect).
• Save the post and check in the front end, the paragraph's link color should be blue (correct)
• Reload the editor, the paragraph link color should be blue (correct)

Screenshots, screen recording, code snippet

Environment info

No response

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