Fix: Activate zoom out on large viewport

[PARTHVATALIYA]

What?

Solve #66205

Why?

Part of #66205

Testing Instructions

• Open the post editor.
• Open the main inserter.
• Click the Patterns tab.

[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: PARTHVATALIYA <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: getdave <[email protected]>

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

[getdave]

Thank you for this PR 👍

To test this accurately I needed to set my viewport to around 587px. Is that right?

Here's what I saw

Before (trunk)

After (this branch)

Once this is merged we'll need a similar fix targeting wp/6.7 branch. Let's wait for this one to merge before we tackle that though so as not to duplicate effort.

Thanks again for your contribution here 🙇

[t-hamano]

Thanks for the PR!

I think we need to add isWideViewport to the useEffect hook dependencies (here and here) to completely solve this issue, otherwise the inserter width will not change if we change the viewport width with the Patterns tab open:

1e4f54c3670a65fe34194ccbf6949c3c.mp4

[t-hamano]

LGTM!

@getdave Does this PR need a backport label? Is it okay to merge it as is, since the automatic cherry-pick will probably fail?

Either way, I think we need a separate PR for wp/6.7.

[t-hamano]

Merged trunk to fix lint errors. See #66316.

[t-hamano]

Just to be safe, I will remove the backport label before merging. I will create a PR for WP 6.7 now.

[getdave]

@t-hamano Yes let's do a manual backport and then add to the 6.7 board for review. Thanks

[getdave]

Manual backport in #66330

[jeryj]

I don't think this is the fix we want. I think the viewport check should be passed into the useZoomOut() hook. I opened a PR to demonstrate what I mean: #66341