Widget Editor: Remove the "Top Toolbar" setting on small screens

WordPress · Jun 15, 2021 · a8ec9c1 · a8ec9c1
1 parent 72e3920
commit a8ec9c1
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js
@@ -12,6 +12,7 @@ import { __, _x } from '@wordpress/i18n';
 import { external, moreVertical } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -43,6 +44,8 @@ export default function MoreMenu() {
 		}
 	);
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	return (
 		<>
 			<DropdownMenu
@@ -55,21 +58,23 @@ export default function MoreMenu() {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<FeatureToggle
-								feature="fixedToolbar"
-								label={ __( 'Top toolbar' ) }
-								info={ __(
-									'Access all block and document tools in a single place'
-								) }
-								messageActivated={ __(
-									'Top toolbar activated'
-								) }
-								messageDeactivated={ __(
-									'Top toolbar deactivated'
-								) }
-							/>
-						</MenuGroup>
+						{ isLargeViewport && (
+							<MenuGroup label={ _x( 'View', 'noun' ) }>
+								<FeatureToggle
+									feature="fixedToolbar"
+									label={ __( 'Top toolbar' ) }
+									info={ __(
+										'Access all block and document tools in a single place'
+									) }
+									messageActivated={ __(
+										'Top toolbar activated'
+									) }
+									messageDeactivated={ __(
+										'Top toolbar deactivated'
+									) }
+								/>
+							</MenuGroup>
+						) }
 						<MenuGroup label={ __( 'Tools' ) }>
 							<MenuItem
 								onClick={ () => {