Editor: Move the device type state to the editor package (#56866)

docs/reference-guides/data/data-core-editor.md

@@ -268,6 +268,18 @@ _Returns_
 
 -   `string?`: Template ID.
 
+### getDeviceType
+
+Returns the current editing canvas device type.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Device type.
+
 ### getEditedPostAttribute
 
 Returns a single attribute of the post being edited, preferring the unsaved edit if one exists, but falling back to the attribute for the last known saved state of the post.
@@ -1261,6 +1273,18 @@ _Related_
 
 -   selectBlock in core/block-editor store.
 
+### setDeviceType
+
+Action that changes the width of the editing canvas.
+
+_Parameters_
+
+-   _deviceType_ `string`:
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setRenderingMode
 
 Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:

packages/block-editor/src/components/preview-options/README.md

@@ -27,7 +27,7 @@ const MyPreviewOptions = () => (
 		isEnabled={ true }
 		className="edit-post-post-preview-dropdown"
 		deviceType={ deviceType }
-		setDeviceType={ setPreviewDeviceType }
+		setDeviceType={ setDeviceType }
 	> { ( { onClose } ) => (
 			<MenuGroup>
 				<div className="edit-post-header-preview__grouping-external">

packages/block-editor/src/components/use-resize-canvas/README.md

@@ -14,14 +14,14 @@ Note that this is currently experimental, and is available as `__experimentalUse
 
 ### Usage
 
-The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `__experimentalGetPreviewDeviceType`.
+The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `getDeviceType`.
 
 ```jsx
 import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
 
 function ResizedContainer() {
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+		return select( 'core/editor' ).getDeviceType();
 	}, [] );
 	const inlineStyles = useResizeCanvas( deviceType );
 

packages/edit-post/src/components/device-preview/index.js

@@ -30,21 +30,19 @@ export default function DevicePreview() {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
 			isViewable: postType?.viewable ?? false,
-			deviceType:
-				select( editPostStore ).__experimentalGetPreviewDeviceType(),
+			deviceType: select( editorStore ).getDeviceType(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 		};
 	}, [] );
-	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
-		useDispatch( editPostStore );
+	const { setDeviceType } = useDispatch( editorStore );
 
 	return (
 		<PreviewOptions
 			isEnabled={ isPostSaveable }
 			className="edit-post-post-preview-dropdown"
 			deviceType={ deviceType }
-			setDeviceType={ setPreviewDeviceType }
+			setDeviceType={ setDeviceType }
 			label={ __( 'Preview' ) }
 			showIconLabels={ showIconLabels }
 		>

packages/edit-post/src/components/visual-editor/index.js

@@ -37,14 +37,14 @@ export default function VisualEditor( { styles } ) {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
-		const { isFeatureActive, __experimentalGetPreviewDeviceType } =
-			select( editPostStore );
-		const { getEditorSettings, getRenderingMode } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
+		const { getEditorSettings, getRenderingMode, getDeviceType } =
+			select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
 
 		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
+			deviceType: getDeviceType(),
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 			renderingMode: getRenderingMode(),
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,

packages/edit-post/src/editor.native.js

@@ -9,7 +9,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider } from '@wordpress/editor';
+import { EditorProvider, store as editorStore } from '@wordpress/editor';
 import { parse, serialize, store as blocksStore } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -192,18 +192,15 @@ class Editor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			getEditorMode,
-			__experimentalGetPreviewDeviceType,
-			getHiddenBlockTypes,
-		} = select( editPostStore );
+		const { isFeatureActive, getEditorMode, getHiddenBlockTypes } =
+			select( editPostStore );
 		const { getBlockTypes } = select( blocksStore );
+		const { getDeviceType } = select( editorStore );
 
 		return {
 			hasFixedToolbar:
 				isFeatureActive( 'fixedToolbar' ) ||
-				__experimentalGetPreviewDeviceType() !== 'Desktop',
+				getDeviceType() !== 'Desktop',
 			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
 			hiddenBlockTypes: getHiddenBlockTypes(),

packages/edit-post/src/store/actions.js

@@ -456,18 +456,27 @@ export function metaBoxUpdatesFailure() {
 }
 
 /**
- * Returns an action object used to toggle the width of the editing canvas.
+ * Action that changes the width of the editing canvas.
+ *
+ * @deprecated
  *
  * @param {string} deviceType
  *
  * @return {Object} Action object.
  */
-export function __experimentalSetPreviewDeviceType( deviceType ) {
-	return {
-		type: 'SET_PREVIEW_DEVICE_TYPE',
-		deviceType,
+export const __experimentalSetPreviewDeviceType =
+	( deviceType ) =>
+	( { registry } ) => {
+		deprecated(
+			"dispatch( 'core/edit-post' ).__experimentalSetPreviewDeviceType",
+			{
+				since: '6.5',
+				version: '6.7',
+				hint: 'registry.dispatch( editorStore ).setDeviceType',
+			}
+		);
+		registry.dispatch( editorStore ).setDeviceType( deviceType );
 	};
-}
 
 /**
  * Returns an action object used to open/close the inserter.

packages/edit-post/src/store/reducer.js

@@ -98,23 +98,6 @@ export function metaBoxLocations( state = {}, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the editing canvas device type.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function deviceType( state = 'Desktop', action ) {
-	switch ( action.type ) {
-		case 'SET_PREVIEW_DEVICE_TYPE':
-			return action.deviceType;
-	}
-
-	return state;
-}
-
 /**
  * Reducer to set the block inserter panel open or closed.
  *
@@ -179,7 +162,6 @@ export default combineReducers( {
 	metaBoxes,
 	publishSidebarActive,
 	removedPanels,
-	deviceType,
 	blockInserterPanel,
 	listViewPanel,
 } );

packages/edit-post/src/store/selectors.js

@@ -450,13 +450,25 @@ export function isSavingMetaBoxes( state ) {
 /**
  * Returns the current editing canvas device type.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {string} Device type.
  */
-export function __experimentalGetPreviewDeviceType( state ) {
-	return state.deviceType;
-}
+export const __experimentalGetPreviewDeviceType = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			`select( 'core/edit-site' ).__experimentalGetPreviewDeviceType`,
+			{
+				since: '6.5',
+				version: '6.7',
+				alternative: `select( 'core/editor' ).getDeviceType`,
+			}
+		);
+		return select( editorStore ).getDeviceType();
+	}
+);
 
 /**
  * Returns true if the inserter is opened.

packages/edit-site/src/components/block-editor/editor-canvas.js

@@ -14,7 +14,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -45,17 +48,16 @@ function EditorCanvas( {
 	} = useSelect( ( select ) => {
 		const { getBlockCount, __unstableGetEditorMode } =
 			select( blockEditorStore );
-		const {
-			getEditedPostType,
-			__experimentalGetPreviewDeviceType,
-			getCanvasMode,
-		} = unlock( select( editSiteStore ) );
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const { getDeviceType } = select( editorStore );
 		const _templateType = getEditedPostType();
 
 		return {
 			templateType: _templateType,
 			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			deviceType: __experimentalGetPreviewDeviceType(),
+			deviceType: getDeviceType(),
 			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			canvasMode: getCanvasMode(),
 			hasBlocks: !! getBlockCount(),

packages/edit-site/src/components/header-edit-mode/document-tools/index.js

@@ -14,6 +14,7 @@ import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -39,18 +40,15 @@ export default function DocumentTools( {
 	const inserterButton = useRef();
 	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
 		useSelect( ( select ) => {
-			const {
-				__experimentalGetPreviewDeviceType,
-				isInserterOpened,
-				isListViewOpened,
-				getEditorMode,
-			} = select( editSiteStore );
+			const { isInserterOpened, isListViewOpened, getEditorMode } =
+				select( editSiteStore );
+			const { getDeviceType } = select( editorStore );
 			const { getShortcutRepresentation } = select(
 				keyboardShortcutsStore
 			);
 
 			return {
-				deviceType: __experimentalGetPreviewDeviceType(),
+				deviceType: getDeviceType(),
 				isInserterOpen: isInserterOpened(),
 				isListViewOpen: isListViewOpened(),
 				listViewShortcut: getShortcutRepresentation(
@@ -60,12 +58,10 @@ export default function DocumentTools( {
 			};
 		}, [] );
 
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editSiteStore );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editSiteStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { setDeviceType } = useDispatch( editorStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -189,7 +185,7 @@ export default function DocumentTools( {
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'Zoom-out View' ) }
 									onClick={ () => {
-										setPreviewDeviceType( 'Desktop' );
+										setDeviceType( 'Desktop' );
 										__unstableSetEditorMode(
 											isZoomedOutView
 												? 'edit'

packages/edit-site/src/components/header-edit-mode/index.js

@@ -27,7 +27,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { DocumentBar } from '@wordpress/editor';
+import { DocumentBar, store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -58,22 +58,18 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 		hasFixedToolbar,
 		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const { __experimentalGetPreviewDeviceType, getEditedPostType } =
-			select( editSiteStore );
+		const { getEditedPostType } = select( editSiteStore );
 		const { getBlockSelectionStart, __unstableGetEditorMode } =
 			select( blockEditorStore );
-
-		const postType = getEditedPostType();
-
 		const {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
-
 		const { get: getPreference } = select( preferencesStore );
+		const { getDeviceType } = select( editorStore );
 
 		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			templateType: postType,
+			deviceType: getDeviceType(),
+			templateType: getEditedPostType(),
 			blockEditorMode: __unstableGetEditorMode(),
 			blockSelectionStart: getBlockSelectionStart(),
 			homeUrl: getUnstableBase()?.home,
@@ -99,9 +95,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
 	const blockToolbarRef = useRef();
-
-	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
-		useDispatch( editSiteStore );
+	const { setDeviceType } = useDispatch( editorStore );
 	const disableMotion = useReducedMotion();
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
@@ -225,7 +219,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 						>
 							<PreviewOptions
 								deviceType={ deviceType }
-								setDeviceType={ setPreviewDeviceType }
+								setDeviceType={ setDeviceType }
 								label={ __( 'View' ) }
 								isEnabled={
 									! isFocusMode && hasDefaultEditorCanvasView