Fix Product Search block in last Gutenberg release

[Aljullu]

Fixes #1825.

It took me a while to understand what was going on in #1825 and I don't fully understand everything yet. What I found out is that using React hooks inside the render function doesn't play well with Gutenberg and makes it crash.

In fact, we were not directly using React hooks in the render function, but we used withInstanceId, which was updated recently to use hooks (see WordPress/gutenberg#19091).

In order to fix this, and considering we only need the instanceId in the editor, this PR splits ProductSearchBlock into two components: one for the save function and another one for the editor, as we do for most of the other blocks.

Note: if it's difficult to merge this PR into release/2.5, e101b0c is a quick work-around that switches withInstanceId from Gutenberg for our withComponentId, which doesn't use hooks internally so it doesn't make the block crash. But that is not a future-proof solution because if we ever changed withComponentId to use hooks, the issue would appear again. So at least in master we should merge this PR entirely.

How to test the changes in this Pull Request:

1. In master with Gutenberg disabled create a post or page with a Product Search block.
2. Reload the post and notice everything works.
3. Enable Gutenberg or switch to WP 5.4 dev versions.
4. Reload the post and notice it crashes when loading.
5. Check out this branch and reload the post again.
6. Verify it loads and you can add more Product Search blocks and reload as many times as you want.
7. Preview the post in the frontend and verify the block appears.

Changelog

Product Search block is now compatible with WordPress 5.4 and the last versions of Gutenberg.

[nerrad]

Code looks okay, however I can't test easily at the moment so I've asked @mikejolley if he can look over as well including testing verification as well.

I don't fully understand everything yet. What I found out is that using React hooks inside the render function doesn't play well with Gutenberg and makes it crash.

Ah yes, we got bit by this. The reason this is happening because the save function is expected to be pure. The custom serializer GB is using does not support react hooks. Something to keep in mind for any of the blocks we build that we're careful how we implement the value for save. For more background see this pull I created. It looks like I may have to revisit that pull I started in GB and see if I can get something shipped that allows for hook usage.

I think we should get this into the 2.5 branch for the next release so it gets in WC 3.9.3 as well. This means:

• test that product search block works as expected (using your testing notes)
• test there are no validation issues with pre-existing blocks created outside this branch being loaded in the editor on this branch (if there are, that will need addressed).

[mikejolley]

Tested following those instructions and it works as you say. 👍