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
WordPress · May 21, 2020 · 53cec2f · 53cec2f
1 parent 574a77c
commit 53cec2f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git 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
@@ -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/...tor/src/components/resize-canvas/index.js → ...src/components/use-resize-canvas/index.js b/...tor/src/components/resize-canvas/index.js → ...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
@@ -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 ) => {