Consistent naming of isLargeViewport

isLargeViewport is used as both useViewportMatch( 'medium' ) and useViewportMatch( 'large' ). useViewportMatch( 'medium' ) to mean isLargeViewport seem s to be the standardized way, so useViewportMatch( 'large' ) should equate to the size above it - isWideViewport.
WordPress · Nov 10, 2023 · 4941d98 · 4941d98
1 parent 558ff4a
commit 4941d98
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -65,7 +65,7 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		clientId,
 		hasFixedToolbar,

diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js
@@ -33,7 +33,7 @@ function Header( {
 	setIsInserterOpened,
 	isFixedToolbarActive,
 } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const [ [ hasUndo, hasRedo ], setUndoRedo ] = useState( [
 		sidebar.hasUndo(),

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -56,7 +56,8 @@ function Header( {
 	setEntitiesSavedStatesCallback,
 	setListViewToggleElement,
 } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const {
 		blockSelectionStart,
@@ -182,13 +183,13 @@ function Header( {
 						setEntitiesSavedStatesCallback
 					}
 				/>
-				{ ( isLargeViewport || ! showIconLabels ) && (
+				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						<PinnedItems.Slot scope="core/edit-post" />
 						<MoreMenu showIconLabels={ showIconLabels } />
 					</>
 				) }
-				{ showIconLabels && ! isLargeViewport && (
+				{ showIconLabels && ! isWideViewport && (
 					<MoreMenu showIconLabels={ showIconLabels } />
 				) }
 			</motion.div>

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -96,7 +96,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 		};
 	}, [] );
 
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
 	const blockToolbarRef = useRef();
 

diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -21,8 +21,7 @@ import { unlock } from '../../lock-unlock';
 const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
 
 function Header( { setListViewToggleElement } ) {
-	const isMediumViewport = useViewportMatch( 'medium' );
-	const isLargeViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const { hasFixedToolbar } = useSelect(
 		( select ) => ( {
@@ -38,12 +37,12 @@ function Header( { setListViewToggleElement } ) {
 		<>
 			<div className="edit-widgets-header">
 				<div className="edit-widgets-header__navigable-toolbar-wrapper">
-					{ isMediumViewport && (
+					{ isLargeViewport && (
 						<h1 className="edit-widgets-header__title">
 							{ __( 'Widgets' ) }
 						</h1>
 					) }
-					{ ! isMediumViewport && (
+					{ ! isLargeViewport && (
 						<VisuallyHidden
 							as="h1"
 							className="edit-widgets-header__title"