Block validation triggers when reverting a class change

[johngodley]

Describe the bug

If you add a new class name to a block with an existing class and then remove that class it triggers a validation warning even though the content is correct.

To Reproduce

1. Create a quote block
2. Edit the HTML of the quote block and add another class in the <blockquote>:
   <blockquote class="wp-block-quote newclass”><p>fdsfsdfsdd</p></blockquote>
3. Tab out of the editor and notice that no warning is shown
4. Edit HTML again and remove the newclass
5. Tab out and trigger a validation failure, even though the HTML is exactly as it should be

Expected behavior
I'm not sure if changing the class should trigger a validation error, but I don't think removing the new class should.

Further details
Looking into this deeper the isValidBlock code in validation.js runs when a block has been edited. When the new class is added the code is passed innerHTML:

<blockquote class="wp-block-quote newclass”><p>fdsfsdfsdd</p></blockquote>

It saves the block to compare the difference and produces:

<blockquote class="wp-block-quote newclass”><p>fdsfsdfsdd</p></blockquote>

Note that the saved block also (incorrectly?) contains the new class. As the HTML is the same no warning is shown. Although this may be a desirable outcome it seems the result of an accident, and may be the source of the problem.

When you then remove the class the innerHTML is passed:

<blockquote class="wp-block-quote"><p>fdsfsdfsdd</p></blockquote>

However the saved block content is:

<blockquote class="wp-block-quote newclass”><p>fdsfsdfsdd</p></blockquote>

And so it incorrectly triggers an invalid content warning.

I’m not quite sure what is supposed to happen, and I haven’t tried it with other attributes. I’m investigating further as part of #7604 so will report here more findings.