Iframe tablet and mobile device previews (#33342)

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

@@ -144,5 +144,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi
  */
 
 export { default as BlockEditorProvider } from './provider';
-export { default as __experimentalUseSimulatedMediaQuery } from './use-simulated-media-query';
 export { default as useSetting } from './use-setting';

packages/block-editor/src/components/use-resize-canvas/index.js

@@ -3,23 +3,14 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { default as useSimulatedMediaQuery } from '../../components/use-simulated-media-query';
-
 /**
  * Function to resize the editor window.
  *
- * @param {string}  deviceType                  Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
- * @param {boolean} __unstableDisableSimulation Whether to disable media query simulation.
+ * @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
  *
  * @return {Object} Inline styles to be added to resizable container.
  */
-export default function useResizeCanvas(
-	deviceType,
-	__unstableDisableSimulation
-) {
+export default function useResizeCanvas( deviceType ) {
 	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
 
 	useEffect( () => {
@@ -72,11 +63,5 @@ export default function useResizeCanvas(
 		}
 	};
 
-	const width = __unstableDisableSimulation
-		? null
-		: getCanvasWidth( deviceType );
-
-	useSimulatedMediaQuery( 'resizable-editor-section', width );
-
 	return contentInlineStyles( deviceType );
 }

packages/block-editor/src/style.scss

@@ -1,10 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
-// Only add styles for components that are used inside the editing canvas here:
-
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-matrix-control/style.scss";
 @import "./components/block-icon/style.scss";
@@ -63,13 +56,6 @@
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
 
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}
-
-// Styles for components that are used outside of the editing canvas go here:
-
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/preview-options/style.scss";

packages/block-library/src/editor.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
@@ -95,8 +90,3 @@
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
-
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}

packages/block-library/src/style.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./archives/style.scss";
 @import "./audio/style.scss";
 @import "./button/style.scss";

packages/block-library/src/theme.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./audio/theme.scss";
 @import "./code/theme.scss";
 @import "./embed/theme.scss";
@@ -16,8 +11,3 @@
 @import "./table/theme.scss";
 @import "./video/theme.scss";
 @import "./template-part/theme.scss";
-
-// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#end-resizable-editor-section {
-	display: none;
-}

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

@@ -43,16 +43,10 @@ import { __ } from '@wordpress/i18n';
 import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( {
-	children,
-	contentRef,
-	isTemplateMode,
-	styles,
-	style,
-} ) {
+function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	const ref = useMouseMoveTypingReset();
 
-	if ( ! isTemplateMode ) {
+	if ( ! shouldIframe ) {
 		return (
 			<>
 				<EditorStyles styles={ styles } />
@@ -217,7 +211,11 @@ export default function VisualEditor( { styles } ) {
 					className={ previewMode }
 				>
 					<MaybeIframe
-						isTemplateMode={ isTemplateMode }
+						shouldIframe={
+							isTemplateMode ||
+							deviceType === 'Tablet' ||
+							deviceType === 'Mobile'
+						}
 						contentRef={ contentRef }
 						styles={ styles }
 						style={ { paddingBottom } }