diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index a4f344eb4a6ad..bc2729fbb1599 100644 --- 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 index 4c9e0a3405032..34e4573c719dd 100644 --- 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 index 1a76037728e8d..c1c8222394979 100644 --- 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 ) && ( <> ) } - { showIconLabels && ! isLargeViewport && ( + { showIconLabels && ! isWideViewport && ( ) } diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index e5bb80f9f12f7..a7daf5570a204 100644 --- 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 index 6e9757ea36f7f..9251f528ca5ee 100644 --- 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 } ) { <>
- { isMediumViewport && ( + { isLargeViewport && (

{ __( 'Widgets' ) }

) } - { ! isMediumViewport && ( + { ! isLargeViewport && (