Interactivity API: Fix reactivity of undefined objects and arrays added with deepMerge

[DAreRodz]

What?

Fixes a regression that breaks the reactivity of props from lazily instantiated objects/arrays inside the iAPI state or context.

The bug affects all directives reading properties from any lazily instantiated objects, e.g., those created by a module loaded asynchronously or during client-side navigation, impacting developers with such cases.

At this moment, it affects the loading bar that the @wordpress/interactivity-router module shows during navigations, which currently requires the following PHP code to work correctly (link), although it shouldn't be necessary:

/*
 * Initialize the `core/router` store.
 * If the store is not initialized like this with minimal
 * navigation object, the interactivity-router script module
 * errors.
 */
$this->state(
	'core/router',
	array(
		'navigation' => new stdClass(),
	)
);

Props to @sirreal for pointing this out in sirreal/wordpress-develop#8.

Why?

The bug could affect developers whose blocks depend on lazily instantiated objects/arrays inside the iAPI state or context.

How?

This PR fixes the deepMerge() function, ensuring it "proxifies" newly created objects and arrays so they become "reactive".

Testing Instructions

The following instructions should be followed in a WP instance where this lines are removed.

To reproduce the issue:

1. Check out trunk
2. In the site editor, ensure the homepage contains a Query block with the "Force page reload" setting disabled.
3. Ensure you have enough posts to have more than one page in the Query block.
4. Visit the homepage of your dev site.
5. Log out to hide the admin top bar.
6. Open the browser dev tools. In the Network tab, set a slow throttling preset so the next page takes some time to load.
7. In the pagination block, click on "next page".
8. Check that the top bar doesn't appear.

To ensure the issue is fixed:

1. Check out this PR
2. Repeat previous steps 2 to 7.
3. Check that the top bar now appears as expected.

[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: DAreRodz <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>

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 ca60179.
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/11372332281
📝 Reported issues:

• [Flaky Test] Entering zoomed out mode zooms the canvas #66051 in /test/e2e/specs/site-editor/zoom-out.spec.js

[michalczaplinski]

This looks good to me. I would only update one of the tests as noted above.

On a somewhat related note: I would add some comments to the deepMergeRecursive() implementation because it's a complex beast 😄 . I'll send a PR with this.

[michalczaplinski]

On a somewhat related note: I would add some comments to the deepMergeRecursive() implementation because it's a complex beast 😄 . I'll send a PR with this.

Here it is: #66220

I also had some doubts about whether deepMerge() was compatible with arrays so I added a few additional tests in: #66218

[DAreRodz]

Great additions, @michalczaplinski. I'll merge them. ⭐

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/6.7 branch. Please resolve the conflict manually and create a PR to the wp/6.7 branch.

PRs to wp/6.7 are similar to PRs to trunk, but you should base your PR on the wp/6.7 branch instead of trunk.

# Checkout the wp/6.7 branch instead of trunk.
git checkout wp/6.7
# Create a new branch for your PR.
git checkout -b my-branch
# Cherry-pick the commit.
git cherry-pick 6c0bca194715f0624be38a0df2cde3d5c970a881
# Check which files have conflicts.
git status
# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue
# Push the branch to the repository
git push origin my-branch
# Create a PR and set the base to the wp/6.7 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[getdave]

@DAreRodz It looks like this didn't cherry pick cleanly to the wp/6.7 branch. It would be super helpful if you could take point on manually backporting this.

I will be cutting the packages for RC 1 on Monday morning UTC so the backport PR would need to land before then.

Many thanks

[DAreRodz]

@getdave, sure! This is the PR for the cherry-pick: #66236.

[getdave]

Thanks so much @DAreRodz. I've updated the labels here accordingly now that #66236 merged.

[priethor]

I just cherry-picked this PR to the release/19.5 branch to get it included in the next release: 8492898