diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index ebcc6809a8d4b2..fe0657a95bf74a 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -543,12 +543,13 @@ Undocumented declaration.
# **useSimulatedMediaQuery**
-Function that manipulates media queries from stylesheets to simulate a given viewport width.
+Function that manipulates media queries from stylesheets to simulate a given
+viewport width.
_Parameters_
- _marker_ `string`: CSS selector string defining start and end of manipulable styles.
-- _width_ `number`: Viewport width to simulate.
+- _width_ `?number`: Viewport width to simulate. If provided null, the stylesheets will not be modified.
# **Warning**
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index f8e37a7f4c5cfe..063033618ff6ba 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -65,7 +65,7 @@ export { default as withColorContext } from './color-palette/with-color-context'
export { default as __experimentalBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
export { default as __experimentalInserterMenuExtension } from './inserter-menu-extension';
export { default as __experimentalPreviewOptions } from './preview-options';
-export { default as __experimentalUseResizeCanvas } from './resize-canvas';
+export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
export { default as BlockInspector } from './block-inspector';
export { default as BlockList } from './block-list';
export { Block as __experimentalBlock } from './block-list/block-wrapper';
diff --git a/packages/block-editor/src/components/resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
similarity index 93%
rename from packages/block-editor/src/components/resize-canvas/index.js
rename to packages/block-editor/src/components/use-resize-canvas/index.js
index 2f9723d08a355c..113e946d8ccb93 100644
--- a/packages/block-editor/src/components/resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -19,16 +19,20 @@ export default function useResizeCanvas( deviceType ) {
const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
useEffect( () => {
+ if ( deviceType === 'Desktop' ) {
+ return;
+ }
+
const resizeListener = () => updateActualWidth( window.innerWidth );
window.addEventListener( 'resize', resizeListener );
return () => {
window.removeEventListener( 'resize', resizeListener );
};
- } );
+ }, [ deviceType ] );
const getCanvasWidth = ( device ) => {
- let deviceWidth = 0;
+ let deviceWidth;
switch ( device ) {
case 'Tablet':
@@ -38,7 +42,7 @@ export default function useResizeCanvas( deviceType ) {
deviceWidth = 360;
break;
default:
- deviceWidth = 2000;
+ return null;
}
return deviceWidth < actualWidth ? deviceWidth : actualWidth;
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
index d908a05c961cdd..52ab33e24f8bf4 100644
--- a/packages/block-editor/src/components/use-simulated-media-query/index.js
+++ b/packages/block-editor/src/components/use-simulated-media-query/index.js
@@ -62,13 +62,20 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
}
/**
- * Function that manipulates media queries from stylesheets to simulate a given viewport width.
+ * 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.
+ * @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 ) => {