Resizable editor experiment

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -500,6 +500,18 @@ _Returns_
 
 -   `?string`: Adjacent block's client ID, or null if none exists.
 
+<a name="getPreviewDeviceType" href="#getPreviewDeviceType">#</a> **getPreviewDeviceType**
+
+Returns the current editing canvas device type.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Device type.
+
 <a name="getPreviousBlockClientId" href="#getPreviousBlockClientId">#</a> **getPreviousBlockClientId**
 
 Returns the previous block's client ID from the given reference start ID.
@@ -1214,6 +1226,18 @@ _Parameters_
 
 -   _isNavigationMode_ `string`: Enable/Disable navigation mode.
 
+<a name="setPreviewDeviceType" href="#setPreviewDeviceType">#</a> **setPreviewDeviceType**
+
+Returns an action object used to toggle the width of the editing canvas
+
+_Parameters_
+
+-   _deviceType_ `string`: 
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="setTemplateValidity" href="#setTemplateValidity">#</a> **setTemplateValidity**
 
 Returns an action object resetting the template validity.

packages/block-editor/README.md

@@ -482,6 +482,15 @@ _Related_
 
 Undocumented declaration.
 
+<a name="useSimulatedMediaQuery" href="#useSimulatedMediaQuery">#</a> **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.
+
 <a name="Warning" href="#Warning">#</a> **Warning**
 
 Undocumented declaration.

packages/block-editor/package.json

@@ -45,6 +45,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
+		"css-mediaquery": "^0.1.2",
 		"diff": "^3.5.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"inherits": "^2.0.3",

packages/block-editor/src/components/editor-skeleton/style.scss

@@ -59,6 +59,7 @@ html {
 
 .block-editor-editor-skeleton__content {
 	flex-grow: 1;
+	background-color: $light-gray-700;
 
 	// Treat as flex container to allow children to grow to occupy full
 	// available height of the content area.
@@ -68,9 +69,9 @@ html {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	// Beyond the medium breakpoint, we allow the sidebar.
 	// The sidebar should scroll independently, so enable scroll here also.
-	@include break-medium() {
-		overflow: auto;
-	}
+
+	overflow: auto;
+
 }
 
 .block-editor-editor-skeleton__sidebar {

packages/block-editor/src/components/index.js

@@ -92,3 +92,4 @@ export { default as WritingFlow } from './writing-flow';
  */
 
 export { default as BlockEditorProvider } from './provider';
+export { default as useSimulatedMediaQuery } from './simulate-media-query';

packages/block-editor/src/components/inserter/style.scss

@@ -32,10 +32,11 @@ $block-inserter-search-height: 38px;
 	height: 100%;
 	display: flex;
 	width: auto;
+	min-width: 400px;
+	position: relative;
 
 	@include break-medium {
 		width: 400px;
-		position: relative;
 
 		&.has-help-panel {
 			width: 700px;

packages/block-editor/src/components/simulate-media-query/index.js

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import { filter, get } from 'lodash';
+import { match } from 'css-mediaquery';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+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 ( ! window ) {
+		return;
+	}
+	return filter(
+		get( window, [ 'document', 'styleSheets' ], [] ),
+		( styleSheet ) => {
+			return (
+				styleSheet.href &&
+				styleSheet.href.includes( window.location.hostname )
+			);
+		}
+	);
+}
+
+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 (
+					! 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 ] );
+}

packages/block-editor/src/store/actions.js

@@ -799,6 +799,20 @@ export function updateSettings( settings ) {
 	};
 }
 
+/**
+ * Returns an action object used to toggle the width of the editing canvas
+ *
+ * @param {string} deviceType
+ *
+ * @return {Object} Action object.
+ */
+export function setPreviewDeviceType( deviceType ) {
+	return {
+		type: 'SET_PREVIEW_DEVICE_TYPE',
+		deviceType,
+	};
+}
+
 /**
  * Returns an action object used in signalling that a temporary reusable blocks have been saved
  * in order to switch its temporary id with the real id.

packages/block-editor/src/store/reducer.js

@@ -23,7 +23,6 @@ import {
  */
 import { combineReducers } from '@wordpress/data';
 import { isReusableBlock } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
@@ -1449,6 +1448,23 @@ export function automaticChangeStatus( state, action ) {
 	// Reset the state by default (for any action not handled).
 }
 
+/**
+ * Reducer returning the editing canvas device type.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function deviceType( state = 'Desktop', action ) {
+	switch ( action.type ) {
+		case 'SET_PREVIEW_DEVICE_TYPE':
+			return action.deviceType;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1468,4 +1484,5 @@ export default combineReducers( {
 	lastBlockAttributesChange,
 	isNavigationMode,
 	automaticChangeStatus,
+	deviceType,
 } );

packages/block-editor/src/store/selectors.js

@@ -1621,3 +1621,14 @@ export function isNavigationMode( state ) {
 export function didAutomaticChange( state ) {
 	return !! state.automaticChangeStatus;
 }
+
+/**
+ * Returns the current editing canvas device type.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Device type.
+ */
+export function getPreviewDeviceType( state ) {
+	return state.deviceType;
+}

packages/block-editor/src/style.scss

@@ -1,3 +1,10 @@
+// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#start-resizable-editor-section {
+	display: none;
+}
+
+// Only add styles for components that are used inside the editing canvas here:
+
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";
@@ -19,11 +26,9 @@
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
-@import "./components/editor-skeleton/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
-@import "./components/inserter/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
@@ -39,3 +44,13 @@
 @import "./components/warning/style.scss";
 @import "./components/writing-flow/style.scss";
 @import "./hooks/anchor.scss";
+
+// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#end-resizable-editor-section {
+	display: none;
+}
+
+// Styles for components that are used outside of the editing canvas go here:
+
+@import "./components/editor-skeleton/style.scss";
+@import "./components/inserter/style.scss";

packages/block-library/src/editor.scss

@@ -1,3 +1,8 @@
+// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
@@ -57,3 +62,8 @@
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }
+
+// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#end-resizable-editor-section {
+	display: none;
+}

packages/block-library/src/style.scss

@@ -1,3 +1,8 @@
+// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./audio/style.scss";
 @import "./button/style.scss";
 @import "./buttons/style.scss";
@@ -247,3 +252,8 @@
 	/*rtl:ignore*/
 	text-align: right;
 }
+
+// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
+#end-resizable-editor-section {
+	display: none;
+}