@@ -45,13 +45,18 @@ function isAtMaxWidth( currentWidth, containerWidth, tolerance = 0 ) {
 function ResizableEditor( { className, enableResizing, height, children } ) {
 	const [ isResizing, setIsResizing ] = useState( false );
 	const { setCanvasWidth } = unlock( useDispatch( editorStore ) );
-	const canvasWidth = useSelect(
+	const { canvasWidth, canvasHeight } = useSelect(
 		( select ) => {
 			if ( ! enableResizing ) {
-				return undefined;
+				return { canvasWidth: undefined, canvasHeight: undefined };
 			}
-			const { getCanvasWidth } = unlock( select( editorStore ) );
-			return getCanvasWidth();
+			const { getCanvasWidth, getCanvasHeight } = unlock(
+				select( editorStore )
+			);
+			return {
+				canvasWidth: getCanvasWidth(),
+				canvasHeight: getCanvasHeight(),
+			};
 		},
 		[ enableResizing ]
 	);
@@ -100,7 +105,10 @@ function ResizableEditor( { className, enableResizing, height, children } ) {
 			size={ {
 				width:
 					enableResizing && canvasWidth ? canvasWidth + 'px' : '100%',
-				height: enableResizing && height ? height : '100%',
+				height:
+					enableResizing && canvasHeight
+						? canvasHeight + 'px'
+						: height || '100%',
 			} }
 			onResizeStart={ () => {
 				setIsResizing( true );
 
@@ -5,7 +5,7 @@
 // Don't apply transition when resized using the resizer handle.
 .editor-resizable-editor:not(.is-resizing) {
 	@media (prefers-reduced-motion: no-preference) {
-		transition: width 0.2s ease-out;
+		transition: width 0.2s ease-out, height 0.2s ease-out;
 	}
 }
 
 
@@ -35,8 +35,22 @@ import {
 	isEntityReady as _isEntityReady,
 } from '../dataviews/store/private-selectors';
 import { getTemplatePartIcon } from '../utils';
+import {
+	getDeviceTypeByCanvasWidth,
+	getCanvasWidthByDeviceType,
+} from '../utils/device-type';
 import { unlock } from '../lock-unlock';
 
+// Device preview aspect ratios (height / width). Used to give the editor
+// canvas a device-shaped frame in mobile and tablet previews. These are
+// display ratios for the preview frame, not responsive breakpoints. Mobile
+// and tablet are both portrait (taller than wide) to match the WordPress 7.0
+// preview behavior.
+const DEVICE_ASPECT_RATIO_BY_DEVICE_TYPE = {
+	Mobile: 8 / 5,
+	Tablet: 4 / 3,
+};
+
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
 	insertionIndex: undefined,
@@ -369,6 +383,45 @@ export const getCanvasWidth = createRegistrySelector(
 	}
 );
 
+/**
+ * Returns the device preview canvas height in pixels, derived from the canvas
+ * width using the device aspect ratio. Only applies when the canvas width
+ * matches the device preset (set via the Preview dropdown), so dragging away
+ * from the preset frees the frame to fill the editor. Returns `undefined` for
+ * desktop, zoom-out, or when no device height applies.
+ *
+ * @param {Object} state Global application state.
+ * @return {number|undefined} The canvas height in pixels, or undefined.
+ */
+export const getCanvasHeight = createRegistrySelector(
+	( select ) => ( state ) => {
+		const blockEditorSelect = unlock( select( blockEditorStore ) );
+		if ( blockEditorSelect.isZoomOut() ) {
+			return undefined;
+		}
+		const canvasWidth = state.canvasWidth;
+		const viewportSettings =
+			blockEditorSelect.getSettings().__experimentalFeatures?.viewport;
+		const deviceType = getDeviceTypeByCanvasWidth(
+			canvasWidth,
+			viewportSettings
+		);
+		// Only apply the device height at the preset width; a dragged width
+		// within a band frees the canvas to fill the editor.
+		if (
+			canvasWidth !==
+			getCanvasWidthByDeviceType( deviceType, viewportSettings )
+		) {
+			return undefined;
+		}
+		const ratio = DEVICE_ASPECT_RATIO_BY_DEVICE_TYPE[ deviceType ];
+		if ( ratio && canvasWidth > 0 ) {
+			return Math.round( canvasWidth * ratio );
+		}
+		return undefined;
+	}
+);
+
 /**
  * Returns the current revisions page number.
  *
 
@@ -1,13 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import {
+	getCanvasHeight,
 	getDefaultRenderingMode,
 	getPostBlocksByName,
 	isCollaborationEnabledForCurrentPost,
@@ -251,3 +253,72 @@ describe( 'getDefaultRenderingMode', () => {
 		} );
 	} );
 } );
+
+describe( 'getCanvasHeight', () => {
+	// Default viewport breakpoints: Mobile 480, Tablet 782.
+	function setupRegistry( { isZoomOut = false, viewport } = {} ) {
+		getCanvasHeight.registry = {
+			select: ( store ) => {
+				if ( store === blockEditorStore ) {
+					// In a real registry, `unlock( select( blockEditorStore ) )`
+					// returns the combined public + private selectors, so both
+					// getSettings and isZoomOut live in the unlocked map.
+					const selectors = {};
+					lock( selectors, {
+						getSettings: () => ( {
+							__experimentalFeatures: viewport
+								? { viewport }
+								: {},
+						} ),
+						isZoomOut: () => isZoomOut,
+					} );
+					return selectors;
+				}
+			},
+		};
+	}
+
+	it( 'returns the portrait height at the mobile preset width', () => {
+		// Mobile aspect ratio is 8/5 (portrait): 480 * 8/5 = 768.
+		setupRegistry();
+		expect( getCanvasHeight( { canvasWidth: 480 } ) ).toBe( 768 );
+	} );
+
+	it( 'returns the portrait height at the tablet preset width', () => {
+		// Tablet aspect ratio is 4/3 (portrait): 782 * 4/3 = 1043.
+		setupRegistry();
+		expect( getCanvasHeight( { canvasWidth: 782 } ) ).toBe( 1043 );
+	} );
+
+	it( 'returns undefined for desktop (no aspect ratio applies)', () => {
+		setupRegistry();
+		expect( getCanvasHeight( { canvasWidth: 1200 } ) ).toBeUndefined();
+	} );
+
+	it( 'returns undefined when zoom-out is active', () => {
+		setupRegistry( { isZoomOut: true } );
+		expect( getCanvasHeight( { canvasWidth: 480 } ) ).toBeUndefined();
+	} );
+
+	it( 'returns undefined when the width is dragged within a device band but is not the preset', () => {
+		// 400 resolves to Mobile (at or below the 480 breakpoint) but is not the
+		// 480 preset, so the device height does not apply and the canvas fills.
+		setupRegistry();
+		expect( getCanvasHeight( { canvasWidth: 400 } ) ).toBeUndefined();
+	} );
+
+	it( 'returns undefined when canvasWidth is not set', () => {
+		setupRegistry();
+		expect( getCanvasHeight( {} ) ).toBeUndefined();
+	} );
+
+	it( 'uses custom viewport breakpoints when provided', () => {
+		// Custom mobile preset 640: 640 * 8/5 = 1024.
+		setupRegistry( {
+			viewport: { mobile: '640px', tablet: '1024px' },
+		} );
+		expect( getCanvasHeight( { canvasWidth: 640 } ) ).toBe( 1024 );
+		// Custom tablet preset 1024: 1024 * 4/3 = 1365 (rounded).
+		expect( getCanvasHeight( { canvasWidth: 1024 } ) ).toBe( 1365 );
+	} );
+} );
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`// Don't apply transition when resized using the resizer handle.`
`6`	`6`	`.editor-resizable-editor:not(.is-resizing) {`
`7`	`7`	`@media (prefers-reduced-motion: no-preference) {`
`8`		`- transition: width 0.2s ease-out;`
	`8`	`+ transition: width 0.2s ease-out, height 0.2s ease-out;`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`