Update viewport visibility logic to use 'key' instead of 'value' for device type across multiple components

Author: ramonjd

packages/block-editor/src/components/block-visibility/viewport-visibility-info.js

@@ -25,7 +25,7 @@ const { Badge } = unlock( componentsPrivateApis );
 const DEFAULT_VISIBILITY_STATE = {
 	currentBlockVisibility: undefined,
 	hasParentHiddenEverywhere: false,
-	selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+	selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 };
 
 export default function ViewportVisibilityInfo( { clientId } ) {
@@ -49,7 +49,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 					getBlockAttributes( clientId )?.metadata?.blockVisibility,
 				selectedDeviceType:
 					getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 				hasParentHiddenEverywhere:
 					isBlockParentHiddenEverywhere( clientId ),
 			};

packages/block-editor/src/hooks/grid-visualizer.js

@@ -54,7 +54,7 @@ function GridTools( { clientId, layout } ) {
 				const settings = getSettings();
 				const currentDeviceType =
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 				return {
 					isVisible: true,

packages/block-editor/src/hooks/layout-child.js

@@ -244,7 +244,7 @@ function GridTools( {
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType:
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};