Inserter: Small width when Pattern tab is selected in mobile layout

[t-hamano]

Description

This issue does not occur in WordPress 6.7 Beta3. It occurs in the wp/6.7 branch and the latest Gutenberg.

I think we need to fix this so that it doesn't ship in WordPress 6.7 RC1.

Step-by-step reproduction instructions

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

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[PARTHVATALIYA]

Hi @t-hamano,

I’ve tested the issue and created a patch that resolves it. I’ve also attached a video demonstrating the solution. If the patch looks good, I’d be happy to submit a PR.

patch:

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index bdd4ff11ab..c342760460 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -80,7 +80,10 @@ function InserterMenu(
 
 	const shouldUseZoomOut =
 		selectedTab === 'patterns' || selectedTab === 'media';
-	useZoomOut( shouldUseZoomOut );
+
+	const isWideViewport = useViewportMatch( 'large' );
+
+	useZoomOut( shouldUseZoomOut && isWideViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -312,7 +315,7 @@ function InserterMenu(
 		<div
 			className={ clsx( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
-				'is-zoom-out': isZoomOutMode,
+				'is-zoom-out': isZoomOutMode && isWideViewport,
 			} ) }
 			ref={ ref }
 		>

After patch:
https://github.com/user-attachments/assets/9b841df8-7239-48b7-b628-a0b3023b5145

thanks.

[t-hamano]

@PARTHVATALIYA Thanks for the suggestion. My guess is that the useZoomOut hook itself may need to be modified. Please see this comment.

[getdave]

@PARTHVATALIYA Will you be able to raise a PR for that changeset? It looks like it is the correct solution.

[PARTHVATALIYA]

I’m happy to raise a PR for this issue, but I’m a bit unsure whether I should modify the useZoomOut hook or the menu inserter itself.

[getdave]

To me it feels like zoom out needs to be aware of the it's restriction to only be active on larger viewports.

So for me we should modify the hook because the viewport information is relevant to that context.

[t-hamano]

@PARTHVATALIYA

Would you try submitting a PR? However, since the useZoomOut hook is heavily changed by #66141, we'll probably need to submit separate PRs to both the trunk and the wp/6.7 branch. I'd be happy to help out.

[PARTHVATALIYA]

@t-hamano, I have submitted a PR. Could you please review it and provide any suggestions if necessary?

[t-hamano]

Fixed by #66308

The PR for WordPress 6.7 is #66330.

[getdave]

As this is still an Issue in WP 6.7 I'm going to reopen this until a fix lands there.