From 53cec2f824a6f0951ec660045b7758d878785723 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Thu, 21 May 2020 15:27:18 -0400
Subject: [PATCH] Block Editor: Optimize resizable preview hooks (#22511)

* Block Editor: Move useResizeCanvas to folder by name

* Block Editor: Avoid simulated media query transforms except when previewing

* Block Editor: Avoid resize event listener except when previewing
---
 packages/block-editor/README.md                     |  5 +++--
 packages/block-editor/src/components/index.js       |  2 +-
 .../{resize-canvas => use-resize-canvas}/index.js   | 10 +++++++---
 .../components/use-simulated-media-query/index.js   | 13 ++++++++++---
 4 files changed, 21 insertions(+), 9 deletions(-)
 rename packages/block-editor/src/components/{resize-canvas => use-resize-canvas}/index.js (93%)

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.
 
 <a name="useSimulatedMediaQuery" href="#useSimulatedMediaQuery">#</a> **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.
 
 <a name="Warning" href="#Warning">#</a> **Warning**
 
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 3cb6fd52df5a3b..e810619fd25323 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 ) => {