Widget Editor: Hide some settings from the "Options" menu on small sc…

…reens (#32690)
WordPress · Jun 21, 2021 · ba36475 · ba36475
1 parent 2026214
commit ba36475
Showing 1 changed file with 35 additions and 28 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={ () => {
@@ -117,19 +122,21 @@ export default function MoreMenu() {
 									'Contain text cursor inside block deactivated'
 								) }
 							/>
-							<FeatureToggle
-								feature="showBlockBreadcrumbs"
-								label={ __( 'Display block breadcrumbs' ) }
-								info={ __(
-									'Shows block breadcrumbs at the bottom of the editor.'
-								) }
-								messageActivated={ __(
-									'Display block breadcrumbs activated'
-								) }
-								messageDeactivated={ __(
-									'Display block breadcrumbs deactivated'
-								) }
-							/>
+							{ isLargeViewport && (
+								<FeatureToggle
+									feature="showBlockBreadcrumbs"
+									label={ __( 'Display block breadcrumbs' ) }
+									info={ __(
+										'Shows block breadcrumbs at the bottom of the editor.'
+									) }
+									messageActivated={ __(
+										'Display block breadcrumbs activated'
+									) }
+									messageDeactivated={ __(
+										'Display block breadcrumbs deactivated'
+									) }
+								/>
+							) }
 						</MenuGroup>
 					</>
 				) }