Interactivity API directives support invalid data attribute characters on the server

[jonsurrell]

The Interactivity API client filters directive data attributes to ignore invalid data attributes. The server does not.

This leads to a situation where the server processes directives that the client does not, when the two implementation should agree.

For example:

<style>
.be\[red\] {background-color: red;}
.b { border: 3px dotted black;}
</style>
<div data-wp-interactive="example" data-wp-context='{"a":true}'>
  <div data-wp-class--be[red]="context.a">Demo Div</div>
</div>
<button data-wp-on--click="toggleCtxA">toggle ctx a</button>

This produces a red div on the server. The client does not recognize the data-wp-class--be[red] directive. Clicking the button toggles the context (adding and removing a border) but the class triggering the red background is ignored by the client and cannot be toggled.

[jonsurrell]

There was some discussion in ​this Gutenberg PR. The conclusion was the the server should be more restrictive to match the client.

CC @luisherranz.

This is related to #62131