diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 3cfa70c4b9f40..8cf025bdcc10a 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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';
diff --git a/packages/block-editor/src/components/use-simulated-media-query/index.js b/packages/block-editor/src/components/use-simulated-media-query/index.js
deleted file mode 100644
index b5ef9a2a519fe..0000000000000
--- a/packages/block-editor/src/components/use-simulated-media-query/index.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-import { match } from 'css-mediaquery';
-
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { getProtocol, getAuthority } from '@wordpress/url';
-
-const ENABLED_MEDIA_QUERY = '(min-width:0px)';
-const DISABLED_MEDIA_QUERY = '(min-width:999999px)';
-
-const VALID_MEDIA_QUERY_REGEX = /\((min|max)-width:[^\(]*?\)/g;
-
-function getStyleSheetsThatMatchHostname() {
-	if ( typeof window === 'undefined' ) {
-		return [];
-	}
-
-	return filter( window?.document?.styleSheets ?? [], ( styleSheet ) => {
-		if ( ! styleSheet.href ) {
-			return false;
-		}
-		return (
-			getProtocol( styleSheet.href ) === window.location.protocol &&
-			getAuthority( styleSheet.href ) === window.location.host
-		);
-	} );
-}
-
-function isReplaceableMediaRule( rule ) {
-	if ( ! rule.media ) {
-		return false;
-	}
-	// Need to use "media.mediaText" instead of "conditionText" for IE support.
-	return !! rule.media.mediaText.match( VALID_MEDIA_QUERY_REGEX );
-}
-
-function replaceRule( styleSheet, newRuleText, index ) {
-	styleSheet.deleteRule( index );
-	styleSheet.insertRule( newRuleText, index );
-}
-
-function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
-	return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( matchedSubstring ) => {
-		if (
-			match( matchedSubstring, {
-				type: 'screen',
-				width: widthValue,
-			} )
-		) {
-			return ENABLED_MEDIA_QUERY;
-		}
-		return DISABLED_MEDIA_QUERY;
-	} );
-}
-
-/**
- * Function that manipulates media queries from stylesheets to simulate a given
- * viewport width.
- *
- * @param {string}  marker CSS selector string defining start and end of
- *                         manipulable styles.
- * @param {number?} width  Viewport width to simulate. If provided null, the
- *                         stylesheets will not be modified.
- */
-export default function useSimulatedMediaQuery( marker, width ) {
-	useEffect( () => {
-		if ( ! width ) {
-			return;
-		}
-
-		const styleSheets = getStyleSheetsThatMatchHostname();
-		const originalStyles = [];
-		styleSheets.forEach( ( styleSheet, styleSheetIndex ) => {
-			let relevantSection = false;
-			for (
-				let ruleIndex = 0;
-				ruleIndex < styleSheet.cssRules.length;
-				++ruleIndex
-			) {
-				const rule = styleSheet.cssRules[ ruleIndex ];
-				if (
-					rule.type !== window.CSSRule.STYLE_RULE &&
-					rule.type !== window.CSSRule.MEDIA_RULE
-				) {
-					continue;
-				}
-
-				if (
-					! relevantSection &&
-					!! rule.cssText.match( new RegExp( `#start-${ marker }` ) )
-				) {
-					relevantSection = true;
-				}
-
-				if (
-					relevantSection &&
-					!! rule.cssText.match( new RegExp( `#end-${ marker }` ) )
-				) {
-					relevantSection = false;
-				}
-
-				if ( ! relevantSection || ! isReplaceableMediaRule( rule ) ) {
-					continue;
-				}
-				const ruleText = rule.cssText;
-				if ( ! originalStyles[ styleSheetIndex ] ) {
-					originalStyles[ styleSheetIndex ] = [];
-				}
-				originalStyles[ styleSheetIndex ][ ruleIndex ] = ruleText;
-				replaceRule(
-					styleSheet,
-					replaceMediaQueryWithWidthEvaluation( ruleText, width ),
-					ruleIndex
-				);
-			}
-		} );
-		return () => {
-			originalStyles.forEach( ( rulesCollection, styleSheetIndex ) => {
-				if ( ! rulesCollection ) {
-					return;
-				}
-				for (
-					let ruleIndex = 0;
-					ruleIndex < rulesCollection.length;
-					++ruleIndex
-				) {
-					const originalRuleText = rulesCollection[ ruleIndex ];
-					if ( originalRuleText ) {
-						replaceRule(
-							styleSheets[ styleSheetIndex ],
-							originalRuleText,
-							ruleIndex
-						);
-					}
-				}
-			} );
-		};
-	}, [ width ] );
-}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index b1c9b25b8e5ae..ebc5481a28116 100644
--- a/packages/block-editor/src/style.scss
+++ b/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";
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 5b8df1cf86ebb..425a90ca3d948 100644
--- a/packages/block-library/src/editor.scss
+++ b/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;
-}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index c475eab47f5dc..8c3b5dc131749 100644
--- a/packages/block-library/src/style.scss
+++ b/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";
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index 1c5f63af8fcf5..1c27a7b0e32c5 100644
--- a/packages/block-library/src/theme.scss
+++ b/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;
-}