From 522029d6143ea2cd63a0b2e3db3f41e806ff63e1 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 May 2020 18:42:29 -0400 Subject: [PATCH 1/3] Block Editor: Move useResizeCanvas to folder by name --- packages/block-editor/src/components/index.js | 2 +- .../components/{resize-canvas => use-resize-canvas}/index.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/block-editor/src/components/{resize-canvas => use-resize-canvas}/index.js (100%) 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 100% rename from packages/block-editor/src/components/resize-canvas/index.js rename to packages/block-editor/src/components/use-resize-canvas/index.js From 935a51189500b3c67215346d300a84aa591b9959 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 May 2020 18:54:58 -0400 Subject: [PATCH 2/3] Block Editor: Avoid simulated media query transforms except when previewing --- packages/block-editor/README.md | 5 +++-- .../src/components/use-resize-canvas/index.js | 4 ++-- .../components/use-simulated-media-query/index.js | 13 ++++++++++--- 3 files changed, 15 insertions(+), 7 deletions(-) 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/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js index 2f9723d08a355c..1ea826d190c598 100644 --- a/packages/block-editor/src/components/use-resize-canvas/index.js +++ b/packages/block-editor/src/components/use-resize-canvas/index.js @@ -28,7 +28,7 @@ export default function useResizeCanvas( deviceType ) { } ); const getCanvasWidth = ( device ) => { - let deviceWidth = 0; + let deviceWidth; switch ( device ) { case 'Tablet': @@ -38,7 +38,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 ) => { From 2b4f9427b103e6ef2f39d8652f71efcffb575b50 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 May 2020 18:55:17 -0400 Subject: [PATCH 3/3] Block Editor: Avoid resize event listener except when previewing --- .../block-editor/src/components/use-resize-canvas/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js index 1ea826d190c598..113e946d8ccb93 100644 --- a/packages/block-editor/src/components/use-resize-canvas/index.js +++ b/packages/block-editor/src/components/use-resize-canvas/index.js @@ -19,13 +19,17 @@ 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;