Fix md5 class messed up with new block key

[luisherranz]

What?

Fix a mismatch between the class added to some blocks and the styles added to the page.

Fixes #52195.

Why?

Because the styles engine is using an md5 of the block array, and adding keys to the array (like $block['is_inner_block]) changes the md5.

How?

Instead of adding a new key to $block, I used the same md5 technique to keep an array of root blocks.

Testing Instructions

Check that the md5-generated class works again:

• Add this markup to a post:

  <!-- 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 -->

• Save the post
• Open the post in the frontend
• Check that color of the post title is red

Check that the Interactivity API server-side rendering still works fine:

• Open a post
• Add an HTML block
• Paste this code

  <div data-wp-context='{ "hide": false, "color": "red" }'>
    <div
      class="another"
      style="text-decoration: underline"
      data-wp-bind--hidden="context.hide"
      data-wp-class--show="!context.hide"
      data-wp-style--color="context.color"
      data-wp-text="context.color"
    >
      default value
    </div>
  </div>

• Take a look at the frontend, there should be a red underlined text saying "red" with the class "show"
• Change the "color" to "blue".
• Now there should be a blue underlined text saying "blue"
• Change "hide" to true.
• The text now should have a hidden attribute and the "show" class should not be there anymore

[github-actions]

Flaky tests detected in 083422e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5529728371
📝 Reported issues:

• [Flaky Test] Block context is reflected in the preview #48826 in specs/editor/plugins/block-context.test.js

[michalczaplinski]

Nice! Tested and works as expected 👍

[DAreRodz]

I've just tested it in http://gutenberg.run, and it works as mentioned. 👍

The code looks good to me, although I'd prefer someone else to also take a look. 🙂 EDIT: Michal already reviewed, approved, and merged the PR. 😄

PS: I guess it is explained somewhere in the file what "root blocks" are, as we're already using that term in other functions. They are the root block of a block tree containing directives, right?

[luisherranz]

I guess it is explained somewhere in the file what "root blocks" are, as we're already using that term in other functions. They are the root block of a block tree containing directives, right?

It's a temporary measure to process the directives, but it's not even the correct one because we are processing the blocks multiple times and also processing them as part of a parent block where the search for the data-wp- optimization doesn't make much sense. We need to study the render pipeline and find the best place to process the directives, so they are processed only once and only their HTML is processed (and not their children's).

[ockham]

Cherry-picked to release/16.2 in cbec878.