Deselect block on viewport preview switch when hidden and list view not open

Author: ramonjd

packages/block-editor/src/components/block-visibility/resolve-current-viewport.js

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+
+/**
+ * Resolves the effective viewport used for visibility checks.
+ *
+ * @param {string}  deviceType         Current preview device type.
+ * @param {boolean} isLargerThanMobile Whether viewport is >= mobile breakpoint.
+ * @param {boolean} isLargerThanTablet Whether viewport is >= tablet breakpoint.
+ *
+ * @return {string} Effective viewport key ('desktop'|'tablet'|'mobile').
+ */
+export function resolveCurrentViewport(
+	deviceType,
+	isLargerThanMobile,
+	isLargerThanTablet
+) {
+	const normalizedDeviceType = deviceType?.toLowerCase();
+
+	if ( normalizedDeviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+		return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+	}
+
+	if ( normalizedDeviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+		return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+	}
+
+	// Desktop preview falls back to current window width breakpoints.
+	if ( ! isLargerThanMobile ) {
+		return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+	}
+
+	if ( ! isLargerThanTablet ) {
+		return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+	}
+
+	return BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+}

packages/block-editor/src/components/block-visibility/use-block-visibility.js

@@ -7,6 +7,7 @@ import { useViewportMatch } from '@wordpress/compose';
  * Internal dependencies
  */
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+import { resolveCurrentViewport } from './resolve-current-viewport';
 
 /**
  * Returns information about the current block visibility state.
@@ -25,23 +26,11 @@ export default function useBlockVisibility( options = {} ) {
 	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
 	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
 
-	/*
-	 * Priority:
-	 * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
-	 * 2. Actual window size (Desktop mode) - uses viewport detection
-	 */
-	let currentViewport;
-	if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
-		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
-		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-	} else if ( ! isLargerThanMobile ) {
-		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( isLargerThanMobile && ! isLargerThanTablet ) {
-		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-	} else {
-		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
-	}
+	const currentViewport = resolveCurrentViewport(
+		deviceType,
+		isLargerThanMobile,
+		isLargerThanTablet
+	);
 
 	// Determine if block is currently hidden.
 	const isBlockCurrentlyHidden =

packages/block-editor/src/private-apis.js

@@ -73,6 +73,7 @@ import {
 	isHashLink,
 	isRelativePath,
 } from './components/link-control/is-url-like';
+import { resolveCurrentViewport } from './components/block-visibility/resolve-current-viewport';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -139,4 +140,5 @@ lock( privateApis, {
 	useListViewPanelState,
 	isHashLink,
 	isRelativePath,
+	resolveCurrentViewport,
 } );

packages/editor/src/components/preview-dropdown/index.js

@@ -17,11 +17,14 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { desktop, mobile, tablet, external, check } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ActionItem } from '@wordpress/interface';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -30,6 +33,8 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 import { unlock } from '../../lock-unlock';
 
+const { resolveCurrentViewport } = unlock( blockEditorPrivateApis );
+
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const {
 		deviceType,
@@ -62,9 +67,46 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
 		useDispatch( editorStore )
 	);
-	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const blockEditorDispatch = useDispatch( blockEditorStore );
+	const { clearSelectedBlock } = blockEditorDispatch;
+	const { resetZoomLevel } = unlock( blockEditorDispatch );
+	const registry = useRegistry();
+
+	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
+	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
+		const isListViewOpened = registry
+			.select( editorStore )
+			.isListViewOpened();
+		const selectedBlockClientId = registry
+			.select( blockEditorStore )
+			.getSelectedBlockClientId();
+
+		if ( ! isListViewOpened && selectedBlockClientId ) {
+			const targetViewport = resolveCurrentViewport(
+				newDeviceType,
+				isLargerThanMobile,
+				isLargerThanTablet
+			);
+			const blockEditorSelectors = unlock(
+				registry.select( blockEditorStore )
+			);
+			const isSelectedBlockHiddenInTargetViewport =
+				blockEditorSelectors.isBlockHiddenAtViewport(
+					selectedBlockClientId,
+					targetViewport
+				) ||
+				blockEditorSelectors.isBlockParentHiddenAtViewport(
+					selectedBlockClientId,
+					targetViewport
+				);
+
+			if ( isSelectedBlockHiddenInTargetViewport ) {
+				clearSelectedBlock();
+			}
+		}
+
 		setDeviceType( newDeviceType );
 		resetZoomLevel();
 	};