Resizable editor experiment

packages/edit-post/package.json

@@ -43,6 +43,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
+		"css-mediaquery": "^0.1.2",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"refx": "^3.0.0",

packages/edit-post/src/components/editor-regions/index.js

@@ -2,14 +2,47 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
+import { match } from 'css-mediaquery';
+import { difference } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { navigateRegions } from '@wordpress/components';
+import { navigateRegions, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+const styleStorage = {};
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
+	const [ contentWidth, updatecontentWidth ] = useState( {} );
+	const getMQs = ( width ) => {
+		const leastWidth = width < window.innerWidth ? `${ width }px` : `${ window.innerWidth }px`;
+		Object.values( document.styleSheets )
+			.filter( ( sheet ) => sheet.href && ( sheet.href.includes( 'editor-style' ) || sheet.href.includes( 'block-editor' ) || sheet.href.includes( 'block-library' ) ) )
+			.forEach( ( sheet, index ) => {
+				if ( ! styleStorage[ index ] ) {
+					styleStorage[ index ] = [];
+				} else {
+					const rulesToInsert = styleStorage[ index ].filter( ( rule ) => rule.media && match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) );
+					rulesToInsert.forEach( ( rule ) => sheet.insertRule( rule.cssText, sheet.cssRules.length ) );
+					styleStorage[ index ] = difference( styleStorage[ index ], rulesToInsert );
+				}
+				const rulesToDelete = Object.values( sheet.cssRules ).reduce( function( result, rule, rulesIndex ) {
+					if ( rule.media && ! match( rule.media.mediaText, { type: 'screen', width: leastWidth } ) ) {
+						result.push( rulesIndex );
+					}
+					return result;
+				}, [] );
+				let countDeleted = 0;
+				rulesToDelete.forEach( ( item ) => {
+					if ( Number.isInteger( item ) ) {
+						styleStorage[ index ].push( sheet.cssRules[ item - countDeleted ] );
+						sheet.deleteRule( item - countDeleted );
+						countDeleted++;
+					}
+				} );
+			} );
+	};
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
 			{ !! header && (
@@ -24,12 +57,27 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 				</div>
 			) }
 			<div className="edit-post-editor-regions__body">
+				<div className="edit-post-editor-regions__width-toggles">
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( {} );
+						getMQs( 2000 );
+					} }>Desktop</Button>
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( { width: '780px', margin: '0 auto', flexGrow: 0 } );
+						getMQs( 780 );
+					} }>Tablet</Button>
+					<Button isTertiary isLarge onClick={ () => {
+						updatecontentWidth( { width: '340px', margin: '0 auto', flexGrow: 0 } );
+						getMQs( 340 );
+					} }>Mobile</Button>
+				</div>
 				<div
 					className="edit-post-editor-regions__content"
 					role="region"
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
+					style={ contentWidth }
 				>
 					{ content }
 				</div>

packages/edit-post/src/components/editor-regions/style.scss

@@ -57,6 +57,14 @@ html {
 	overscroll-behavior-y: none;
 }
 
+.edit-post-editor-regions__width-toggles {
+	position: absolute;
+	top: 30px;
+	z-index: 31;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
+
 .edit-post-editor-regions__content {
 	flex-grow: 1;