Add useViewportMatch react hook

packages/block-editor/src/components/block-list/block-mobile-toolbar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ifViewportMatches } from '@wordpress/viewport';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -10,6 +10,11 @@ import BlockMover from '../block-mover';
 import VisualEditorInserter from '../inserter';
 
 function BlockMobileToolbar( { clientId, moverDirection } ) {
+	const isMobile = useViewportMatch( '< small' );
+	if ( ! isMobile ) {
+		return null;
+	}
+
 	return (
 		<div className="editor-block-list__block-mobile-toolbar block-editor-block-list__block-mobile-toolbar">
 			<VisualEditorInserter />
@@ -18,4 +23,4 @@ function BlockMobileToolbar( { clientId, moverDirection } ) {
 	);
 }
 
-export default ifViewportMatches( '< small' )( BlockMobileToolbar );
+export default BlockMobileToolbar;

packages/block-editor/src/components/block-list/block.js

@@ -28,8 +28,7 @@ import {
 	withDispatch,
 	withSelect,
 } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
-import { compose, pure, ifCondition } from '@wordpress/compose';
+import { compose, pure, ifCondition, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -271,6 +270,8 @@ function BlockListBlock( {
 		}
 	}, [ isSelected, isNavigationMode ] );
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	// Other event handlers
 
 	/**
@@ -393,16 +394,19 @@ function BlockListBlock( {
 
 	// If the block is selected and we're typing the block should not appear.
 	// Empty paragraph blocks should always show up as unselected.
+	const isFocusModeActive = isFocusMode && isLargeViewport;
+	const isTopToolbarActive = hasFixedToolbar && isLargeViewport;
 	const showInserterShortcuts = ! isNavigationMode && ( isSelected || isHovered ) && isEmptyDefaultBlock && isValid;
 	const showEmptyBlockSideInserter = ! isNavigationMode && ( isSelected || isHovered || isLast ) && isEmptyDefaultBlock && isValid;
 	const shouldAppearSelected =
-		! isFocusMode &&
+		isLargeViewport &&
+		! isFocusModeActive &&
 		! showEmptyBlockSideInserter &&
 		isSelected &&
 		! isTypingWithinBlock;
 	const shouldAppearHovered =
-		! isFocusMode &&
-		! hasFixedToolbar &&
+		! isFocusModeActive &&
+		! isTopToolbarActive &&
 		isHovered &&
 		! isEmptyDefaultBlock;
 	// We render block movers and block settings to keep them tabbale even if hidden
@@ -414,10 +418,10 @@ function BlockListBlock( {
 		! isTypingWithinBlock;
 	const shouldShowBreadcrumb =
 		( isSelected && isNavigationMode ) ||
-		( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
+		( ! isNavigationMode && ! isFocusModeActive && isHovered && ! isEmptyDefaultBlock );
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
-		! hasFixedToolbar &&
+		! isTopToolbarActive &&
 		! showEmptyBlockSideInserter &&
 		(
 			( isSelected && ( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
@@ -444,8 +448,8 @@ function BlockListBlock( {
 			'is-reusable': isReusableBlock( blockType ),
 			'is-dragging': isDragging,
 			'is-typing': isTypingWithinBlock,
-			'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
-			'is-focus-mode': isFocusMode,
+			'is-focused': isFocusModeActive && ( isSelected || isParentOfSelectedBlock ),
+			'is-focus-mode': isFocusModeActive,
 			'has-child-selected': isParentOfSelectedBlock,
 		},
 		className
@@ -563,7 +567,7 @@ function BlockListBlock( {
 					! isNavigationMode &&
 					! shouldShowContextualToolbar &&
 					isSelected &&
-					! hasFixedToolbar &&
+					! isTopToolbarActive &&
 					! isEmptyDefaultBlock && (
 						<KeyboardShortcuts
 							bindGlobal
@@ -626,7 +630,7 @@ function BlockListBlock( {
 }
 
 const applyWithSelect = withSelect(
-	( select, { clientId, rootClientId, isLargeViewport } ) => {
+	( select, { clientId, rootClientId } ) => {
 		const {
 			isBlockSelected,
 			isAncestorMultiSelected,
@@ -674,8 +678,8 @@ const applyWithSelect = withSelect(
 				name && isUnmodifiedDefaultBlock( { name, attributes } ),
 			isMovable: 'all' !== templateLock,
 			isLocked: !! templateLock,
-			isFocusMode: focusMode && isLargeViewport,
-			hasFixedToolbar: hasFixedToolbar && isLargeViewport,
+			isFocusMode: focusMode,
+			hasFixedToolbar,
 			isLast: index === blockOrder.length - 1,
 			isNavigationMode: isNavigationMode(),
 			isRTL,
@@ -792,7 +796,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 
 export default compose(
 	pure,
-	withViewportMatch( { isLargeViewport: 'medium' } ),
 	applyWithSelect,
 	applyWithDispatch,
 	// block is sometimes not mounted at the right time, causing it be undefined

packages/block-editor/src/components/tool-selector/index.js

@@ -11,14 +11,19 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { ifViewportMatches } from '@wordpress/viewport';
+import { useViewportMatch } from '@wordpress/compose';
 
 const editIcon = <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" /></SVG>;
 const selectIcon = <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><Path d="M6.5 1v21.5l6-6.5H21L6.5 1zm5.1 13l-3.1 3.4V5.9l7.8 8.1h-4.7z" /></SVG>;
 
 function ToolSelector() {
 	const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode() );
 	const { setNavigationMode } = useDispatch( 'core/block-editor' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	if ( ! isLargeViewport ) {
+		return null;
+	}
+
 	const onSwitchMode = ( mode ) => {
 		setNavigationMode( mode === 'edit' ? false : true );
 	};
@@ -73,4 +78,4 @@ function ToolSelector() {
 	);
 }
 
-export default ifViewportMatches( 'medium' )( ToolSelector );
+export default ToolSelector;

packages/compose/README.md

@@ -139,6 +139,25 @@ _Returns_
 
 -   `boolean`: Reduced motion preference value.
 
+<a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
+
+Returns true if the viewport matches the given query, or false otherwise.
+
+_Usage_
+
+```js
+useViewportMatch( '< huge' );
+useViewportMatch( 'medium' );
+```
+
+_Parameters_
+
+-   _query_ `string`: Query string. Includes operator and breakpoint name, space separated. Operator defaults to >=.
+
+_Returns_
+
+-   `boolean`: Whether viewport matches query.
+
 <a name="withGlobalEvents" href="#withGlobalEvents">#</a> **withGlobalEvents**
 
 Higher-order component creator which, given an object of DOM event types and

packages/compose/src/hooks/use-viewport-match/index.js

@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import useMediaQuery from '../use-media-query';
+
+/**
+ * Hash of breakpoint names with pixel width at which it becomes effective.
+ *
+ * @see _breakpoints.scss
+ *
+ * @type {Object}
+ */
+const BREAKPOINTS = {
+	huge: 1440,
+	wide: 1280,
+	large: 960,
+	medium: 782,
+	small: 600,
+	mobile: 480,
+};
+
+/**
+ * Object mapping media query operators to the condition to be used.
+ *
+ * @type {Object}
+ */
+const CONDITIONS = {
+	'>=': 'min-width',
+	'<': 'max-width',
+};
+
+/**
+ * Returns true if the viewport matches the given query, or false otherwise.
+ *
+ * @param {string} query Query string. Includes operator and breakpoint name,
+ *                       space separated. Operator defaults to >=.
+ *
+ * @example
+ *
+ * ```js
+ * useViewportMatch( '< huge' );
+ * useViewportMatch( 'medium' );
+ * ```
+ *
+ * @return {boolean} Whether viewport matches query.
+ */
+const useViewportMatch = ( query ) => {
+	if ( query.indexOf( ' ' ) === -1 ) {
+		query = '>= ' + query;
+	}
+	const [ operator, breakpoint ] = query.split( ' ' );
+	const mediaQuery = `(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;
+	return useMediaQuery( mediaQuery );
+};
+
+export default useViewportMatch;

packages/compose/src/index.js

@@ -15,3 +15,4 @@ export { default as withState } from './higher-order/with-state';
 // Hooks
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
+export { default as useViewportMatch } from './hooks/use-viewport-match';

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { DotTip } from '@wordpress/nux';
 import { __ } from '@wordpress/i18n';
 import {
@@ -19,7 +18,15 @@ import {
 	EditorHistoryUndo,
 } from '@wordpress/editor';
 
-function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isTextModeEnabled } ) {
+function HeaderToolbar() {
+	const { hasFixedToolbar, showInserter, isTextModeEnabled } = useSelect( ( select ) => ( {
+		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+		// This setting (richEditingEnabled) should not live in the block editor's setting.
+		showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled,
+		isTextModeEnabled: select( 'core/edit-post' ).getEditorMode() === 'text',
+	} ) );
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const toolbarAriaLabel = hasFixedToolbar ?
 		/* translators: accessibility text for the editor toolbar when Top Toolbar is on */
 		__( 'Document and block tools' ) :
@@ -51,12 +58,4 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => ( {
-		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
-		// This setting (richEditingEnabled) should not live in the block editor's setting.
-		showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-		isTextModeEnabled: select( 'core/edit-post' ).getEditorMode() === 'text',
-	} ) ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-] )( HeaderToolbar );
+export default HeaderToolbar;

packages/edit-post/src/components/header/post-publish-button-or-toggle.js

@@ -6,17 +6,15 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
+import { useViewportMatch, compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { PostPublishButton } from '@wordpress/editor';
-import { withViewportMatch } from '@wordpress/viewport';
 
 export function PostPublishButtonOrToggle( {
 	forceIsDirty,
 	forceIsSaving,
 	hasPublishAction,
 	isBeingScheduled,
-	isLessThanMediumViewport,
 	isPending,
 	isPublished,
 	isPublishSidebarEnabled,
@@ -26,6 +24,7 @@ export function PostPublishButtonOrToggle( {
 } ) {
 	const IS_TOGGLE = 'toggle';
 	const IS_BUTTON = 'button';
+	const isLessThanMediumViewport = useViewportMatch( '< medium' );
 	let component;
 
 	/**
@@ -95,5 +94,4 @@ export default compose(
 			togglePublishSidebar,
 		};
 	} ),
-	withViewportMatch( { isLessThanMediumViewport: '< medium' } ),
 )( PostPublishButtonOrToggle );

packages/edit-post/src/components/header/writing-menu/index.js

@@ -3,14 +3,19 @@
  */
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { ifViewportMatches } from '@wordpress/viewport';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import FeatureToggle from '../feature-toggle';
 
 function WritingMenu() {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	if ( ! isLargeViewport ) {
+		return null;
+	}
+
 	return (
 		<MenuGroup
 			label={ _x( 'View', 'noun' ) }
@@ -40,4 +45,4 @@ function WritingMenu() {
 	);
 }
 
-export default ifViewportMatches( 'medium' )( WritingMenu );
+export default WritingMenu;

packages/edit-post/src/components/layout/index.js

@@ -21,7 +21,7 @@ import {
 	Popover,
 	FocusReturnProvider,
 } from '@wordpress/components';
-import { withViewportMatch } from '@wordpress/viewport';
+import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __ } from '@wordpress/i18n';
 
@@ -44,7 +44,8 @@ import MetaBoxes from '../meta-boxes';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
 import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 
-function Layout( { isMobileViewport } ) {
+function Layout() {
+	const isMobileViewport = useViewportMatch( '< small' );
 	const { closePublishSidebar, togglePublishSidebar } = useDispatch( 'core/edit-post' );
 	const {
 		mode,
@@ -144,4 +145,4 @@ function Layout( { isMobileViewport } ) {
 	);
 }
 
-export default withViewportMatch( { isMobileViewport: '< small' } )( Layout );
+export default Layout;

packages/editor/src/components/post-switch-to-draft-button/index.js

@@ -4,16 +4,16 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { withViewportMatch } from '@wordpress/viewport';
+import { compose, useViewportMatch } from '@wordpress/compose';
 
 function PostSwitchToDraftButton( {
 	isSaving,
 	isPublished,
 	isScheduled,
 	onClick,
-	isMobileViewport,
 } ) {
+	const isMobileViewport = useViewportMatch( '< small' );
+
 	if ( ! isPublished && ! isScheduled ) {
 		return null;
 	}
@@ -61,6 +61,5 @@ export default compose( [
 			},
 		};
 	} ),
-	withViewportMatch( { isMobileViewport: '< small' } ),
 ] )( PostSwitchToDraftButton );