Interactivity API: Fix server side rendering for Search block

[cbravobernal]

What?

#58943 introduced a reversion on the search block, SSR is not working in Search block due to a escaping commas issue.

Testing Instructions

• Insert search block, only button, with text instead of an icon.
• Check that in trunk you have a movement on the input.
• Check that in this PR that movement does not happen.

Testing Instructions for Keyboard

Screenshots or screencast

Before:

before.mov

After:

after.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 95e1a79.
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/7905654479
📝 Reported issues:

• [Flaky Test] can add submenus #50976 in /test/e2e/specs/editor/blocks/navigation-list-view.spec.js
• [Flaky Test] default to a list of pages if there are no menus #47732 in /test/e2e/specs/editor/blocks/navigation.spec.js
• [Flaky Test] list view should correctly reflect navigation items' structure #58980 in /test/e2e/specs/editor/blocks/navigation-list-view.spec.js

[gziolo]

What could help to catch this type of issue with server-side rendering in the future?

[gziolo]

Code change makes perfect sense. I haven't tested it.

[cbravobernal]

What could help to catch this type of issue with server-side rendering in the future?

It is hard to test the sync between the server side and the client side. I cannot think anything rather than snapshots testing.

[gziolo]

It is hard to test the sync between the server side and the client side. I cannot think anything rather than snapshots testing.

So you would have to compare Preact's HTML output with WP's HTML output for the same chunk rendered?

[cbravobernal]

So you would have to compare Preact's HTML output with WP's HTML output for the same chunk rendered?

That would be the ideal, but maybe is easier, for core blocks, just to save a snapshot of the server render and compare if somebody changes the render_callback

[DAreRodz]

Just a note here. This case is interesting. I would have expected data-wp-interactive='"core/search"' to work because it is a valid JSON and is parsed into the core/search string (see vdom.ts#L84).

value = JSON.parse( '"core/search"' );
value === 'core/search' // true

[getdave]

I just cherry-picked this PR to the cherry-pick-beta-2 branch to get it included in the next release: 4d94d57