From dfaa1b7cee28f50641e06e14df40a6d865064edd Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 12 Dec 2019 11:56:56 +1100
Subject: [PATCH 01/38] Resizable editor experiment

---
 package-lock.json                             |  6 ++
 packages/edit-post/package.json               |  1 +
 .../src/components/editor-regions/index.js    | 61 ++++++++++++++++---
 .../src/components/editor-regions/style.scss  |  8 +++
 4 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1d5a493bf8e4e..d866a093ca0e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10392,6 +10392,7 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
 				"classnames": "^2.2.5",
+				"css-mediaquery": "^0.1.2",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"refx": "^3.0.0",
@@ -15843,6 +15844,11 @@
 				}
 			}
 		},
+		"css-mediaquery": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+			"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+		},
 		"css-select": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 96b9ae2fb4802..1e4fa51da57e3 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -44,6 +44,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",
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index eee9dfcfdae9d..ca41f90429c8e 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -2,21 +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,
-} ) {
+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 && (
@@ -31,12 +57,27 @@ function EditorRegions( {
 				</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>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 65eceb6e17f04..2dd09a92ebf2f 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/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;
 

From 2720b04b3ad0730e97faffa97a77e0f076e3b17c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 18 Dec 2019 12:31:40 +1100
Subject: [PATCH 02/38] Add Jorge's simulate media query component

---
 packages/block-editor/src/components/index.js |   1 +
 .../components/simulate-media-query/index.js  | 103 ++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 packages/block-editor/src/components/simulate-media-query/index.js

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index b5039d38b4649..c30ead7fb8699 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -91,3 +91,4 @@ export { default as WritingFlow } from './writing-flow';
  */
 
 export { default as BlockEditorProvider } from './provider';
+export { default as __experimentalSimulateMediaQuery } from './simulate-media-query';
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
new file mode 100644
index 0000000000000..4c6b68b01200b
--- /dev/null
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import {
+	filter,
+	get,
+	some,
+} from 'lodash';
+
+/**
+ * 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:([^\(]*?)px\)/g;
+
+function getStyleSheetsThatMatchPaths( partialPaths ) {
+	return filter(
+		get( window, [ 'document', 'styleSheets' ], [] ),
+		( styleSheet ) => {
+			return (
+				styleSheet.href &&
+				some(
+					partialPaths,
+					( partialPath ) => {
+						return styleSheet.href.includes( partialPath );
+					}
+				)
+			);
+		}
+	);
+}
+
+function isReplaceableMediaRule( rule ) {
+	if ( ! rule.media ) {
+		return false;
+	}
+	return !! rule.conditionText.match( VALID_MEDIA_QUERY_REGEX );
+}
+
+function replaceRule( styleSheet, newRuleText, index ) {
+	styleSheet.removeRule( index );
+	styleSheet.insertRule( newRuleText, index );
+}
+
+function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
+	return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( match, minOrMax, value ) => {
+		const integerValue = parseInt( value );
+		if (
+			( minOrMax === 'min' && widthValue >= integerValue ) ||
+			( minOrMax === 'max' && widthValue <= integerValue )
+		) {
+			return ENABLED_MEDIA_QUERY;
+		}
+		return DISABLED_MEDIA_QUERY;
+	} );
+}
+
+export default function SimulateMediaQuery( { partialPaths, width } ) {
+	useEffect(
+		() => {
+			const styleSheets = getStyleSheetsThatMatchPaths( partialPaths );
+			const originalStyles = [];
+			styleSheets.forEach( ( styleSheet, styleSheetIndex ) => {
+				for ( let ruleIndex = 0; ruleIndex < styleSheet.cssRules.length; ++ruleIndex ) {
+					const rule = styleSheet.cssRules[ ruleIndex ];
+					if ( ! 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 );
+						}
+					}
+				} );
+			};
+		},
+		[ partialPaths, width ]
+	);
+	return null;
+}
+

From 6f0ca43d856d178394b051876b582e827914ce20 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 18 Dec 2019 14:58:32 +1100
Subject: [PATCH 03/38] Integrate Jorge's solution with resizable editor

---
 package-lock.json                             |  2 +-
 packages/block-editor/package.json            |  1 +
 packages/block-editor/src/components/index.js |  2 +-
 .../components/simulate-media-query/index.js  | 15 ++++--
 packages/edit-post/package.json               |  1 -
 .../src/components/editor-regions/index.js    | 54 ++++++-------------
 6 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d866a093ca0e3..d47b9d4a65805 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10085,6 +10085,7 @@
 				"@wordpress/viewport": "file:packages/viewport",
 				"@wordpress/wordcount": "file:packages/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",
@@ -10392,7 +10393,6 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
 				"classnames": "^2.2.5",
-				"css-mediaquery": "^0.1.2",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"refx": "^3.0.0",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 49b4e4fd8fa59..2718fede3b4d7 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index c30ead7fb8699..88e845e13cc40 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -91,4 +91,4 @@ export { default as WritingFlow } from './writing-flow';
  */
 
 export { default as BlockEditorProvider } from './provider';
-export { default as __experimentalSimulateMediaQuery } from './simulate-media-query';
+export { default as useSimulatedMediaQuery } from './simulate-media-query';
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index 4c6b68b01200b..669288e9271c7 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -6,6 +6,7 @@ import {
 	get,
 	some,
 } from 'lodash';
+import { match } from 'css-mediaquery';
 
 /**
  * WordPress dependencies
@@ -47,11 +48,15 @@ function replaceRule( styleSheet, newRuleText, index ) {
 }
 
 function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
-	return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( match, minOrMax, value ) => {
-		const integerValue = parseInt( value );
+	return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( matchedSubstring ) => {
 		if (
-			( minOrMax === 'min' && widthValue >= integerValue ) ||
-			( minOrMax === 'max' && widthValue <= integerValue )
+			match(
+				matchedSubstring,
+				{
+					type: 'screen',
+					width: widthValue,
+				}
+			)
 		) {
 			return ENABLED_MEDIA_QUERY;
 		}
@@ -59,7 +64,7 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
 	} );
 }
 
-export default function SimulateMediaQuery( { partialPaths, width } ) {
+export default function useSimulatedMediaQuery( partialPaths, width ) {
 	useEffect(
 		() => {
 			const styleSheets = getStyleSheetsThatMatchPaths( partialPaths );
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 1e4fa51da57e3..96b9ae2fb4802 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -44,7 +44,6 @@
 		"@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",
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index ca41f90429c8e..2e43ba4e4226b 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -2,47 +2,26 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { match } from 'css-mediaquery';
-import { difference } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { navigateRegions, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 
-const styleStorage = {};
+// 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++;
-					}
-				} );
-			} );
-	};
+	const [ simulatedWidth, updateSimulatedWidth ] = useState( window.innerWidth );
+
+	useSimulatedMediaQuery( [
+		'block-library',
+		'editor-style',
+		'block-editor',
+	], simulatedWidth );
+
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
 			{ !! header && (
@@ -59,16 +38,13 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 			<div className="edit-post-editor-regions__body">
 				<div className="edit-post-editor-regions__width-toggles">
 					<Button isTertiary isLarge onClick={ () => {
-						updatecontentWidth( {} );
-						getMQs( 2000 );
+						updateSimulatedWidth( 2000 );
 					} }>Desktop</Button>
 					<Button isTertiary isLarge onClick={ () => {
-						updatecontentWidth( { width: '780px', margin: '0 auto', flexGrow: 0 } );
-						getMQs( 780 );
+						updateSimulatedWidth( 780 );
 					} }>Tablet</Button>
 					<Button isTertiary isLarge onClick={ () => {
-						updatecontentWidth( { width: '340px', margin: '0 auto', flexGrow: 0 } );
-						getMQs( 340 );
+						updateSimulatedWidth( 340 );
 					} }>Mobile</Button>
 				</div>
 				<div
@@ -77,7 +53,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
-					style={ contentWidth }
+					style={ { width: simulatedWidth, margin: '0 auto', flexGrow: 0 } }
 				>
 					{ content }
 				</div>

From 600a9ff5349f065e46773c9f924327f11e9b4018 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 18 Dec 2019 14:58:57 +1100
Subject: [PATCH 04/38] docs update

---
 packages/block-editor/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index cc1ee80f19420..d7d7a6180300f 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -482,6 +482,10 @@ _Related_
 
 Undocumented declaration.
 
+<a name="useSimulatedMediaQuery" href="#useSimulatedMediaQuery">#</a> **useSimulatedMediaQuery**
+
+Undocumented declaration.
+
 <a name="Warning" href="#Warning">#</a> **Warning**
 
 Undocumented declaration.

From 122ccee43941e44b6f808de92655564cedbcd2a1 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 13 Jan 2020 17:21:39 +1100
Subject: [PATCH 05/38] Add stylesheet list as editor setting.

---
 lib/editing-canvas-stylesheets.php            | 22 +++++++++++++++++++
 lib/load.php                                  |  2 ++
 packages/block-editor/README.md               |  1 +
 packages/block-editor/src/store/defaults.js   |  6 +++++
 .../src/components/editor-regions/index.js    | 11 +++++-----
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 lib/editing-canvas-stylesheets.php

diff --git a/lib/editing-canvas-stylesheets.php b/lib/editing-canvas-stylesheets.php
new file mode 100644
index 0000000000000..8d16d0a0a9086
--- /dev/null
+++ b/lib/editing-canvas-stylesheets.php
@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * Extends default editor settings with editing canvas stylesheets.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+
+function gutenberg_stylesheets_editor_settings( $settings ) {
+	$stylesheets_settings = array(
+		'resizableStylesheets' => array(
+			'block-library',
+			'editor-style',
+			'block-editor',
+		),
+	);
+
+	return array_merge( $settings, $stylesheets_settings );
+}
+add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
diff --git a/lib/load.php b/lib/load.php
index 5b641a13278d1..3a3e8ec2fc757 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -65,3 +65,5 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';
 require dirname( __FILE__ ) . '/global-styles.php';
+require dirname( __FILE__ ) . '/editing-canvas-stylesheets.php';
+
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index d7d7a6180300f..376d0d3c1059f 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -414,6 +414,7 @@ _Properties_
 -   _titlePlaceholder_ `string`: Empty title placeholder
 -   _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
 -   _showInserterHelpPanel_ `boolean`: Whether or not the inserter help panel is shown
+-   _resizableStylesheets_ `Array`: Stylesheets manipulated during editing canvas resizing
 -   _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
 -   _\_\_experimentalEnableLegacyWidgetBlock_ `boolean`: Whether the user has enabled the Legacy Widget Block
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index a0ab78569c508..fb58d254d164e 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -29,6 +29,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {string} titlePlaceholder Empty title placeholder
  * @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor
  * @property {boolean} showInserterHelpPanel Whether or not the inserter help panel is shown
+ * @property {Array} resizableStylesheets Stylesheets manipulated during editing canvas resizing
  * @property {boolean} __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
  * @property {boolean} __experimentalEnableLegacyWidgetBlock Whether the user has enabled the Legacy Widget Block
  * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
@@ -148,6 +149,11 @@ export const SETTINGS_DEFAULTS = {
 	availableLegacyWidgets: {},
 	hasPermissionsToManageWidgets: false,
 	showInserterHelpPanel: true,
+	resizableStylesheets: [
+		'block-library',
+		'editor-style',
+		'block-editor',
+	],
 	__experimentalCanUserUseUnfilteredHTML: false,
 	__experimentalEnableLegacyWidgetBlock: false,
 	__experimentalBlockDirectory: false,
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 2e43ba4e4226b..920e0c0313df0 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -10,17 +10,18 @@ import { navigateRegions, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useSimulatedMediaQuery } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 // const styleStorage = {};
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
 	const [ simulatedWidth, updateSimulatedWidth ] = useState( window.innerWidth );
 
-	useSimulatedMediaQuery( [
-		'block-library',
-		'editor-style',
-		'block-editor',
-	], simulatedWidth );
+	const resizableStylesheets = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getSettings().resizableStylesheets;
+	}, [] );
+
+	useSimulatedMediaQuery( resizableStylesheets, simulatedWidth );
 
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>

From 75f7d2821af10b8fc38a40e24dae4dcaa590caa0 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 14 Jan 2020 18:47:51 +1100
Subject: [PATCH 06/38] Stage management for editing canvas device type.

---
 packages/block-editor/src/store/actions.js    | 14 +++
 packages/block-editor/src/store/reducer.js    | 20 +++-
 packages/block-editor/src/store/selectors.js  | 11 +++
 .../src/components/editor-regions/index.js    | 32 +++----
 .../src/components/editor-regions/style.scss  |  8 --
 .../components/post-preview-button/index.js   | 94 ++++++++++++++-----
 .../components/post-preview-button/style.scss |  3 +
 packages/editor/src/style.scss                |  1 +
 8 files changed, 131 insertions(+), 52 deletions(-)
 create mode 100644 packages/editor/src/components/post-preview-button/style.scss

diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index a9162f4b6d772..41b1362760dc8 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/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 toggleCanvasWidth( deviceType ) {
+	return {
+		type: 'TOGGLE_CANVAS_WIDTH',
+		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.
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 45a5dc63cea04..c5f4dfc2bb549 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -23,7 +23,7 @@ import {
  */
 import { combineReducers } from '@wordpress/data';
 import { isReusableBlock } from '@wordpress/blocks';
-
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -1449,6 +1449,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 'TOGGLE_CANVAS_WIDTH':
+			return action.deviceType;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1468,4 +1485,5 @@ export default combineReducers( {
 	lastBlockAttributesChange,
 	isNavigationMode,
 	automaticChangeStatus,
+	deviceType,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index f6c1f3052530a..43549d94f6a2d 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1592,3 +1592,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 deviceType( state ) {
+	return state.deviceType;
+}
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 920e0c0313df0..340b523d1f653 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -6,22 +6,31 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { navigateRegions, Button } from '@wordpress/components';
+import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
 // const styleStorage = {};
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
-	const [ simulatedWidth, updateSimulatedWidth ] = useState( window.innerWidth );
-
 	const resizableStylesheets = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getSettings().resizableStylesheets;
 	}, [] );
 
-	useSimulatedMediaQuery( resizableStylesheets, simulatedWidth );
+	const canvasWidth = useSelect( ( select ) => {
+		const deviceType = select( 'core/block-editor' ).deviceType();
+		switch ( deviceType ) {
+			case 'Tablet':
+				return 780;
+			case 'Mobile':
+				return 340;
+			default:
+				return 2000;
+		}
+	} );
+
+	useSimulatedMediaQuery( resizableStylesheets, canvasWidth );
 
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
@@ -37,24 +46,13 @@ 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={ () => {
-						updateSimulatedWidth( 2000 );
-					} }>Desktop</Button>
-					<Button isTertiary isLarge onClick={ () => {
-						updateSimulatedWidth( 780 );
-					} }>Tablet</Button>
-					<Button isTertiary isLarge onClick={ () => {
-						updateSimulatedWidth( 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={ { width: simulatedWidth, margin: '0 auto', flexGrow: 0 } }
+					style={ { width: canvasWidth, margin: '0 auto', flexGrow: 0 } }
 				>
 					{ content }
 				</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 2dd09a92ebf2f..65eceb6e17f04 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -57,14 +57,6 @@ 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;
 
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 620bb9aaf0180..3ba4138a6acfb 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,8 +7,8 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Path, SVG } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { Button, Dropdown, MenuGroup, MenuItem, Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
@@ -175,7 +175,7 @@ export class PostPreviewButton extends Component {
 	}
 
 	render() {
-		const { previewLink, currentPostLink, isSaveable } = this.props;
+		const { previewLink, currentPostLink, isSaveable, toggleCanvas } = this.props;
 
 		// Link to the `?preview=true` URL if we have it, since this lets us see
 		// changes that were autosaved since the post was last published. Otherwise,
@@ -183,20 +183,52 @@ export class PostPreviewButton extends Component {
 		const href = previewLink || currentPostLink;
 
 		return (
-			<Button
-				isSecondary
-				className="editor-post-preview"
-				href={ href }
-				target={ this.getWindowTarget() }
-				disabled={ ! isSaveable }
-				onClick={ this.openPreviewWindow }
-			>
-				{ _x( 'Preview', 'imperative verb' ) }
-				<span className="screen-reader-text">
-					{ /* translators: accessibility text */
-					__( '(opens in a new tab)' ) }
-				</span>
-			</Button>
+			<Dropdown
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
+						{ this.props.deviceType }
+					</Button>
+				) }
+				renderContent={ () => (
+					<>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => toggleCanvas( 'Desktop' ) }
+							>
+								{ __( 'Desktop' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => toggleCanvas( 'Tablet' ) }
+							>
+								{ __( 'Tablet' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => toggleCanvas( 'Mobile' ) }
+							>
+								{ __( 'Mobile' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<Button
+								className="editor-post-preview"
+								href={ href }
+								target={ this.getWindowTarget() }
+								disabled={ ! isSaveable }
+								onClick={ this.openPreviewWindow }
+							>
+								{ __( 'Preview externally' ) }
+								<span className="screen-reader-text">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</span>
+							</Button>
+						</MenuGroup>
+					</>
+				) }
+			/>
+
 		);
 	}
 }
@@ -211,7 +243,12 @@ export default compose( [
 			isEditedPostAutosaveable,
 			getEditedPostPreviewLink,
 		} = select( 'core/editor' );
-		const { getPostType } = select( 'core' );
+		const {
+			getPostType,
+		} = select( 'core' );
+		const {
+			deviceType,
+		} = select( 'core/block-editor' );
 
 		const previewLink = getEditedPostPreviewLink();
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
@@ -224,15 +261,20 @@ export default compose( [
 			isSaveable: isEditedPostSaveable(),
 			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
-			isDraft:
-				[ 'draft', 'auto-draft' ].indexOf(
-					getEditedPostAttribute( 'status' )
-				) !== -1,
+			isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1,
+			deviceType: deviceType(),
 		};
 	} ),
-	withDispatch( ( dispatch ) => ( {
-		autosave: dispatch( 'core/editor' ).autosave,
-		savePost: dispatch( 'core/editor' ).savePost,
-	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { toggleCanvasWidth } = dispatch( 'core/block-editor' );
+		return {
+			autosave: dispatch( 'core/editor' ).autosave,
+			savePost: dispatch( 'core/editor' ).savePost,
+			toggleCanvas( deviceType ) {
+				dispatch( toggleCanvasWidth( deviceType ) );
+			},
+		};
+	}
+	),
 	ifCondition( ( { isViewable } ) => isViewable ),
 ] )( PostPreviewButton );
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
new file mode 100644
index 0000000000000..5b389cc702fad
--- /dev/null
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -0,0 +1,3 @@
+.components-menu-group + .components-menu-group {
+	border-top: 1px solid #000;
+}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 83a75edd9013a..6deaae90dd8d4 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -10,6 +10,7 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-permalink/style.scss";
+@import "./components/post-preview-button/style.scss";
 @import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";

From 812e31a17bfdee0caad31caa725b926f0c00cbb0 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 15 Jan 2020 11:58:26 +1100
Subject: [PATCH 07/38] Fix IE incompatibility.

---
 .../src/components/simulate-media-query/index.js           | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index 669288e9271c7..157d3364fb498 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -16,7 +16,7 @@ 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:([^\(]*?)px\)/g;
+const VALID_MEDIA_QUERY_REGEX = /\((min|max)-width:[^\(]*?\)/g;
 
 function getStyleSheetsThatMatchPaths( partialPaths ) {
 	return filter(
@@ -39,11 +39,12 @@ function isReplaceableMediaRule( rule ) {
 	if ( ! rule.media ) {
 		return false;
 	}
-	return !! rule.conditionText.match( VALID_MEDIA_QUERY_REGEX );
+	// 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.removeRule( index );
+	styleSheet.deleteRule( index );
 	styleSheet.insertRule( newRuleText, index );
 }
 

From 39370bcc79eea6f91cbd68d2385e0e8bbc97e778 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 15 Jan 2020 15:17:25 +1100
Subject: [PATCH 08/38] Dropdown styling.

---
 .../src/components/editor-regions/index.js    |  7 +-
 .../src/components/editor-regions/style.scss  |  4 ++
 .../components/post-preview-button/index.js   | 64 +++++++++++++------
 .../components/post-preview-button/style.scss | 59 ++++++++++++++++-
 4 files changed, 113 insertions(+), 21 deletions(-)

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 340b523d1f653..75ef08f46319a 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -52,7 +52,12 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
-					style={ { width: canvasWidth, margin: '0 auto', flexGrow: 0 } }
+					style={ {
+						width: canvasWidth,
+						margin: '0 auto',
+						flexGrow: 0,
+						height: canvasWidth < 500 ? 780 : 'auto',
+					} }
 				>
 					{ content }
 				</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 65eceb6e17f04..e8220218b86fd 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -38,6 +38,7 @@ html {
 .edit-post-editor-regions__body {
 	flex-grow: 1;
 	display: flex;
+	background-color: $light-gray-700;
 
 	// Even on Mobile, we choose to scroll this element on its own.
 	// This helps enable a fixed-to-top toolbar that makes the editing experience
@@ -59,6 +60,9 @@ html {
 
 .edit-post-editor-regions__content {
 	flex-grow: 1;
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
 
 	// Treat as flex container to allow children to grow to occupy full
 	// available height of the content area.
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 3ba4138a6acfb..576380bc655a8 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Dropdown, MenuGroup, MenuItem, Path, SVG } from '@wordpress/components';
+import { Button, Dropdown, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -99,6 +99,19 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
+const downArrow = (
+	<SVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+		<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
+	</SVG>
+);
+
+const checkIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+		<Path fill="none" d="M0 0h24v24H0z" />
+		<Path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+	</SVG>
+);
+
 export class PostPreviewButton extends Component {
 	constructor() {
 		super( ...arguments );
@@ -184,33 +197,48 @@ export class PostPreviewButton extends Component {
 
 		return (
 			<Dropdown
+				className="editor-post-preview__dropdown"
+				contentClassName="editor-post-preview__dropdown-content"
 				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
+					<Button onClick={ onToggle }
+						className="editor-post-preview__button-toggle"
+						aria-expanded={ isOpen }
+					>
 						{ this.props.deviceType }
+						<div className="editor-post-preview__button-separator">{ downArrow }</div>
 					</Button>
 				) }
 				renderContent={ () => (
 					<>
 						<MenuGroup>
-							<MenuItem
-								onClick={ () => toggleCanvas( 'Desktop' ) }
-							>
-								{ __( 'Desktop' ) }
-							</MenuItem>
-							<MenuItem
-								onClick={ () => toggleCanvas( 'Tablet' ) }
-							>
-								{ __( 'Tablet' ) }
-							</MenuItem>
-							<MenuItem
-								onClick={ () => toggleCanvas( 'Mobile' ) }
-							>
-								{ __( 'Mobile' ) }
-							</MenuItem>
+							<fieldset>
+								<legend className="editor-post-preview__legend">View</legend>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => toggleCanvas( 'Desktop' ) }
+								>
+									{ __( 'Desktop' ) }
+									{ this.props.deviceType === 'Desktop' && checkIcon }
+								</MenuItem>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => toggleCanvas( 'Tablet' ) }
+								>
+									{ __( 'Tablet' ) }
+									{ this.props.deviceType === 'Tablet' && checkIcon }
+								</MenuItem>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => toggleCanvas( 'Mobile' ) }
+								>
+									{ __( 'Mobile' ) }
+									{ this.props.deviceType === 'Mobile' && checkIcon }
+								</MenuItem>
+							</fieldset>
 						</MenuGroup>
 						<MenuGroup>
 							<Button
-								className="editor-post-preview"
+								className="editor-post-preview__button-external"
 								href={ href }
 								target={ this.getWindowTarget() }
 								disabled={ ! isSaveable }
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 5b389cc702fad..3954392871acd 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -1,3 +1,58 @@
-.components-menu-group + .components-menu-group {
-	border-top: 1px solid #000;
+.editor-post-preview__dropdown {
+	margin-right: $grid-size;
+	border: 1px solid $light-gray-600;
+}
+
+.editor-post-preview__button-toggle {
+	border-radius: 0;
+	min-width: 120px;
+	display: flex;
+	justify-content: space-between;
+}
+
+.editor-post-preview__button-separator {
+	border-left: 1px solid $light-gray-600;
+	height: $icon-button-size;
+	padding: $grid-size 0 $grid-size $grid-size;
+}
+
+.editor-post-preview__legend {
+	padding: $grid-size $grid-size-large - 1;
+	text-transform: uppercase;
+	color: $dark-gray-200;
+}
+
+.editor-post-preview__button-resize {
+	display: flex;
+	justify-content: space-between;
+}
+
+.editor-post-preview__dropdown-content {
+	.components-popover__content {
+		overflow-y: visible;
+	}
+	.components-menu-group + .components-menu-group {
+		border-top: 1px solid #000;
+		padding: 0;
+	}
+}
+
+.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external {
+	display: block;
+	padding: $grid-size-large - 1;
+	height: auto;
+
+	&:focus {
+		color: $dark-gray-900;
+		border: none;
+		box-shadow: none;
+		outline-offset: -2px;
+		outline: 1px dotted $dark-gray-500;
+	}
+	&:hover {
+		color: $dark-gray-900;
+		border: none;
+		box-shadow: none;
+		background: $light-gray-200;
+	}
 }

From a9f5d54b2569667a5f496a230a85d1051973158b Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 16 Jan 2020 12:10:15 +1100
Subject: [PATCH 09/38] Fixed styling bugs

---
 .../src/components/editor-regions/index.js    | 46 +++++++++++++------
 .../src/components/editor-regions/style.scss  |  3 --
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 75ef08f46319a..854ab65b75ea2 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -11,16 +11,17 @@ import { __ } from '@wordpress/i18n';
 import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
-// const styleStorage = {};
-
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
 	const resizableStylesheets = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getSettings().resizableStylesheets;
 	}, [] );
 
-	const canvasWidth = useSelect( ( select ) => {
-		const deviceType = select( 'core/block-editor' ).deviceType();
-		switch ( deviceType ) {
+	const deviceType = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).deviceType();
+	} );
+
+	const canvasWidth = ( device ) => {
+		switch ( device ) {
 			case 'Tablet':
 				return 780;
 			case 'Mobile':
@@ -28,9 +29,33 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 			default:
 				return 2000;
 		}
-	} );
+	};
+
+	const marginValue = ( device ) => {
+		const viewportHeight = window.innerHeight;
+		if ( viewportHeight < 800 || device === 'Tablet' ) {
+			return '0';
+		} else if ( viewportHeight < 950 ) {
+			return '36px';
+		}
+		return '72px';
+	};
+
+	const inlineStyles = ( device ) => {
+		switch ( device ) {
+			case 'Tablet':
+			case 'Mobile':
+				return {
+					width: canvasWidth( deviceType ),
+					margin: marginValue( deviceType ) + ' auto',
+					flexGrow: 0,
+				};
+			default:
+				return null;
+		}
+	};
 
-	useSimulatedMediaQuery( resizableStylesheets, canvasWidth );
+	useSimulatedMediaQuery( resizableStylesheets, canvasWidth( deviceType ) );
 
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
@@ -52,12 +77,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
-					style={ {
-						width: canvasWidth,
-						margin: '0 auto',
-						flexGrow: 0,
-						height: canvasWidth < 500 ? 780 : 'auto',
-					} }
+					style={ inlineStyles( deviceType ) }
 				>
 					{ content }
 				</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index e8220218b86fd..af39ecd8bd327 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -60,9 +60,6 @@ html {
 
 .edit-post-editor-regions__content {
 	flex-grow: 1;
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
 
 	// Treat as flex container to allow children to grow to occupy full
 	// available height of the content area.

From 21f4a161cba36bcac70339746b70113cd7617f1c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 16 Jan 2020 13:56:40 +1100
Subject: [PATCH 10/38] Classic preview button for mobile.

---
 .../components/post-preview-button/index.js   | 137 ++++++++++--------
 .../components/post-preview-button/style.scss |  10 ++
 2 files changed, 87 insertions(+), 60 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 576380bc655a8..d8ba4cde107fc 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -8,7 +8,7 @@ import { get } from 'lodash';
  */
 import { Component, renderToString } from '@wordpress/element';
 import { Button, Dropdown, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
@@ -196,67 +196,84 @@ export class PostPreviewButton extends Component {
 		const href = previewLink || currentPostLink;
 
 		return (
-			<Dropdown
-				className="editor-post-preview__dropdown"
-				contentClassName="editor-post-preview__dropdown-content"
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button onClick={ onToggle }
-						className="editor-post-preview__button-toggle"
-						aria-expanded={ isOpen }
-					>
-						{ this.props.deviceType }
-						<div className="editor-post-preview__button-separator">{ downArrow }</div>
-					</Button>
-				) }
-				renderContent={ () => (
-					<>
-						<MenuGroup>
-							<fieldset>
-								<legend className="editor-post-preview__legend">View</legend>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => toggleCanvas( 'Desktop' ) }
+			<>
+				<Dropdown
+					className="editor-post-preview__dropdown"
+					contentClassName="editor-post-preview__dropdown-content"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button onClick={ onToggle }
+							className="editor-post-preview__button-toggle"
+							aria-expanded={ isOpen }
+						>
+							{ this.props.deviceType }
+							<div className="editor-post-preview__button-separator">{ downArrow }</div>
+						</Button>
+					) }
+					renderContent={ () => (
+						<>
+							<MenuGroup>
+								<fieldset>
+									<legend className="editor-post-preview__legend">View</legend>
+									<MenuItem
+										className="editor-post-preview__button-resize"
+										onClick={ () => toggleCanvas( 'Desktop' ) }
+									>
+										{ __( 'Desktop' ) }
+										{ this.props.deviceType === 'Desktop' && checkIcon }
+									</MenuItem>
+									<MenuItem
+										className="editor-post-preview__button-resize"
+										onClick={ () => toggleCanvas( 'Tablet' ) }
+									>
+										{ __( 'Tablet' ) }
+										{ this.props.deviceType === 'Tablet' && checkIcon }
+									</MenuItem>
+									<MenuItem
+										className="editor-post-preview__button-resize"
+										onClick={ () => toggleCanvas( 'Mobile' ) }
+									>
+										{ __( 'Mobile' ) }
+										{ this.props.deviceType === 'Mobile' && checkIcon }
+									</MenuItem>
+								</fieldset>
+							</MenuGroup>
+							<MenuGroup>
+								<Button
+									className="editor-post-preview__button-external"
+									href={ href }
+									target={ this.getWindowTarget() }
+									disabled={ ! isSaveable }
+									onClick={ this.openPreviewWindow }
 								>
-									{ __( 'Desktop' ) }
-									{ this.props.deviceType === 'Desktop' && checkIcon }
-								</MenuItem>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => toggleCanvas( 'Tablet' ) }
-								>
-									{ __( 'Tablet' ) }
-									{ this.props.deviceType === 'Tablet' && checkIcon }
-								</MenuItem>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => toggleCanvas( 'Mobile' ) }
-								>
-									{ __( 'Mobile' ) }
-									{ this.props.deviceType === 'Mobile' && checkIcon }
-								</MenuItem>
-							</fieldset>
-						</MenuGroup>
-						<MenuGroup>
-							<Button
-								className="editor-post-preview__button-external"
-								href={ href }
-								target={ this.getWindowTarget() }
-								disabled={ ! isSaveable }
-								onClick={ this.openPreviewWindow }
-							>
-								{ __( 'Preview externally' ) }
-								<span className="screen-reader-text">
-									{
+									{ __( 'Preview externally' ) }
+									<span className="screen-reader-text">
+										{
 										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</span>
-							</Button>
-						</MenuGroup>
-					</>
-				) }
-			/>
-
+											__( '(opens in a new tab)' )
+										}
+									</span>
+								</Button>
+							</MenuGroup>
+						</>
+					) }
+				/>
+				<Button
+					isSecondary
+					className="editor-post-preview"
+					href={ href }
+					target={ this.getWindowTarget() }
+					disabled={ ! isSaveable }
+					onClick={ this.openPreviewWindow }
+				>
+					{ _x( 'Preview', 'imperative verb' ) }
+					<span className="screen-reader-text">
+						{
+						/* translators: accessibility text */
+							__( '(opens in a new tab)' )
+						}
+					</span>
+				</Button>
+			</>
 		);
 	}
 }
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 3954392871acd..61cb21f360a5d 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -1,4 +1,5 @@
 .editor-post-preview__dropdown {
+	display: none;
 	margin-right: $grid-size;
 	border: 1px solid $light-gray-600;
 }
@@ -56,3 +57,12 @@
 		background: $light-gray-200;
 	}
 }
+
+@include break-small() {
+	.editor-post-preview {
+		display: none;
+	}
+	.editor-post-preview__dropdown {
+		display: flex;
+	}
+}

From 63bbfa58614112654822d8bddf82bb1b253043ba Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 16 Jan 2020 14:29:56 +1100
Subject: [PATCH 11/38] Accurate styles on window resize.

---
 .../src/components/editor-regions/index.js      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 854ab65b75ea2..82f5971ff6675 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -10,6 +10,7 @@ import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
 	const resizableStylesheets = useSelect( ( select ) => {
@@ -20,15 +21,25 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 		return select( 'core/block-editor' ).deviceType();
 	} );
 
+	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
+
+	window.addEventListener( 'resize', () => updateActualWidth( window.innerWidth ) );
+
 	const canvasWidth = ( device ) => {
+		let deviceWidth = 0;
+
 		switch ( device ) {
 			case 'Tablet':
-				return 780;
+				deviceWidth = 780;
+				break;
 			case 'Mobile':
-				return 340;
+				deviceWidth = 340;
+				break;
 			default:
-				return 2000;
+				deviceWidth = 2000;
 		}
+
+		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
 	const marginValue = ( device ) => {

From aaec420ea018be74746da837c80dc19797a89f13 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 17 Jan 2020 09:49:36 +1100
Subject: [PATCH 12/38] Fix preview button unit tests.

---
 .../components/post-preview-button/test/index.js   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index 674957e0d330f..a0925d881679d 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -98,7 +98,9 @@ describe( 'PostPreviewButton', () => {
 				<PostPreviewButton postId={ 1 } autosave={ autosave } />
 			);
 
-			wrapper.simulate( 'click', {
+			const previewButton = wrapper.find( '.editor-post-preview' );
+
+			previewButton.simulate( 'click', {
 				preventDefault,
 				target: { href: 'https://wordpress.org/?p=1' },
 			} );
@@ -132,7 +134,9 @@ describe( 'PostPreviewButton', () => {
 				/>
 			);
 
-			wrapper.simulate( 'click', { preventDefault } );
+			const previewButton = wrapper.find( '.editor-post-preview' );
+
+			previewButton.simulate( 'click', { preventDefault } );
 
 			expect( preventDefault ).toHaveBeenCalled();
 			expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
@@ -157,7 +161,7 @@ describe( 'PostPreviewButton', () => {
 					previewLink="https://wordpress.org/?p=1&preview=true"
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			);
+			).find( '.editor-post-preview' );
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
@@ -169,7 +173,7 @@ describe( 'PostPreviewButton', () => {
 					isSaveable
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			);
+			).find( '.editor-post-preview' );
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
@@ -180,7 +184,7 @@ describe( 'PostPreviewButton', () => {
 					postId={ 1 }
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			);
+			).find( '.editor-post-preview' );
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );

From ad4c66971bcfff42bac7808558729b8cb60abfd3 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 17 Jan 2020 13:29:57 +1100
Subject: [PATCH 13/38] Docs updates.

---
 .../developers/data/data-core-block-editor.md | 24 +++++++++++++++++++
 lib/editing-canvas-stylesheets.php            |  6 ++++-
 lib/load.php                                  |  1 -
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index 10d031d436d50..421d32178b4b3 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -20,6 +20,18 @@ _Returns_
 
 -   `boolean`: Whether the given block type is allowed to be inserted.
 
+<a name="deviceType" href="#deviceType">#</a> **deviceType**
+
+Returns the current editing canvas device type.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Device type.
+
 <a name="didAutomaticChange" href="#didAutomaticChange">#</a> **didAutomaticChange**
 
 Returns true if the last change was an automatic change, false otherwise.
@@ -1292,6 +1304,18 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="toggleCanvasWidth" href="#toggleCanvasWidth">#</a> **toggleCanvasWidth**
+
+Returns an action object used to toggle the width of the editing canvas
+
+_Parameters_
+
+-   _deviceType_ `string`: 
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="toggleSelection" href="#toggleSelection">#</a> **toggleSelection**
 
 Returns an action object that enables or disables block selection.
diff --git a/lib/editing-canvas-stylesheets.php b/lib/editing-canvas-stylesheets.php
index 8d16d0a0a9086..4fc6a21849843 100644
--- a/lib/editing-canvas-stylesheets.php
+++ b/lib/editing-canvas-stylesheets.php
@@ -1,4 +1,9 @@
 <?php
+/**
+ * Stylesheet related functions.
+ *
+ * @package gutenberg
+ */
 
 /**
  * Extends default editor settings with editing canvas stylesheets.
@@ -7,7 +12,6 @@
  *
  * @return array Filtered editor settings.
  */
-
 function gutenberg_stylesheets_editor_settings( $settings ) {
 	$stylesheets_settings = array(
 		'resizableStylesheets' => array(
diff --git a/lib/load.php b/lib/load.php
index 3a3e8ec2fc757..38968c73b7ace 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -66,4 +66,3 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/edit-site-page.php';
 require dirname( __FILE__ ) . '/global-styles.php';
 require dirname( __FILE__ ) . '/editing-canvas-stylesheets.php';
-

From 86484bea5cdfb5c3b71e54443889a9466700f9a0 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 17 Jan 2020 16:05:37 +1100
Subject: [PATCH 14/38] Min heights and width adjustment.

---
 .../src/components/editor-regions/index.js    | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 82f5971ff6675..6ec38c720ef84 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -33,7 +33,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 				deviceWidth = 780;
 				break;
 			case 'Mobile':
-				deviceWidth = 340;
+				deviceWidth = 360;
 				break;
 			default:
 				deviceWidth = 2000;
@@ -42,24 +42,31 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = ( device ) => {
-		const viewportHeight = window.innerHeight;
-		if ( viewportHeight < 800 || device === 'Tablet' ) {
-			return '0';
-		} else if ( viewportHeight < 950 ) {
-			return '36px';
+	const marginValue = () => window.innerHeight < 800 ? 36 : 72;
+
+	const minHeightValue = ( device ) => device === 'Mobile' ? 640 : 768;
+
+	const contentInlineStyles = ( device ) => {
+		switch ( device ) {
+			case 'Tablet':
+			case 'Mobile':
+				return {
+					width: canvasWidth( device ),
+					margin: marginValue() + 'px auto',
+					flexGrow: 0,
+					minHeight: minHeightValue( device ) + 'px',
+				};
+			default:
+				return null;
 		}
-		return '72px';
 	};
 
-	const inlineStyles = ( device ) => {
+	const sidebarInlineStyles = ( device ) => {
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
-					width: canvasWidth( deviceType ),
-					margin: marginValue( deviceType ) + ' auto',
-					flexGrow: 0,
+					minHeight: minHeightValue( device ) + ( marginValue() * 2 ) + 'px',
 				};
 			default:
 				return null;
@@ -88,7 +95,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
-					style={ inlineStyles( deviceType ) }
+					style={ contentInlineStyles( deviceType ) }
 				>
 					{ content }
 				</div>
@@ -99,6 +106,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 						/* translators: accessibility text for the settings landmark region. */
 						aria-label={ __( 'Editor settings' ) }
 						tabIndex="-1"
+						style={ sidebarInlineStyles( deviceType ) }
 					>
 						{ sidebar }
 					</div>

From 6dd6e75d5b22fac682f51a5364d57ebc8009b749 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 20 Jan 2020 15:07:49 +1100
Subject: [PATCH 15/38] Address styling issues.

---
 .../src/components/editor-regions/index.js      | 17 ++---------------
 .../src/components/editor-regions/style.scss    |  2 ++
 .../src/components/post-preview-button/index.js |  3 ++-
 .../components/post-preview-button/style.scss   |  5 +++--
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 6ec38c720ef84..3bc11e46ab56b 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -44,7 +44,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 
 	const marginValue = () => window.innerHeight < 800 ? 36 : 72;
 
-	const minHeightValue = ( device ) => device === 'Mobile' ? 640 : 768;
+	const maxHeightValue = ( device ) => device === 'Mobile' ? 768 : 1024;
 
 	const contentInlineStyles = ( device ) => {
 		switch ( device ) {
@@ -54,19 +54,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 					width: canvasWidth( device ),
 					margin: marginValue() + 'px auto',
 					flexGrow: 0,
-					minHeight: minHeightValue( device ) + 'px',
-				};
-			default:
-				return null;
-		}
-	};
-
-	const sidebarInlineStyles = ( device ) => {
-		switch ( device ) {
-			case 'Tablet':
-			case 'Mobile':
-				return {
-					minHeight: minHeightValue( device ) + ( marginValue() * 2 ) + 'px',
+					maxHeight: maxHeightValue( device ) + 'px',
 				};
 			default:
 				return null;
@@ -106,7 +94,6 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 						/* translators: accessibility text for the settings landmark region. */
 						aria-label={ __( 'Editor settings' ) }
 						tabIndex="-1"
-						style={ sidebarInlineStyles( deviceType ) }
 					>
 						{ sidebar }
 					</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index af39ecd8bd327..47b2359a853c1 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -60,6 +60,8 @@ html {
 
 .edit-post-editor-regions__content {
 	flex-grow: 1;
+	// Default background color so that grey .edit-post-editor-regions__body color doesn't show through.
+	background-color: #fff;
 
 	// Treat as flex container to allow children to grow to occupy full
 	// available height of the content area.
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index d8ba4cde107fc..151ac2177cab9 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Dropdown, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
+import { Button, Dropdown, Icon, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -252,6 +252,7 @@ export class PostPreviewButton extends Component {
 											__( '(opens in a new tab)' )
 										}
 									</span>
+									<Icon icon="external" />
 								</Button>
 							</MenuGroup>
 						</>
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 61cb21f360a5d..591c85c59ab17 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -33,13 +33,14 @@
 		overflow-y: visible;
 	}
 	.components-menu-group + .components-menu-group {
-		border-top: 1px solid #000;
+		border-top: 1px solid $light-gray-500;
 		padding: 0;
 	}
 }
 
 .editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external {
-	display: block;
+	display: flex;
+	justify-content: space-between;
 	padding: $grid-size-large - 1;
 	height: auto;
 

From 3f70996109209648138db785cb7a55b4f535437b Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 20 Jan 2020 17:00:59 +1100
Subject: [PATCH 16/38] Attempt to fix block inserter menu.

---
 packages/block-editor/src/components/inserter/style.scss    | 3 ++-
 packages/edit-post/src/components/editor-regions/style.scss | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 92ae8f762e5a7..86469e990838d 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/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;
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 47b2359a853c1..293fec13d13b0 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -71,9 +71,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;
+
 }
 
 .edit-post-editor-regions__sidebar {

From e8e1d928a4247d7af707461cd3d0208b085ffaa6 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 21 Jan 2020 16:32:47 +1100
Subject: [PATCH 17/38] Address review feedback.

---
 .../developers/data/data-core-block-editor.md | 48 +++++------
 lib/client-assets.php                         | 20 +++++
 lib/editing-canvas-stylesheets.php            | 26 ------
 lib/load.php                                  |  1 -
 packages/block-editor/README.md               |  9 ++-
 .../components/simulate-media-query/index.js  |  7 +-
 packages/block-editor/src/store/actions.js    |  4 +-
 packages/block-editor/src/store/defaults.js   |  4 +-
 packages/block-editor/src/store/reducer.js    |  5 +-
 packages/block-editor/src/store/selectors.js  |  2 +-
 .../src/components/editor-regions/index.js    | 29 ++++---
 .../components/post-preview-button/index.js   | 80 +++++++++----------
 .../components/post-preview-button/style.scss |  1 -
 13 files changed, 120 insertions(+), 116 deletions(-)
 delete mode 100644 lib/editing-canvas-stylesheets.php

diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index 421d32178b4b3..451f351c628c1 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -20,18 +20,6 @@ _Returns_
 
 -   `boolean`: Whether the given block type is allowed to be inserted.
 
-<a name="deviceType" href="#deviceType">#</a> **deviceType**
-
-Returns the current editing canvas device type.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: Device type.
-
 <a name="didAutomaticChange" href="#didAutomaticChange">#</a> **didAutomaticChange**
 
 Returns true if the last change was an automatic change, false otherwise.
@@ -316,6 +304,18 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
+<a name="getDeviceType" href="#getDeviceType">#</a> **getDeviceType**
+
+Returns the current editing canvas device type.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Device type.
+
 <a name="getFirstMultiSelectedBlockClientId" href="#getFirstMultiSelectedBlockClientId">#</a> **getFirstMultiSelectedBlockClientId**
 
 Returns the client ID of the first block in the multi-selection set, or null
@@ -1209,6 +1209,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.
@@ -1304,18 +1316,6 @@ _Returns_
 
 -   `Object`: Action object.
 
-<a name="toggleCanvasWidth" href="#toggleCanvasWidth">#</a> **toggleCanvasWidth**
-
-Returns an action object used to toggle the width of the editing canvas
-
-_Parameters_
-
--   _deviceType_ `string`: 
-
-_Returns_
-
--   `Object`: Action object.
-
 <a name="toggleSelection" href="#toggleSelection">#</a> **toggleSelection**
 
 Returns an action object that enables or disables block selection.
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 192875b53f337..70f60d887f3c6 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -677,3 +677,23 @@ function gutenberg_extend_block_editor_preload_paths( $preload_paths, $post ) {
 	return $preload_paths;
 }
 add_filter( 'block_editor_preload_paths', 'gutenberg_extend_block_editor_preload_paths', 10, 2 );
+
+/**
+ * Extends default editor settings with editing canvas stylesheets.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_stylesheets_editor_settings( $settings ) {
+	$stylesheets_settings = array(
+		'resizableStyleSheets' => array(
+			'block-library',
+			'editor-style',
+			'block-editor',
+		),
+	);
+
+	return array_merge( $settings, $stylesheets_settings );
+}
+add_filter( 'block_editor_settings', 'gutenberg_stylesheets_editor_settings' );
diff --git a/lib/editing-canvas-stylesheets.php b/lib/editing-canvas-stylesheets.php
deleted file mode 100644
index 4fc6a21849843..0000000000000
--- a/lib/editing-canvas-stylesheets.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-/**
- * Stylesheet related functions.
- *
- * @package gutenberg
- */
-
-/**
- * Extends default editor settings with editing canvas stylesheets.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_stylesheets_editor_settings( $settings ) {
-	$stylesheets_settings = array(
-		'resizableStylesheets' => array(
-			'block-library',
-			'editor-style',
-			'block-editor',
-		),
-	);
-
-	return array_merge( $settings, $stylesheets_settings );
-}
-add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
diff --git a/lib/load.php b/lib/load.php
index 38968c73b7ace..5b641a13278d1 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -65,4 +65,3 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';
 require dirname( __FILE__ ) . '/global-styles.php';
-require dirname( __FILE__ ) . '/editing-canvas-stylesheets.php';
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 376d0d3c1059f..e0b9228f3294f 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -414,7 +414,7 @@ _Properties_
 -   _titlePlaceholder_ `string`: Empty title placeholder
 -   _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
 -   _showInserterHelpPanel_ `boolean`: Whether or not the inserter help panel is shown
--   _resizableStylesheets_ `Array`: Stylesheets manipulated during editing canvas resizing
+-   _resizableStyleSheets_ `Array`: Stylesheets manipulated during editing canvas resizing
 -   _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
 -   _\_\_experimentalEnableLegacyWidgetBlock_ `boolean`: Whether the user has enabled the Legacy Widget Block
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
@@ -485,7 +485,12 @@ Undocumented declaration.
 
 <a name="useSimulatedMediaQuery" href="#useSimulatedMediaQuery">#</a> **useSimulatedMediaQuery**
 
-Undocumented declaration.
+Function that manipulates media queries from stylesheets to simulate a given viewport width.
+
+_Parameters_
+
+-   _partialPaths_ `Array`: Paths of stylesheets to manipulate.
+-   _width_ `number`: Viewport width to simulate.
 
 <a name="Warning" href="#Warning">#</a> **Warning**
 
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index 157d3364fb498..a1b90e6c85727 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -65,6 +65,12 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
 	} );
 }
 
+/**
+ * Function that manipulates media queries from stylesheets to simulate a given viewport width.
+ *
+ * @param {Array} partialPaths Paths of stylesheets to manipulate.
+ * @param {number} width Viewport width to simulate.
+ */
 export default function useSimulatedMediaQuery( partialPaths, width ) {
 	useEffect(
 		() => {
@@ -104,6 +110,5 @@ export default function useSimulatedMediaQuery( partialPaths, width ) {
 		},
 		[ partialPaths, width ]
 	);
-	return null;
 }
 
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 41b1362760dc8..ad5d096c25e1d 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -806,9 +806,9 @@ export function updateSettings( settings ) {
  *
  * @return {Object} Action object.
  */
-export function toggleCanvasWidth( deviceType ) {
+export function setPreviewDeviceType( deviceType ) {
 	return {
-		type: 'TOGGLE_CANVAS_WIDTH',
+		type: 'SET_PREVIEW_DEVICE_TYPE',
 		deviceType,
 	};
 }
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index fb58d254d164e..b32fb22d0b950 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -29,7 +29,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {string} titlePlaceholder Empty title placeholder
  * @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor
  * @property {boolean} showInserterHelpPanel Whether or not the inserter help panel is shown
- * @property {Array} resizableStylesheets Stylesheets manipulated during editing canvas resizing
+ * @property {Array} resizableStyleSheets Stylesheets manipulated during editing canvas resizing
  * @property {boolean} __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
  * @property {boolean} __experimentalEnableLegacyWidgetBlock Whether the user has enabled the Legacy Widget Block
  * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
@@ -149,7 +149,7 @@ export const SETTINGS_DEFAULTS = {
 	availableLegacyWidgets: {},
 	hasPermissionsToManageWidgets: false,
 	showInserterHelpPanel: true,
-	resizableStylesheets: [
+	resizableStyleSheets: [
 		'block-library',
 		'editor-style',
 		'block-editor',
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index c5f4dfc2bb549..bb336ac4bbebb 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -23,7 +23,6 @@ import {
  */
 import { combineReducers } from '@wordpress/data';
 import { isReusableBlock } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -1457,9 +1456,9 @@ export function automaticChangeStatus( state, action ) {
  *
  * @return {Object} Updated state.
  */
-export function deviceType( state = __( 'Desktop' ), action ) {
+export function deviceType( state = 'Desktop', action ) {
 	switch ( action.type ) {
-		case 'TOGGLE_CANVAS_WIDTH':
+		case 'SET_PREVIEW_DEVICE_TYPE':
 			return action.deviceType;
 	}
 
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 43549d94f6a2d..b0823c13dba4a 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1600,6 +1600,6 @@ export function didAutomaticChange( state ) {
  *
  * @return {string} Device type.
  */
-export function deviceType( state ) {
+export function getDeviceType( state ) {
 	return state.deviceType;
 }
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 3bc11e46ab56b..4f489d1fec50b 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -10,22 +10,29 @@ import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
-	const resizableStylesheets = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings().resizableStylesheets;
+	const resizableStyleSheets = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getSettings().resizableStyleSheets;
 	}, [] );
 
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).deviceType();
-	} );
+		return select( 'core/block-editor' ).getDeviceType();
+	}, [] );
 
 	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
 
-	window.addEventListener( 'resize', () => updateActualWidth( window.innerWidth ) );
+	useEffect( () => {
+		const resizeListener = () => updateActualWidth( window.innerWidth );
+		window.addEventListener( 'resize', resizeListener );
 
-	const canvasWidth = ( device ) => {
+		return () => {
+			window.removeEventListener( 'resize', resizeListener );
+		};
+	} );
+
+	const getCanvasWidth = ( device ) => {
 		let deviceWidth = 0;
 
 		switch ( device ) {
@@ -44,24 +51,22 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 
 	const marginValue = () => window.innerHeight < 800 ? 36 : 72;
 
-	const maxHeightValue = ( device ) => device === 'Mobile' ? 768 : 1024;
-
 	const contentInlineStyles = ( device ) => {
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
-					width: canvasWidth( device ),
+					width: getCanvasWidth( device ),
 					margin: marginValue() + 'px auto',
 					flexGrow: 0,
-					maxHeight: maxHeightValue( device ) + 'px',
+					maxHeight: device === 'Mobile' ? '768px' : '1024px',
 				};
 			default:
 				return null;
 		}
 	};
 
-	useSimulatedMediaQuery( resizableStylesheets, canvasWidth( deviceType ) );
+	useSimulatedMediaQuery( resizableStyleSheets, getCanvasWidth( deviceType ) );
 
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 151ac2177cab9..9ec7f1dbc849f 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Dropdown, Icon, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
+import { Button, Dropdown, Icon, MenuGroup, MenuItemsChoice, Path, Polygon, SVG } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -105,13 +105,6 @@ const downArrow = (
 	</SVG>
 );
 
-const checkIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-		<Path fill="none" d="M0 0h24v24H0z" />
-		<Path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-	</SVG>
-);
-
 export class PostPreviewButton extends Component {
 	constructor() {
 		super( ...arguments );
@@ -187,8 +180,19 @@ export class PostPreviewButton extends Component {
 		writeInterstitialMessage( this.previewWindow.document );
 	}
 
+	translateDropdownButtonText() {
+		switch ( this.props.deviceType ) {
+			case 'Tablet':
+				return __( 'Tablet' );
+			case 'Mobile':
+				return __( 'Mobile' );
+			default:
+				return __( 'Desktop' );
+		}
+	}
+
 	render() {
-		const { previewLink, currentPostLink, isSaveable, toggleCanvas } = this.props;
+		const { previewLink, currentPostLink, isSaveable, setDeviceType } = this.props;
 
 		// Link to the `?preview=true` URL if we have it, since this lets us see
 		// changes that were autosaved since the post was last published. Otherwise,
@@ -205,37 +209,33 @@ export class PostPreviewButton extends Component {
 							className="editor-post-preview__button-toggle"
 							aria-expanded={ isOpen }
 						>
-							{ this.props.deviceType }
+							{ this.translateDropdownButtonText() }
 							<div className="editor-post-preview__button-separator">{ downArrow }</div>
 						</Button>
 					) }
 					renderContent={ () => (
 						<>
-							<MenuGroup>
-								<fieldset>
-									<legend className="editor-post-preview__legend">View</legend>
-									<MenuItem
-										className="editor-post-preview__button-resize"
-										onClick={ () => toggleCanvas( 'Desktop' ) }
-									>
-										{ __( 'Desktop' ) }
-										{ this.props.deviceType === 'Desktop' && checkIcon }
-									</MenuItem>
-									<MenuItem
-										className="editor-post-preview__button-resize"
-										onClick={ () => toggleCanvas( 'Tablet' ) }
-									>
-										{ __( 'Tablet' ) }
-										{ this.props.deviceType === 'Tablet' && checkIcon }
-									</MenuItem>
-									<MenuItem
-										className="editor-post-preview__button-resize"
-										onClick={ () => toggleCanvas( 'Mobile' ) }
-									>
-										{ __( 'Mobile' ) }
-										{ this.props.deviceType === 'Mobile' && checkIcon }
-									</MenuItem>
-								</fieldset>
+							<MenuGroup
+								label={ _x( 'View', 'noun' ) }
+							>
+								<MenuItemsChoice
+									choices={ [
+										{
+											value: 'Desktop',
+											label: __( 'Desktop' ),
+										},
+										{
+											value: 'Tablet',
+											label: __( 'Tablet' ),
+										},
+										{
+											value: 'Mobile',
+											label: __( 'Mobile' ),
+										},
+									] }
+									value={ this.props.deviceType }
+									onSelect={ ( value ) => setDeviceType( value ) }
+								/>
 							</MenuGroup>
 							<MenuGroup>
 								<Button
@@ -293,7 +293,7 @@ export default compose( [
 			getPostType,
 		} = select( 'core' );
 		const {
-			deviceType,
+			getDeviceType,
 		} = select( 'core/block-editor' );
 
 		const previewLink = getEditedPostPreviewLink();
@@ -308,17 +308,15 @@ export default compose( [
 			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
 			isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1,
-			deviceType: deviceType(),
+			deviceType: getDeviceType(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { toggleCanvasWidth } = dispatch( 'core/block-editor' );
+		// const { setPreviewDeviceType } = dispatch( 'core/block-editor' );
 		return {
 			autosave: dispatch( 'core/editor' ).autosave,
 			savePost: dispatch( 'core/editor' ).savePost,
-			toggleCanvas( deviceType ) {
-				dispatch( toggleCanvasWidth( deviceType ) );
-			},
+			setDeviceType: dispatch( 'core/block-editor' ).setPreviewDeviceType,
 		};
 	}
 	),
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 591c85c59ab17..e7e9a8094a365 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -19,7 +19,6 @@
 
 .editor-post-preview__legend {
 	padding: $grid-size $grid-size-large - 1;
-	text-transform: uppercase;
 	color: $dark-gray-200;
 }
 

From f56765e37dcc0dee5b5f30d8134dab812ac808b1 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 21 Jan 2020 16:34:34 +1100
Subject: [PATCH 18/38] Remove unused styles.

---
 .../src/components/post-preview-button/style.scss      | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index e7e9a8094a365..5d098a5215771 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -17,16 +17,6 @@
 	padding: $grid-size 0 $grid-size $grid-size;
 }
 
-.editor-post-preview__legend {
-	padding: $grid-size $grid-size-large - 1;
-	color: $dark-gray-200;
-}
-
-.editor-post-preview__button-resize {
-	display: flex;
-	justify-content: space-between;
-}
-
 .editor-post-preview__dropdown-content {
 	.components-popover__content {
 		overflow-y: visible;

From 93e6e45120efdeb427b9c0084605f41afbe1967a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 22 Jan 2020 13:50:44 +1100
Subject: [PATCH 19/38] Fix e2e tests.

---
 .../specs/editor/various/preview.test.js      | 12 +++---
 .../components/post-preview-button/index.js   | 43 +++++++++++--------
 .../components/post-preview-button/style.scss |  8 ++++
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/preview.test.js b/packages/e2e-tests/specs/editor/various/preview.test.js
index 324be3f9f2efb..dfccdad93fcd5 100644
--- a/packages/e2e-tests/specs/editor/various/preview.test.js
+++ b/packages/e2e-tests/specs/editor/various/preview.test.js
@@ -22,7 +22,9 @@ import {
 async function openPreviewPage( editorPage ) {
 	let openTabs = await browser.pages();
 	const expectedTabsCount = openTabs.length + 1;
-	await editorPage.click( '.editor-post-preview' );
+	await editorPage.click( '.editor-post-preview__button-toggle' );
+	await editorPage.waitFor( '.editor-post-preview__button-external' );
+	await editorPage.click( '.editor-post-preview__button-external' );
 
 	// Wait for the new tab to open.
 	while ( openTabs.length < expectedTabsCount ) {
@@ -47,7 +49,7 @@ async function openPreviewPage( editorPage ) {
  * @return {Promise} Promise resolving once navigation completes.
  */
 async function waitForPreviewNavigation( previewPage ) {
-	await page.click( '.editor-post-preview' );
+	await page.click( '.editor-post-preview__button-external' );
 	return previewPage.waitForNavigation();
 }
 
@@ -98,8 +100,8 @@ describe( 'Preview', () => {
 
 		// Disabled until content present.
 		const isPreviewDisabled = await editorPage.$$eval(
-			'.editor-post-preview:not( :disabled ):not( [aria-disabled="true"] )',
-			( enabledButtons ) => ! enabledButtons.length
+			'.editor-post-preview__button-toggle:not( :disabled ):not( [aria-disabled="true"] )',
+			( enabledButtons ) => ! enabledButtons.length,
 		);
 		expect( isPreviewDisabled ).toBe( true );
 
@@ -113,7 +115,7 @@ describe( 'Preview', () => {
 			await editorPage.waitForFunction( () => {
 				return window.location.search.match( /[\?&]post=(\d+)/ );
 			} )
-		 ).jsonValue();
+		).jsonValue();
 
 		const expectedPreviewURL = createURL(
 			'',
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 9ec7f1dbc849f..a33048fcb2bd9 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,7 +7,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Dropdown, Icon, MenuGroup, MenuItemsChoice, Path, Polygon, SVG } from '@wordpress/components';
+import { Button, Dropdown, Icon, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -204,10 +204,12 @@ export class PostPreviewButton extends Component {
 				<Dropdown
 					className="editor-post-preview__dropdown"
 					contentClassName="editor-post-preview__dropdown-content"
+					popoverProps={ { role: 'menu' } }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button onClick={ onToggle }
 							className="editor-post-preview__button-toggle"
 							aria-expanded={ isOpen }
+							disabled={ ! isSaveable }
 						>
 							{ this.translateDropdownButtonText() }
 							<div className="editor-post-preview__button-separator">{ downArrow }</div>
@@ -218,24 +220,27 @@ export class PostPreviewButton extends Component {
 							<MenuGroup
 								label={ _x( 'View', 'noun' ) }
 							>
-								<MenuItemsChoice
-									choices={ [
-										{
-											value: 'Desktop',
-											label: __( 'Desktop' ),
-										},
-										{
-											value: 'Tablet',
-											label: __( 'Tablet' ),
-										},
-										{
-											value: 'Mobile',
-											label: __( 'Mobile' ),
-										},
-									] }
-									value={ this.props.deviceType }
-									onSelect={ ( value ) => setDeviceType( value ) }
-								/>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => setDeviceType( 'Desktop' ) }
+									icon={ this.props.deviceType === 'Desktop' && 'yes' }
+								>
+									{ __( 'Desktop' ) }
+								</MenuItem>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => setDeviceType( 'Tablet' ) }
+									icon={ this.props.deviceType === 'Tablet' && 'yes' }
+								>
+									{ __( 'Tablet' ) }
+								</MenuItem>
+								<MenuItem
+									className="editor-post-preview__button-resize"
+									onClick={ () => setDeviceType( 'Mobile' ) }
+									icon={ this.props.deviceType === 'Mobile' && 'yes' }
+								>
+									{ __( 'Mobile' ) }
+								</MenuItem>
 							</MenuGroup>
 							<MenuGroup>
 								<Button
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 5d098a5215771..d5a9a601b62ec 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -11,6 +11,14 @@
 	justify-content: space-between;
 }
 
+.editor-post-preview__button-resize.editor-post-preview__button-resize {
+	padding-left: 28px;
+
+	&.has-icon {
+		padding-left: 0;
+	}
+}
+
 .editor-post-preview__button-separator {
 	border-left: 1px solid $light-gray-600;
 	height: $icon-button-size;

From 1e446e0da42c86e442d3170a25f9bbd22456fe71 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 23 Jan 2020 09:00:01 +1100
Subject: [PATCH 20/38] Remove non-existent stylesheet

---
 lib/client-assets.php                       | 1 -
 packages/block-editor/src/store/defaults.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 70f60d887f3c6..52766910029aa 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -689,7 +689,6 @@ function gutenberg_stylesheets_editor_settings( $settings ) {
 	$stylesheets_settings = array(
 		'resizableStyleSheets' => array(
 			'block-library',
-			'editor-style',
 			'block-editor',
 		),
 	);
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index b32fb22d0b950..31f717b15679b 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -151,7 +151,6 @@ export const SETTINGS_DEFAULTS = {
 	showInserterHelpPanel: true,
 	resizableStyleSheets: [
 		'block-library',
-		'editor-style',
 		'block-editor',
 	],
 	__experimentalCanUserUseUnfilteredHTML: false,

From 860670d2c815f5c1f3549ecaeee65bc53058b08f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 30 Jan 2020 12:37:04 +1100
Subject: [PATCH 21/38] Add support for parsing concatenated stylesheets

---
 lib/client-assets.php                                |  1 +
 .../src/components/simulate-media-query/index.js     | 12 +++++++++++-
 packages/block-editor/src/style.scss                 |  8 ++++++++
 packages/block-library/src/editor.scss               |  8 ++++++++
 packages/block-library/src/style.scss                |  8 ++++++++
 packages/block-library/src/theme.scss                |  8 ++++++++
 .../edit-post/src/components/editor-regions/index.js | 12 +++++++++---
 7 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 52766910029aa..a12c57bb064cb 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -690,6 +690,7 @@ function gutenberg_stylesheets_editor_settings( $settings ) {
 		'resizableStyleSheets' => array(
 			'block-library',
 			'block-editor',
+			'load-styles',
 		),
 	);
 
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index a1b90e6c85727..b0078f2286f4c 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -77,9 +77,19 @@ export default function useSimulatedMediaQuery( partialPaths, width ) {
 			const styleSheets = getStyleSheetsThatMatchPaths( partialPaths );
 			const originalStyles = [];
 			styleSheets.forEach( ( styleSheet, styleSheetIndex ) => {
+				let relevantSection = false;
 				for ( let ruleIndex = 0; ruleIndex < styleSheet.cssRules.length; ++ruleIndex ) {
 					const rule = styleSheet.cssRules[ ruleIndex ];
-					if ( ! isReplaceableMediaRule( rule ) ) {
+
+					if ( ! relevantSection && !! rule.cssText.match( /#start-resizable-editor-section/ ) ) {
+						relevantSection = true;
+					}
+
+					if ( relevantSection && !! rule.cssText.match( /#end-resizable-editor-section/ ) ) {
+						relevantSection = false;
+					}
+
+					if ( ! relevantSection || ! isReplaceableMediaRule( rule ) ) {
 						continue;
 					}
 					const ruleText = rule.cssText;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index d170399ed8af6..49640e13ecc66 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,3 +1,7 @@
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";
@@ -38,3 +42,7 @@
 @import "./components/warning/style.scss";
 @import "./components/writing-flow/style.scss";
 @import "./hooks/anchor.scss";
+
+#end-resizable-editor-section {
+	display: none;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 995297a269f86..4a77d1f1e8062 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,3 +1,7 @@
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./block/editor.scss";
@@ -57,3 +61,7 @@
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }
+
+#end-resizable-editor-section {
+	display: none;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 6a0547c9e2de9..3e6fe6f1796e4 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -1,3 +1,7 @@
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./audio/style.scss";
 @import "./button/style.scss";
 @import "./buttons/style.scss";
@@ -247,3 +251,7 @@
 	/*rtl:ignore*/
 	text-align: right;
 }
+
+#end-resizable-editor-section {
+	display: none;
+}
\ No newline at end of file
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index 9aedbc019a62b..e6c8d48ac3d04 100644
--- a/packages/block-library/src/theme.scss
+++ b/packages/block-library/src/theme.scss
@@ -1,3 +1,7 @@
+#start-resizable-editor-section {
+	display: none;
+}
+
 @import "./audio/theme.scss";
 @import "./code/theme.scss";
 @import "./embed/theme.scss";
@@ -11,3 +15,7 @@
 @import "./separator/theme.scss";
 @import "./table/theme.scss";
 @import "./video/theme.scss";
+
+#end-resizable-editor-section {
+	display: none;
+}
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 4f489d1fec50b..6fc27c023ca82 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -13,9 +13,15 @@ import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
-	const resizableStyleSheets = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings().resizableStyleSheets;
-	}, [] );
+	// const resizableStyleSheets = useSelect( ( select ) => {
+	// 	return select( 'core/block-editor' ).getSettings().resizableStyleSheets;
+	// }, [] );
+
+	const resizableStyleSheets = [
+		'block-library',
+		'block-editor',
+		'load-styles',
+	];
 
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getDeviceType();

From 4ecef11da7ebdb0b9f7db9ac2138637cea644c1a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 30 Jan 2020 12:39:25 +1100
Subject: [PATCH 22/38] Fix lint error.

---
 packages/block-library/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 3e6fe6f1796e4..8aa8b47b45c06 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -254,4 +254,4 @@
 
 #end-resizable-editor-section {
 	display: none;
-}
\ No newline at end of file
+}

From d23bac2249fa6ede5f4e03510dde658cf5caf005 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 30 Jan 2020 15:16:53 +1100
Subject: [PATCH 23/38] Address styling feedback

---
 .../src/components/post-preview-button/style.scss     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index d5a9a601b62ec..7011e52d64117 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -4,18 +4,23 @@
 	border: 1px solid $light-gray-600;
 }
 
-.editor-post-preview__button-toggle {
+.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle {
 	border-radius: 0;
 	min-width: 120px;
 	display: flex;
 	justify-content: space-between;
+
+	&:hover {
+		box-shadow: 0 0 0 1px $dark-gray-500, 0 0 0 2px $white;
+	}
+
 }
 
 .editor-post-preview__button-resize.editor-post-preview__button-resize {
-	padding-left: 28px;
+	padding-left: 36px;
 
 	&.has-icon {
-		padding-left: 0;
+		padding-left: $grid-size;
 	}
 }
 

From 9c42b2886d2a684de34408f8bb19d3dd3a6bceee Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 30 Jan 2020 15:20:42 +1100
Subject: [PATCH 24/38] Apply style change on focus.

---
 packages/editor/src/components/post-preview-button/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 7011e52d64117..8eb6c38cab6f1 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -10,7 +10,8 @@
 	display: flex;
 	justify-content: space-between;
 
-	&:hover {
+	&:hover,
+	&:focus {
 		box-shadow: 0 0 0 1px $dark-gray-500, 0 0 0 2px $white;
 	}
 

From 35440051a5fa9103bce04b6ebd9c7bae38cc844d Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Fri, 31 Jan 2020 09:59:06 +1100
Subject: [PATCH 25/38] Styling tweaks.

---
 .../editor/src/components/post-preview-button/style.scss     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/editor/src/components/post-preview-button/style.scss
index 8eb6c38cab6f1..68a8305cf2f06 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/editor/src/components/post-preview-button/style.scss
@@ -6,7 +6,6 @@
 
 .editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle {
 	border-radius: 0;
-	min-width: 120px;
 	display: flex;
 	justify-content: space-between;
 
@@ -29,12 +28,16 @@
 	border-left: 1px solid $light-gray-600;
 	height: $icon-button-size;
 	padding: $grid-size 0 $grid-size $grid-size;
+	margin-left: $grid-size;
 }
 
 .editor-post-preview__dropdown-content {
 	.components-popover__content {
 		overflow-y: visible;
 	}
+	.components-menu-group__label {
+		padding-left: 15px;
+	}
 	.components-menu-group + .components-menu-group {
 		border-top: 1px solid $light-gray-500;
 		padding: 0;

From a6668bedd370d219340ef43186bcdb0c91119a7c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 5 Feb 2020 15:50:02 +1100
Subject: [PATCH 26/38] Parse all stylesheets from same domain

---
 lib/client-assets.php                         | 19 -------------------
 packages/block-editor/README.md               |  1 -
 .../components/simulate-media-query/index.js  | 17 +++++------------
 packages/block-editor/src/store/defaults.js   |  5 -----
 .../src/components/editor-regions/index.js    | 12 +-----------
 5 files changed, 6 insertions(+), 48 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index a12c57bb064cb..51d0b301772ee 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -678,22 +678,3 @@ function gutenberg_extend_block_editor_preload_paths( $preload_paths, $post ) {
 }
 add_filter( 'block_editor_preload_paths', 'gutenberg_extend_block_editor_preload_paths', 10, 2 );
 
-/**
- * Extends default editor settings with editing canvas stylesheets.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_stylesheets_editor_settings( $settings ) {
-	$stylesheets_settings = array(
-		'resizableStyleSheets' => array(
-			'block-library',
-			'block-editor',
-			'load-styles',
-		),
-	);
-
-	return array_merge( $settings, $stylesheets_settings );
-}
-add_filter( 'block_editor_settings', 'gutenberg_stylesheets_editor_settings' );
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index e0b9228f3294f..184e9aca0e721 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -414,7 +414,6 @@ _Properties_
 -   _titlePlaceholder_ `string`: Empty title placeholder
 -   _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
 -   _showInserterHelpPanel_ `boolean`: Whether or not the inserter help panel is shown
--   _resizableStyleSheets_ `Array`: Stylesheets manipulated during editing canvas resizing
 -   _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
 -   _\_\_experimentalEnableLegacyWidgetBlock_ `boolean`: Whether the user has enabled the Legacy Widget Block
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index b0078f2286f4c..f111dc0dcfc98 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -4,7 +4,6 @@
 import {
 	filter,
 	get,
-	some,
 } from 'lodash';
 import { match } from 'css-mediaquery';
 
@@ -18,18 +17,12 @@ const DISABLED_MEDIA_QUERY = '(min-width:999999px)';
 
 const VALID_MEDIA_QUERY_REGEX = /\((min|max)-width:[^\(]*?\)/g;
 
-function getStyleSheetsThatMatchPaths( partialPaths ) {
+function getStyleSheetsThatMatchHostname() {
 	return filter(
 		get( window, [ 'document', 'styleSheets' ], [] ),
 		( styleSheet ) => {
 			return (
-				styleSheet.href &&
-				some(
-					partialPaths,
-					( partialPath ) => {
-						return styleSheet.href.includes( partialPath );
-					}
-				)
+				styleSheet.href && styleSheet.href.includes( window.location.hostname )
 			);
 		}
 	);
@@ -71,10 +64,10 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
  * @param {Array} partialPaths Paths of stylesheets to manipulate.
  * @param {number} width Viewport width to simulate.
  */
-export default function useSimulatedMediaQuery( partialPaths, width ) {
+export default function useSimulatedMediaQuery( width ) {
 	useEffect(
 		() => {
-			const styleSheets = getStyleSheetsThatMatchPaths( partialPaths );
+			const styleSheets = getStyleSheetsThatMatchHostname( );
 			const originalStyles = [];
 			styleSheets.forEach( ( styleSheet, styleSheetIndex ) => {
 				let relevantSection = false;
@@ -118,7 +111,7 @@ export default function useSimulatedMediaQuery( partialPaths, width ) {
 				} );
 			};
 		},
-		[ partialPaths, width ]
+		[ width ]
 	);
 }
 
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index 31f717b15679b..a0ab78569c508 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -29,7 +29,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {string} titlePlaceholder Empty title placeholder
  * @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor
  * @property {boolean} showInserterHelpPanel Whether or not the inserter help panel is shown
- * @property {Array} resizableStyleSheets Stylesheets manipulated during editing canvas resizing
  * @property {boolean} __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
  * @property {boolean} __experimentalEnableLegacyWidgetBlock Whether the user has enabled the Legacy Widget Block
  * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
@@ -149,10 +148,6 @@ export const SETTINGS_DEFAULTS = {
 	availableLegacyWidgets: {},
 	hasPermissionsToManageWidgets: false,
 	showInserterHelpPanel: true,
-	resizableStyleSheets: [
-		'block-library',
-		'block-editor',
-	],
 	__experimentalCanUserUseUnfilteredHTML: false,
 	__experimentalEnableLegacyWidgetBlock: false,
 	__experimentalBlockDirectory: false,
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 6fc27c023ca82..3ff686c6a50c3 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -13,16 +13,6 @@ import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
-	// const resizableStyleSheets = useSelect( ( select ) => {
-	// 	return select( 'core/block-editor' ).getSettings().resizableStyleSheets;
-	// }, [] );
-
-	const resizableStyleSheets = [
-		'block-library',
-		'block-editor',
-		'load-styles',
-	];
-
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getDeviceType();
 	}, [] );
@@ -72,7 +62,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 		}
 	};
 
-	useSimulatedMediaQuery( resizableStyleSheets, getCanvasWidth( deviceType ) );
+	useSimulatedMediaQuery( getCanvasWidth( deviceType ) );
 
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>

From 51e578bc0ad3d12a211c94d815283109894c8371 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 5 Feb 2020 15:52:42 +1100
Subject: [PATCH 27/38] lint

---
 .../components/simulate-media-query/index.js  | 119 ++++++++++--------
 .../src/components/editor-regions/index.js    |  11 +-
 2 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index f111dc0dcfc98..1475adcfc2734 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -1,10 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	filter,
-	get,
-} from 'lodash';
+import { filter, get } from 'lodash';
 import { match } from 'css-mediaquery';
 
 /**
@@ -22,7 +19,8 @@ function getStyleSheetsThatMatchHostname() {
 		get( window, [ 'document', 'styleSheets' ], [] ),
 		( styleSheet ) => {
 			return (
-				styleSheet.href && styleSheet.href.includes( window.location.hostname )
+				styleSheet.href &&
+				styleSheet.href.includes( window.location.hostname )
 			);
 		}
 	);
@@ -44,13 +42,10 @@ function replaceRule( styleSheet, newRuleText, index ) {
 function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
 	return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( matchedSubstring ) => {
 		if (
-			match(
-				matchedSubstring,
-				{
-					type: 'screen',
-					width: widthValue,
-				}
-			)
+			match( matchedSubstring, {
+				type: 'screen',
+				width: widthValue,
+			} )
 		) {
 			return ENABLED_MEDIA_QUERY;
 		}
@@ -65,53 +60,67 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
  * @param {number} width Viewport width to simulate.
  */
 export default function useSimulatedMediaQuery( 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 ];
+	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( /#start-resizable-editor-section/ ) ) {
-						relevantSection = true;
-					}
+				if (
+					! relevantSection &&
+					!! rule.cssText.match( /#start-resizable-editor-section/ )
+				) {
+					relevantSection = true;
+				}
 
-					if ( relevantSection && !! rule.cssText.match( /#end-resizable-editor-section/ ) ) {
-						relevantSection = false;
-					}
+				if (
+					relevantSection &&
+					!! rule.cssText.match( /#end-resizable-editor-section/ )
+				) {
+					relevantSection = false;
+				}
 
-					if ( ! relevantSection || ! isReplaceableMediaRule( rule ) ) {
-						continue;
-					}
-					const ruleText = rule.cssText;
-					if ( ! originalStyles[ styleSheetIndex ] ) {
-						originalStyles[ styleSheetIndex ] = [];
+				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
+						);
 					}
-					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 ]
-	);
+		};
+	}, [ width ] );
 }
-
diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index 3ff686c6a50c3..ecc3bb91c304e 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -12,7 +12,14 @@ import { useSimulatedMediaQuery } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
-function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
+function EditorRegions( {
+	footer,
+	header,
+	sidebar,
+	content,
+	publish,
+	className,
+} ) {
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getDeviceType();
 	}, [] );
@@ -45,7 +52,7 @@ function EditorRegions( { footer, header, sidebar, content, publish, className }
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => window.innerHeight < 800 ? 36 : 72;
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
 
 	const contentInlineStyles = ( device ) => {
 		switch ( device ) {

From c28e1e6834b25ced5392aa9f6a6542166ff73ce5 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 6 Feb 2020 11:20:14 +1100
Subject: [PATCH 28/38] Lint.

---
 .../specs/editor/various/preview.test.js      |  4 +-
 .../components/post-preview-button/index.js   | 79 ++++++++++++-------
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/preview.test.js b/packages/e2e-tests/specs/editor/various/preview.test.js
index dfccdad93fcd5..3a495a1189dfd 100644
--- a/packages/e2e-tests/specs/editor/various/preview.test.js
+++ b/packages/e2e-tests/specs/editor/various/preview.test.js
@@ -101,7 +101,7 @@ describe( 'Preview', () => {
 		// Disabled until content present.
 		const isPreviewDisabled = await editorPage.$$eval(
 			'.editor-post-preview__button-toggle:not( :disabled ):not( [aria-disabled="true"] )',
-			( enabledButtons ) => ! enabledButtons.length,
+			( enabledButtons ) => ! enabledButtons.length
 		);
 		expect( isPreviewDisabled ).toBe( true );
 
@@ -115,7 +115,7 @@ describe( 'Preview', () => {
 			await editorPage.waitForFunction( () => {
 				return window.location.search.match( /[\?&]post=(\d+)/ );
 			} )
-		).jsonValue();
+		 ).jsonValue();
 
 		const expectedPreviewURL = createURL(
 			'',
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index a33048fcb2bd9..6415c3c7025c9 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -7,7 +7,16 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import { Button, Dropdown, Icon, MenuGroup, MenuItem, Path, Polygon, SVG } from '@wordpress/components';
+import {
+	Button,
+	Dropdown,
+	Icon,
+	MenuGroup,
+	MenuItem,
+	Path,
+	Polygon,
+	SVG,
+} from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -100,7 +109,12 @@ function writeInterstitialMessage( targetDocument ) {
 }
 
 const downArrow = (
-	<SVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+	<SVG
+		width="18"
+		height="18"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 18 18"
+	>
 		<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
 	</SVG>
 );
@@ -192,7 +206,12 @@ export class PostPreviewButton extends Component {
 	}
 
 	render() {
-		const { previewLink, currentPostLink, isSaveable, setDeviceType } = this.props;
+		const {
+			previewLink,
+			currentPostLink,
+			isSaveable,
+			setDeviceType,
+		} = this.props;
 
 		// Link to the `?preview=true` URL if we have it, since this lets us see
 		// changes that were autosaved since the post was last published. Otherwise,
@@ -206,38 +225,48 @@ export class PostPreviewButton extends Component {
 					contentClassName="editor-post-preview__dropdown-content"
 					popoverProps={ { role: 'menu' } }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button onClick={ onToggle }
+						<Button
+							onClick={ onToggle }
 							className="editor-post-preview__button-toggle"
 							aria-expanded={ isOpen }
 							disabled={ ! isSaveable }
 						>
 							{ this.translateDropdownButtonText() }
-							<div className="editor-post-preview__button-separator">{ downArrow }</div>
+							<div className="editor-post-preview__button-separator">
+								{ downArrow }
+							</div>
 						</Button>
 					) }
 					renderContent={ () => (
 						<>
-							<MenuGroup
-								label={ _x( 'View', 'noun' ) }
-							>
+							<MenuGroup label={ _x( 'View', 'noun' ) }>
 								<MenuItem
 									className="editor-post-preview__button-resize"
 									onClick={ () => setDeviceType( 'Desktop' ) }
-									icon={ this.props.deviceType === 'Desktop' && 'yes' }
+									icon={
+										this.props.deviceType === 'Desktop' &&
+										'yes'
+									}
 								>
 									{ __( 'Desktop' ) }
 								</MenuItem>
 								<MenuItem
 									className="editor-post-preview__button-resize"
 									onClick={ () => setDeviceType( 'Tablet' ) }
-									icon={ this.props.deviceType === 'Tablet' && 'yes' }
+									icon={
+										this.props.deviceType === 'Tablet' &&
+										'yes'
+									}
 								>
 									{ __( 'Tablet' ) }
 								</MenuItem>
 								<MenuItem
 									className="editor-post-preview__button-resize"
 									onClick={ () => setDeviceType( 'Mobile' ) }
-									icon={ this.props.deviceType === 'Mobile' && 'yes' }
+									icon={
+										this.props.deviceType === 'Mobile' &&
+										'yes'
+									}
 								>
 									{ __( 'Mobile' ) }
 								</MenuItem>
@@ -252,10 +281,8 @@ export class PostPreviewButton extends Component {
 								>
 									{ __( 'Preview externally' ) }
 									<span className="screen-reader-text">
-										{
-										/* translators: accessibility text */
-											__( '(opens in a new tab)' )
-										}
+										{ /* translators: accessibility text */
+										__( '(opens in a new tab)' ) }
 									</span>
 									<Icon icon="external" />
 								</Button>
@@ -273,10 +300,8 @@ export class PostPreviewButton extends Component {
 				>
 					{ _x( 'Preview', 'imperative verb' ) }
 					<span className="screen-reader-text">
-						{
-						/* translators: accessibility text */
-							__( '(opens in a new tab)' )
-						}
+						{ /* translators: accessibility text */
+						__( '(opens in a new tab)' ) }
 					</span>
 				</Button>
 			</>
@@ -294,12 +319,8 @@ export default compose( [
 			isEditedPostAutosaveable,
 			getEditedPostPreviewLink,
 		} = select( 'core/editor' );
-		const {
-			getPostType,
-		} = select( 'core' );
-		const {
-			getDeviceType,
-		} = select( 'core/block-editor' );
+		const { getPostType } = select( 'core' );
+		const { getDeviceType } = select( 'core/block-editor' );
 
 		const previewLink = getEditedPostPreviewLink();
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
@@ -312,7 +333,10 @@ export default compose( [
 			isSaveable: isEditedPostSaveable(),
 			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
-			isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1,
+			isDraft:
+				[ 'draft', 'auto-draft' ].indexOf(
+					getEditedPostAttribute( 'status' )
+				) !== -1,
 			deviceType: getDeviceType(),
 		};
 	} ),
@@ -323,7 +347,6 @@ export default compose( [
 			savePost: dispatch( 'core/editor' ).savePost,
 			setDeviceType: dispatch( 'core/block-editor' ).setPreviewDeviceType,
 		};
-	}
-	),
+	} ),
 	ifCondition( ( { isViewable } ) => isViewable ),
 ] )( PostPreviewButton );

From 231a89f15db4b939fa885e46b9fbe40d652674b4 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 10 Feb 2020 10:36:40 +1100
Subject: [PATCH 29/38] Move canvas resizing to visual editor

---
 .../src/components/editor-regions/index.js    | 55 ----------------
 .../src/components/editor-regions/style.scss  |  4 +-
 .../src/components/resize-canvas/index.js     | 66 +++++++++++++++++++
 .../src/components/visual-editor/index.js     |  5 +-
 .../src/components/visual-editor/style.scss   |  2 +
 5 files changed, 73 insertions(+), 59 deletions(-)
 create mode 100644 packages/edit-post/src/components/resize-canvas/index.js

diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/edit-post/src/components/editor-regions/index.js
index ecc3bb91c304e..eee9dfcfdae9d 100644
--- a/packages/edit-post/src/components/editor-regions/index.js
+++ b/packages/edit-post/src/components/editor-regions/index.js
@@ -8,9 +8,6 @@ import classnames from 'classnames';
  */
 import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSimulatedMediaQuery } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
 
 function EditorRegions( {
 	footer,
@@ -20,57 +17,6 @@ function EditorRegions( {
 	publish,
 	className,
 } ) {
-	const deviceType = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getDeviceType();
-	}, [] );
-
-	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
-
-	useEffect( () => {
-		const resizeListener = () => updateActualWidth( window.innerWidth );
-		window.addEventListener( 'resize', resizeListener );
-
-		return () => {
-			window.removeEventListener( 'resize', resizeListener );
-		};
-	} );
-
-	const getCanvasWidth = ( device ) => {
-		let deviceWidth = 0;
-
-		switch ( device ) {
-			case 'Tablet':
-				deviceWidth = 780;
-				break;
-			case 'Mobile':
-				deviceWidth = 360;
-				break;
-			default:
-				deviceWidth = 2000;
-		}
-
-		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
-	};
-
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
-
-	const contentInlineStyles = ( device ) => {
-		switch ( device ) {
-			case 'Tablet':
-			case 'Mobile':
-				return {
-					width: getCanvasWidth( device ),
-					margin: marginValue() + 'px auto',
-					flexGrow: 0,
-					maxHeight: device === 'Mobile' ? '768px' : '1024px',
-				};
-			default:
-				return null;
-		}
-	};
-
-	useSimulatedMediaQuery( getCanvasWidth( deviceType ) );
-
 	return (
 		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
 			{ !! header && (
@@ -91,7 +37,6 @@ function EditorRegions( {
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
 					tabIndex="-1"
-					style={ contentInlineStyles( deviceType ) }
 				>
 					{ content }
 				</div>
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
index 293fec13d13b0..c9dd9fb593306 100644
--- a/packages/edit-post/src/components/editor-regions/style.scss
+++ b/packages/edit-post/src/components/editor-regions/style.scss
@@ -38,7 +38,6 @@ html {
 .edit-post-editor-regions__body {
 	flex-grow: 1;
 	display: flex;
-	background-color: $light-gray-700;
 
 	// Even on Mobile, we choose to scroll this element on its own.
 	// This helps enable a fixed-to-top toolbar that makes the editing experience
@@ -60,8 +59,7 @@ html {
 
 .edit-post-editor-regions__content {
 	flex-grow: 1;
-	// Default background color so that grey .edit-post-editor-regions__body color doesn't show through.
-	background-color: #fff;
+	background-color: $light-gray-700;
 
 	// Treat as flex container to allow children to grow to occupy full
 	// available height of the content area.
diff --git a/packages/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js
new file mode 100644
index 0000000000000..f1179f6f7d6de
--- /dev/null
+++ b/packages/edit-post/src/components/resize-canvas/index.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSimulatedMediaQuery } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Function to resize the editor window.
+ *
+ */
+
+export function useResizeCanvas() {
+	const deviceType = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getDeviceType();
+	}, [] );
+
+	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
+
+	useEffect( () => {
+		const resizeListener = () => updateActualWidth( window.innerWidth );
+		window.addEventListener( 'resize', resizeListener );
+
+		return () => {
+			window.removeEventListener( 'resize', resizeListener );
+		};
+	} );
+
+	const getCanvasWidth = ( device ) => {
+		let deviceWidth = 0;
+
+		switch ( device ) {
+			case 'Tablet':
+				deviceWidth = 780;
+				break;
+			case 'Mobile':
+				deviceWidth = 360;
+				break;
+			default:
+				deviceWidth = 2000;
+		}
+
+		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
+	};
+
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+
+	const contentInlineStyles = ( device ) => {
+		switch ( device ) {
+			case 'Tablet':
+			case 'Mobile':
+				return {
+					width: getCanvasWidth( device ),
+					margin: marginValue() + 'px auto',
+					flexGrow: 0,
+					maxHeight: device === 'Mobile' ? '768px' : '1024px',
+				};
+			default:
+				return null;
+		}
+	};
+
+	useSimulatedMediaQuery( 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 94ae067d7296e..14c2b343f2883 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -23,10 +23,13 @@ import { Popover } from '@wordpress/components';
  */
 import BlockInspectorButton from './block-inspector-button';
 import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-settings-menu-group';
+import { useResizeCanvas } from '../resize-canvas';
 
 function VisualEditor() {
+	const inlineStyles = useResizeCanvas();
+
 	return (
-		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
+		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper" style={ inlineStyles }>
 			<VisualEditorGlobalKeyboardShortcuts />
 			<MultiSelectScrollIntoView />
 			<Popover.Slot name="block-toolbar" />
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 7dd1f86dab879..fb94b8254e1df 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -1,6 +1,8 @@
 .edit-post-visual-editor {
 	position: relative;
 	padding-top: 50px;
+	// Default background color so that grey .edit-post-editor-regions__content color doesn't show through.
+	background-color: #fff;
 
 	& .components-button {
 		font-family: $default-font;

From 718f24623e3a1260cb5cbe17c1d59bc40c01445f Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 10 Feb 2020 10:40:42 +1100
Subject: [PATCH 30/38] Lint and style fixes

---
 packages/edit-post/src/components/text-editor/style.scss | 2 ++
 packages/edit-post/src/components/visual-editor/index.js | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index c07d5f63890c4..9c6e68037eda2 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -1,6 +1,8 @@
 .edit-post-text-editor {
 	position: relative;
 	width: 100%;
+	background-color: #fff;
+	flex-grow: 1;
 
 	// Always show outlines in code editor
 	.editor-post-title__block {
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 14c2b343f2883..89abc5b026f17 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -29,7 +29,10 @@ function VisualEditor() {
 	const inlineStyles = useResizeCanvas();
 
 	return (
-		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper" style={ inlineStyles }>
+		<BlockSelectionClearer
+			className="edit-post-visual-editor editor-styles-wrapper"
+			style={ inlineStyles }
+		>
 			<VisualEditorGlobalKeyboardShortcuts />
 			<MultiSelectScrollIntoView />
 			<Popover.Slot name="block-toolbar" />

From 7d2bf129410471a7c7023df55d5461ec97b4088a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 10 Feb 2020 16:39:30 +1100
Subject: [PATCH 31/38] Make preview dropdown edit-post component.

---
 packages/block-editor/src/style.scss          |   7 +-
 .../edit-post/src/components/header/index.js  |   5 +
 .../src/components/preview-options/index.js   | 113 ++++++++++++
 .../components/preview-options}/style.scss    |   6 +-
 packages/edit-post/src/style.scss             |   1 +
 .../components/post-preview-button/index.js   | 164 ++++--------------
 .../post-preview-button/test/index.js         |  14 +-
 packages/editor/src/style.scss                |   1 -
 8 files changed, 165 insertions(+), 146 deletions(-)
 create mode 100644 packages/edit-post/src/components/preview-options/index.js
 rename packages/{editor/src/components/post-preview-button => edit-post/src/components/preview-options}/style.scss (96%)

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 29c41ca896cce..6906a433a67db 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -2,6 +2,8 @@
 	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";
@@ -23,7 +25,6 @@
 @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";
@@ -47,3 +48,7 @@
 #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";
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index a18f5a207c114..bddd1014dac64 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PinnedPlugins from './pinned-plugins';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
+import PreviewOptions from '../preview-options';
 
 function Header() {
 	const {
@@ -69,6 +70,10 @@ function Header() {
 						forceIsSaving={ isSaving }
 					/>
 				) }
+				<PreviewOptions
+					forceIsAutosaveable={ hasActiveMetaboxes }
+					forcePreviewLink={ isSaving ? null : undefined }
+				/>
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }
 					forcePreviewLink={ isSaving ? null : undefined }
diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js
new file mode 100644
index 0000000000000..b5a54f8a79a53
--- /dev/null
+++ b/packages/edit-post/src/components/preview-options/index.js
@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Dropdown,
+	Icon,
+	MenuGroup,
+	MenuItem,
+	Polygon,
+	SVG,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { PostPreviewButton } from '@wordpress/editor';
+import { __, _x } from '@wordpress/i18n';
+
+const downArrow = (
+	<SVG
+		width="18"
+		height="18"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 18 18"
+	>
+		<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
+	</SVG>
+);
+
+export default function PreviewOptions( {
+	forceIsAutosaveable,
+	forcePreviewLink,
+} ) {
+	const { setPreviewDeviceType } = useDispatch( 'core/block-editor' );
+
+	const deviceType = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getDeviceType();
+	}, [] );
+
+	const translateDropdownButtonText = () => {
+		switch ( deviceType ) {
+			case 'Tablet':
+				return __( 'Tablet' );
+			case 'Mobile':
+				return __( 'Mobile' );
+			default:
+				return __( 'Desktop' );
+		}
+	};
+
+	const isSaveable = useSelect( ( select ) => {
+		return select( 'core/editor' ).isEditedPostSaveable();
+	}, [] );
+
+	return (
+		<Dropdown
+			className="editor-post-preview__dropdown"
+			contentClassName="editor-post-preview__dropdown-content"
+			popoverProps={ { role: 'menu' } }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					className="editor-post-preview__button-toggle"
+					aria-expanded={ isOpen }
+					disabled={ ! isSaveable }
+				>
+					{ translateDropdownButtonText() }
+					<div className="editor-post-preview__button-separator">
+						{ downArrow }
+					</div>
+				</Button>
+			) }
+			renderContent={ () => (
+				<>
+					<MenuGroup label={ _x( 'View', 'noun' ) }>
+						<MenuItem
+							className="editor-post-preview__button-resize"
+							onClick={ () => setPreviewDeviceType( 'Desktop' ) }
+							icon={ deviceType === 'Desktop' && 'yes' }
+						>
+							{ __( 'Desktop' ) }
+						</MenuItem>
+						<MenuItem
+							className="editor-post-preview__button-resize"
+							onClick={ () => setPreviewDeviceType( 'Tablet' ) }
+							icon={ deviceType === 'Tablet' && 'yes' }
+						>
+							{ __( 'Tablet' ) }
+						</MenuItem>
+						<MenuItem
+							className="editor-post-preview__button-resize"
+							onClick={ () => setPreviewDeviceType( 'Mobile' ) }
+							icon={ deviceType === 'Mobile' && 'yes' }
+						>
+							{ __( 'Mobile' ) }
+						</MenuItem>
+					</MenuGroup>
+					<MenuGroup>
+						<div className="editor-post-preview__grouping-external">
+							<PostPreviewButton
+								className={
+									'editor-post-preview__button-external'
+								}
+								forceIsAutosaveable={ forceIsAutosaveable }
+								forcePreviewLink={ forcePreviewLink }
+								textContent={ __( 'Preview externally' ) }
+							/>
+							<Icon icon="external" />
+						</div>
+					</MenuGroup>
+				</>
+			) }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/post-preview-button/style.scss b/packages/edit-post/src/components/preview-options/style.scss
similarity index 96%
rename from packages/editor/src/components/post-preview-button/style.scss
rename to packages/edit-post/src/components/preview-options/style.scss
index 68a8305cf2f06..e5d2090543438 100644
--- a/packages/editor/src/components/post-preview-button/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -44,10 +44,14 @@
 	}
 }
 
-.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external {
+.editor-post-preview__grouping-external {
 	display: flex;
 	justify-content: space-between;
 	padding: $grid-size-large - 1;
+}
+
+.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external {
+	padding: 0;
 	height: auto;
 
 	&:focus {
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index babb793d4ac51..d51842e02a78b 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -10,6 +10,7 @@ $footer-height: $icon-button-size-small;
 @import "./components/layout/style.scss";
 @import "./components/manage-blocks-modal/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
+@import "./components/preview-options/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
 @import "./components/sidebar/post-author/style.scss";
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 6415c3c7025c9..ab04c3c5fa5bb 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -2,21 +2,13 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Component, renderToString } from '@wordpress/element';
-import {
-	Button,
-	Dropdown,
-	Icon,
-	MenuGroup,
-	MenuItem,
-	Path,
-	Polygon,
-	SVG,
-} from '@wordpress/components';
+import { Button, Path, SVG } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -108,17 +100,6 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
-const downArrow = (
-	<SVG
-		width="18"
-		height="18"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 18 18"
-	>
-		<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
-	</SVG>
-);
-
 export class PostPreviewButton extends Component {
 	constructor() {
 		super( ...arguments );
@@ -194,117 +175,38 @@ export class PostPreviewButton extends Component {
 		writeInterstitialMessage( this.previewWindow.document );
 	}
 
-	translateDropdownButtonText() {
-		switch ( this.props.deviceType ) {
-			case 'Tablet':
-				return __( 'Tablet' );
-			case 'Mobile':
-				return __( 'Mobile' );
-			default:
-				return __( 'Desktop' );
-		}
-	}
-
 	render() {
-		const {
-			previewLink,
-			currentPostLink,
-			isSaveable,
-			setDeviceType,
-		} = this.props;
+		const { previewLink, currentPostLink, isSaveable } = this.props;
 
 		// Link to the `?preview=true` URL if we have it, since this lets us see
 		// changes that were autosaved since the post was last published. Otherwise,
 		// just link to the post's URL.
 		const href = previewLink || currentPostLink;
 
+		const classNames = classnames(
+			{
+				'editor-post-preview': ! this.props.className,
+			},
+			this.props.className
+		);
+
 		return (
-			<>
-				<Dropdown
-					className="editor-post-preview__dropdown"
-					contentClassName="editor-post-preview__dropdown-content"
-					popoverProps={ { role: 'menu' } }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							onClick={ onToggle }
-							className="editor-post-preview__button-toggle"
-							aria-expanded={ isOpen }
-							disabled={ ! isSaveable }
-						>
-							{ this.translateDropdownButtonText() }
-							<div className="editor-post-preview__button-separator">
-								{ downArrow }
-							</div>
-						</Button>
-					) }
-					renderContent={ () => (
-						<>
-							<MenuGroup label={ _x( 'View', 'noun' ) }>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => setDeviceType( 'Desktop' ) }
-									icon={
-										this.props.deviceType === 'Desktop' &&
-										'yes'
-									}
-								>
-									{ __( 'Desktop' ) }
-								</MenuItem>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => setDeviceType( 'Tablet' ) }
-									icon={
-										this.props.deviceType === 'Tablet' &&
-										'yes'
-									}
-								>
-									{ __( 'Tablet' ) }
-								</MenuItem>
-								<MenuItem
-									className="editor-post-preview__button-resize"
-									onClick={ () => setDeviceType( 'Mobile' ) }
-									icon={
-										this.props.deviceType === 'Mobile' &&
-										'yes'
-									}
-								>
-									{ __( 'Mobile' ) }
-								</MenuItem>
-							</MenuGroup>
-							<MenuGroup>
-								<Button
-									className="editor-post-preview__button-external"
-									href={ href }
-									target={ this.getWindowTarget() }
-									disabled={ ! isSaveable }
-									onClick={ this.openPreviewWindow }
-								>
-									{ __( 'Preview externally' ) }
-									<span className="screen-reader-text">
-										{ /* translators: accessibility text */
-										__( '(opens in a new tab)' ) }
-									</span>
-									<Icon icon="external" />
-								</Button>
-							</MenuGroup>
-						</>
-					) }
-				/>
-				<Button
-					isSecondary
-					className="editor-post-preview"
-					href={ href }
-					target={ this.getWindowTarget() }
-					disabled={ ! isSaveable }
-					onClick={ this.openPreviewWindow }
-				>
-					{ _x( 'Preview', 'imperative verb' ) }
-					<span className="screen-reader-text">
-						{ /* translators: accessibility text */
-						__( '(opens in a new tab)' ) }
-					</span>
-				</Button>
-			</>
+			<Button
+				isSecondary={ ! this.props.className }
+				className={ classNames }
+				href={ href }
+				target={ this.getWindowTarget() }
+				disabled={ ! isSaveable }
+				onClick={ this.openPreviewWindow }
+			>
+				{ this.props.textContent
+					? this.props.textContent
+					: _x( 'Preview', 'imperative verb' ) }
+				<span className="screen-reader-text">
+					{ /* translators: accessibility text */
+					__( '(opens in a new tab)' ) }
+				</span>
+			</Button>
 		);
 	}
 }
@@ -320,7 +222,6 @@ export default compose( [
 			getEditedPostPreviewLink,
 		} = select( 'core/editor' );
 		const { getPostType } = select( 'core' );
-		const { getDeviceType } = select( 'core/block-editor' );
 
 		const previewLink = getEditedPostPreviewLink();
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
@@ -337,16 +238,11 @@ export default compose( [
 				[ 'draft', 'auto-draft' ].indexOf(
 					getEditedPostAttribute( 'status' )
 				) !== -1,
-			deviceType: getDeviceType(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		// const { setPreviewDeviceType } = dispatch( 'core/block-editor' );
-		return {
-			autosave: dispatch( 'core/editor' ).autosave,
-			savePost: dispatch( 'core/editor' ).savePost,
-			setDeviceType: dispatch( 'core/block-editor' ).setPreviewDeviceType,
 		};
 	} ),
+	withDispatch( ( dispatch ) => ( {
+		autosave: dispatch( 'core/editor' ).autosave,
+		savePost: dispatch( 'core/editor' ).savePost,
+	} ) ),
 	ifCondition( ( { isViewable } ) => isViewable ),
 ] )( PostPreviewButton );
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index a0925d881679d..674957e0d330f 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -98,9 +98,7 @@ describe( 'PostPreviewButton', () => {
 				<PostPreviewButton postId={ 1 } autosave={ autosave } />
 			);
 
-			const previewButton = wrapper.find( '.editor-post-preview' );
-
-			previewButton.simulate( 'click', {
+			wrapper.simulate( 'click', {
 				preventDefault,
 				target: { href: 'https://wordpress.org/?p=1' },
 			} );
@@ -134,9 +132,7 @@ describe( 'PostPreviewButton', () => {
 				/>
 			);
 
-			const previewButton = wrapper.find( '.editor-post-preview' );
-
-			previewButton.simulate( 'click', { preventDefault } );
+			wrapper.simulate( 'click', { preventDefault } );
 
 			expect( preventDefault ).toHaveBeenCalled();
 			expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
@@ -161,7 +157,7 @@ describe( 'PostPreviewButton', () => {
 					previewLink="https://wordpress.org/?p=1&preview=true"
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			).find( '.editor-post-preview' );
+			);
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
@@ -173,7 +169,7 @@ describe( 'PostPreviewButton', () => {
 					isSaveable
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			).find( '.editor-post-preview' );
+			);
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
@@ -184,7 +180,7 @@ describe( 'PostPreviewButton', () => {
 					postId={ 1 }
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			).find( '.editor-post-preview' );
+			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 6deaae90dd8d4..83a75edd9013a 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -10,7 +10,6 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-permalink/style.scss";
-@import "./components/post-preview-button/style.scss";
 @import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";

From 50370fc2ed959e09e0a7dc5fe5df28b443ae0332 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Mon, 10 Feb 2020 18:03:01 +1100
Subject: [PATCH 32/38] Styling adjustments.

---
 packages/block-editor/src/style.scss                     | 2 +-
 packages/edit-post/src/components/resize-canvas/index.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 6906a433a67db..c54f4111564ee 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -28,7 +28,6 @@
 @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";
@@ -52,3 +51,4 @@
 // Styles for components that are used outside of the editing canvas go here.
 
 @import "./components/editor-skeleton/style.scss";
+@import "./components/inserter/style.scss";
diff --git a/packages/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js
index f1179f6f7d6de..a86bab7df5604 100644
--- a/packages/edit-post/src/components/resize-canvas/index.js
+++ b/packages/edit-post/src/components/resize-canvas/index.js
@@ -54,6 +54,7 @@ export function useResizeCanvas() {
 					margin: marginValue() + 'px auto',
 					flexGrow: 0,
 					maxHeight: device === 'Mobile' ? '768px' : '1024px',
+					overflowY: 'auto',
 				};
 			default:
 				return null;

From 61471d0d437a6152d79540f83c068889bf2092cf Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 11 Feb 2020 10:29:18 +1100
Subject: [PATCH 33/38] Add inline docs and pass marker as parameter.

---
 packages/block-editor/README.md                          | 2 +-
 .../src/components/simulate-media-query/index.js         | 9 ++++-----
 packages/block-editor/src/style.scss                     | 6 ++++--
 packages/block-library/src/editor.scss                   | 2 ++
 packages/block-library/src/style.scss                    | 2 ++
 packages/block-library/src/theme.scss                    | 2 ++
 packages/edit-post/src/components/resize-canvas/index.js | 7 +++++--
 7 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 184e9aca0e721..edce498b3c0be 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -488,7 +488,7 @@ Function that manipulates media queries from stylesheets to simulate a given vie
 
 _Parameters_
 
--   _partialPaths_ `Array`: Paths of stylesheets to manipulate.
+-   _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**
diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index 1475adcfc2734..74b5fffe1cc50 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -56,10 +56,10 @@ function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) {
 /**
  * Function that manipulates media queries from stylesheets to simulate a given viewport width.
  *
- * @param {Array} partialPaths Paths of stylesheets to manipulate.
+ * @param {string} marker CSS selector string defining start and end of manipulable styles.
  * @param {number} width Viewport width to simulate.
  */
-export default function useSimulatedMediaQuery( width ) {
+export default function useSimulatedMediaQuery( marker, width ) {
 	useEffect( () => {
 		const styleSheets = getStyleSheetsThatMatchHostname();
 		const originalStyles = [];
@@ -71,17 +71,16 @@ export default function useSimulatedMediaQuery( width ) {
 				++ruleIndex
 			) {
 				const rule = styleSheet.cssRules[ ruleIndex ];
-
 				if (
 					! relevantSection &&
-					!! rule.cssText.match( /#start-resizable-editor-section/ )
+					!! rule.cssText.match( new RegExp( `#start-${ marker }` ) )
 				) {
 					relevantSection = true;
 				}
 
 				if (
 					relevantSection &&
-					!! rule.cssText.match( /#end-resizable-editor-section/ )
+					!! rule.cssText.match( new RegExp( `#end-${ marker }` ) )
 				) {
 					relevantSection = false;
 				}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index c54f4111564ee..6a52063b672e0 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,8 +1,9 @@
+// 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
+// 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";
@@ -44,11 +45,12 @@
 @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.
+// Styles for components that are used outside of the editing canvas go here:
 
 @import "./components/editor-skeleton/style.scss";
 @import "./components/inserter/style.scss";
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 4a77d1f1e8062..012918eef5483 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,3 +1,4 @@
+// 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;
 }
@@ -62,6 +63,7 @@
 	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;
 }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 8aa8b47b45c06..bd8ab8a093bb5 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -1,3 +1,4 @@
+// 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;
 }
@@ -252,6 +253,7 @@
 	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;
 }
diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss
index e6c8d48ac3d04..88adf3fe3be9b 100644
--- a/packages/block-library/src/theme.scss
+++ b/packages/block-library/src/theme.scss
@@ -1,3 +1,4 @@
+// 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;
 }
@@ -16,6 +17,7 @@
 @import "./table/theme.scss";
 @import "./video/theme.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;
 }
diff --git a/packages/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js
index a86bab7df5604..7a136b49750a4 100644
--- a/packages/edit-post/src/components/resize-canvas/index.js
+++ b/packages/edit-post/src/components/resize-canvas/index.js
@@ -8,8 +8,8 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Function to resize the editor window.
  *
+ * @return {Object} Inline styles to be added to resizable container.
  */
-
 export function useResizeCanvas() {
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getDeviceType();
@@ -61,7 +61,10 @@ export function useResizeCanvas() {
 		}
 	};
 
-	useSimulatedMediaQuery( getCanvasWidth( deviceType ) );
+	useSimulatedMediaQuery(
+		'resizable-editor-section',
+		getCanvasWidth( deviceType )
+	);
 
 	return contentInlineStyles( deviceType );
 }

From 0696f6a95402cadcdfee1f2831ea6199f554728c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 11 Feb 2020 10:32:33 +1100
Subject: [PATCH 34/38] Rename selector.

---
 .../developers/data/data-core-block-editor.md                   | 2 +-
 packages/block-editor/src/store/selectors.js                    | 2 +-
 packages/edit-post/src/components/preview-options/index.js      | 2 +-
 packages/edit-post/src/components/resize-canvas/index.js        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index be428b25f6848..6e9864d3856ad 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -321,7 +321,7 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
-<a name="getDeviceType" href="#getDeviceType">#</a> **getDeviceType**
+<a name="getPreviewDeviceType" href="#getPreviewDeviceType">#</a> **getPreviewDeviceType**
 
 Returns the current editing canvas device type.
 
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 8f891d5a001a7..645a402fea277 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1629,6 +1629,6 @@ export function didAutomaticChange( state ) {
  *
  * @return {string} Device type.
  */
-export function getDeviceType( state ) {
+export function getPreviewDeviceType( state ) {
 	return state.deviceType;
 }
diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js
index b5a54f8a79a53..f0aa603d4d7f6 100644
--- a/packages/edit-post/src/components/preview-options/index.js
+++ b/packages/edit-post/src/components/preview-options/index.js
@@ -32,7 +32,7 @@ export default function PreviewOptions( {
 	const { setPreviewDeviceType } = useDispatch( 'core/block-editor' );
 
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getDeviceType();
+		return select( 'core/block-editor' ).getPreviewDeviceType();
 	}, [] );
 
 	const translateDropdownButtonText = () => {
diff --git a/packages/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js
index 7a136b49750a4..b865c0fa108f0 100644
--- a/packages/edit-post/src/components/resize-canvas/index.js
+++ b/packages/edit-post/src/components/resize-canvas/index.js
@@ -12,7 +12,7 @@ import { useEffect, useState } from '@wordpress/element';
  */
 export function useResizeCanvas() {
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getDeviceType();
+		return select( 'core/block-editor' ).getPreviewDeviceType();
 	}, [] );
 
 	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );

From dd53ad9346fc0284c4de4fc9920a7424035e4aac Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 11 Feb 2020 10:59:26 +1100
Subject: [PATCH 35/38] Miscellaneous styling fixes

---
 .../src/components/preview-options/index.js         |  2 +-
 .../src/components/preview-options/style.scss       | 13 +++++++++----
 .../edit-post/src/components/text-editor/style.scss |  2 +-
 .../src/components/visual-editor/style.scss         |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js
index f0aa603d4d7f6..0dbf195d7e42f 100644
--- a/packages/edit-post/src/components/preview-options/index.js
+++ b/packages/edit-post/src/components/preview-options/index.js
@@ -103,7 +103,7 @@ export default function PreviewOptions( {
 								forcePreviewLink={ forcePreviewLink }
 								textContent={ __( 'Preview externally' ) }
 							/>
-							<Icon icon="external" />
+							<Icon icon="external" className="editor-post-preview__icon-external" />
 						</div>
 					</MenuGroup>
 				</>
diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index e5d2090543438..8551b1c6e3a77 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -45,14 +45,13 @@
 }
 
 .editor-post-preview__grouping-external {
-	display: flex;
-	justify-content: space-between;
-	padding: $grid-size-large - 1;
+	position: relative;
 }
 
 .editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external {
-	padding: 0;
+	padding: $grid-size-large - 1;
 	height: auto;
+	display: block;
 
 	&:focus {
 		color: $dark-gray-900;
@@ -69,6 +68,12 @@
 	}
 }
 
+.editor-post-preview__icon-external {
+	position: absolute;
+	right: $grid-size-large - 1;
+	top: $grid-size-large - 2;
+}
+
 @include break-small() {
 	.editor-post-preview {
 		display: none;
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 9c6e68037eda2..5bf479cf97762 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -1,7 +1,7 @@
 .edit-post-text-editor {
 	position: relative;
 	width: 100%;
-	background-color: #fff;
+	background-color: $white;
 	flex-grow: 1;
 
 	// Always show outlines in code editor
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index fb94b8254e1df..0becd2e48cec6 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -2,7 +2,7 @@
 	position: relative;
 	padding-top: 50px;
 	// Default background color so that grey .edit-post-editor-regions__content color doesn't show through.
-	background-color: #fff;
+	background-color: $white;
 
 	& .components-button {
 		font-family: $default-font;

From aedf6bc6fa1a7434754616a4f7a0754e190bd2f2 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 11 Feb 2020 10:59:54 +1100
Subject: [PATCH 36/38] Early return

---
 .../src/components/simulate-media-query/index.js             | 3 +++
 packages/edit-post/src/components/preview-options/index.js   | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js
index 74b5fffe1cc50..02fb9abb0903c 100644
--- a/packages/block-editor/src/components/simulate-media-query/index.js
+++ b/packages/block-editor/src/components/simulate-media-query/index.js
@@ -15,6 +15,9 @@ 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 ) => {
diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js
index 0dbf195d7e42f..1179f64395994 100644
--- a/packages/edit-post/src/components/preview-options/index.js
+++ b/packages/edit-post/src/components/preview-options/index.js
@@ -103,7 +103,10 @@ export default function PreviewOptions( {
 								forcePreviewLink={ forcePreviewLink }
 								textContent={ __( 'Preview externally' ) }
 							/>
-							<Icon icon="external" className="editor-post-preview__icon-external" />
+							<Icon
+								icon="external"
+								className="editor-post-preview__icon-external"
+							/>
 						</div>
 					</MenuGroup>
 				</>

From 3356171bf82b2c02afa6a1729ef67f10289e598a Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Tue, 11 Feb 2020 15:28:18 +1100
Subject: [PATCH 37/38] Button height adjustment.

---
 packages/edit-post/src/components/preview-options/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
index 8551b1c6e3a77..bb18674f227c0 100644
--- a/packages/edit-post/src/components/preview-options/style.scss
+++ b/packages/edit-post/src/components/preview-options/style.scss
@@ -8,6 +8,7 @@
 	border-radius: 0;
 	display: flex;
 	justify-content: space-between;
+	height: $block-controls-height - 2; // Needs to be 2px smaller to account for the box-shadow.
 
 	&:hover,
 	&:focus {

From ba531c420b2ca3cef86103ef634f695842c6391c Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 12 Feb 2020 09:58:52 +1100
Subject: [PATCH 38/38] Update docs.

---
 .../developers/data/data-core-block-editor.md | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index 6e9864d3856ad..919763be48cfb 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -321,18 +321,6 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
-<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="getFirstMultiSelectedBlockClientId" href="#getFirstMultiSelectedBlockClientId">#</a> **getFirstMultiSelectedBlockClientId**
 
 Returns the client ID of the first block in the multi-selection set, or null
@@ -512,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.