From b49c2150aba9df01ef00cf5e1e4a8b7dcbb9c4f7 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Tue, 24 Mar 2020 18:44:18 +0100 Subject: [PATCH] Remove media query simulation --- packages/block-editor/README.md | 9 -- packages/block-editor/src/components/index.js | 1 - .../use-simulated-media-query/index.js | 140 ------------------ .../src/components/resize-canvas/index.js | 6 - .../src/components/visual-editor/index.js | 7 +- 5 files changed, 2 insertions(+), 161 deletions(-) delete mode 100644 packages/block-editor/src/components/use-simulated-media-query/index.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 60ef77d36242d1..980ed986fd939d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -483,15 +483,6 @@ _Related_ Undocumented declaration. -# **useSimulatedMediaQuery** - -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. - # **Warning** Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 0fd7fb2d4fb09b..a5c1e0ebaca21e 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -89,4 +89,3 @@ export { default as WritingFlow } from './writing-flow'; */ export { default as BlockEditorProvider } from './provider'; -export { default as useSimulatedMediaQuery } from './use-simulated-media-query'; 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 d908a05c961cdd..00000000000000 --- a/packages/block-editor/src/components/use-simulated-media-query/index.js +++ /dev/null @@ -1,140 +0,0 @@ -/** - * External dependencies - */ -import { filter, get } 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( - get( 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. - */ -export default function useSimulatedMediaQuery( marker, width ) { - useEffect( () => { - 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/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js index f09214edc8f102..20dca3309488fa 100644 --- a/packages/edit-post/src/components/resize-canvas/index.js +++ b/packages/edit-post/src/components/resize-canvas/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useSimulatedMediaQuery } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; @@ -61,10 +60,5 @@ export function useResizeCanvas() { } }; - useSimulatedMediaQuery( - 'resizable-editor-section', - getCanvasWidth( deviceType ) - ); - return contentInlineStyles( deviceType ); } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 159471f5f56a84..0ce0cdee11e86b 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -65,11 +65,8 @@ function VisualEditor() { return ( <> -