From b6207a89d96902a80fc75e2c82bf42c9d3e13333 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 13:18:02 +0600
Subject: [PATCH 01/11] SPT: Move Template Selector files into separate
 directory

---
 .../components/sidebar-modal-opener.js        |  2 +-
 .../{ => template-selector}/block-preview.js  |  0
 .../block-template-preview.js                 |  0
 .../index.js}                                 | 19 ++--
 .../item.js}                                  |  0
 .../preview-template-title.js                 |  0
 .../preview.js}                               |  0
 .../template-selector-control-test.js.snap    | 34 ++++----
 .../template-selector-preview-test.js.snap    |  0
 .../test/helpers/templates-blocks-helpers.js  |  0
 .../test/index.js}                            | 28 +++---
 .../test/preview.js}                          |  0
 .../page-template-modal/index.js              |  6 +-
 .../styles/starter-page-templates-editor.scss | 86 +++++++++++--------
 .../design-selector/index.tsx                 |  4 +-
 15 files changed, 93 insertions(+), 86 deletions(-)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/block-preview.js (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/block-template-preview.js (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{template-selector-control.js => template-selector/index.js} (79%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{template-selector-item.js => template-selector/item.js} (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/preview-template-title.js (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{template-selector-preview.js => template-selector/preview.js} (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/test/__snapshots__/template-selector-control-test.js.snap (69%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/test/__snapshots__/template-selector-preview-test.js.snap (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{ => template-selector}/test/helpers/templates-blocks-helpers.js (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{test/template-selector-control-test.js => template-selector/test/index.js} (89%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/{test/template-selector-preview-test.js => template-selector/test/preview.js} (100%)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/sidebar-modal-opener.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/sidebar-modal-opener.js
index be7405daf2383d..b76287a4a79ad1 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/sidebar-modal-opener.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/sidebar-modal-opener.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { PageTemplatesPlugin } from '../index';
-import TemplateSelectorItem from './template-selector-item';
+import TemplateSelectorItem from './template-selector/item';
 import replacePlaceholders from '../utils/replace-placeholders';
 /* eslint-enable import/no-extraneous-dependencies */
 class SidebarModalOpener extends Component {
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/block-preview.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/block-preview.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/block-template-preview.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/block-template-preview.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
similarity index 79%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
index 2f6f6994541e6e..608d1352807f1c 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
@@ -18,10 +18,10 @@ import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import TemplateSelectorItem from './template-selector-item';
-import replacePlaceholders from '../utils/replace-placeholders';
+import TemplateSelectorItem from './item';
+import replacePlaceholders from '../../utils/replace-placeholders';
 
-export const TemplateSelectorControl = ( {
+export const TemplateSelector = ( {
 	label,
 	className,
 	help,
@@ -41,21 +41,18 @@ export const TemplateSelectorControl = ( {
 		return null;
 	}
 
-	const id = `template-selector-control-${ instanceId }`;
+	const id = `template-selector-${ instanceId }`;
 
 	return (
 		<BaseControl
 			label={ label }
 			id={ id }
 			help={ help }
-			className={ classnames( className, 'template-selector-control' ) }
+			className={ classnames( className, 'template-selector' ) }
 		>
-			<ul
-				className="template-selector-control__options"
-				data-testid="template-selector-control-options"
-			>
+			<ul className="template-selector__options" data-testid="template-selector-options">
 				{ map( templates, ( { slug, title, preview, previewAlt } ) => (
-					<li key={ `${ id }-${ slug }` } className="template-selector-control__template">
+					<li key={ `${ id }-${ slug }` } className="template-selector__template">
 						<TemplateSelectorItem
 							id={ id }
 							value={ slug }
@@ -75,4 +72,4 @@ export const TemplateSelectorControl = ( {
 	);
 };
 
-export default compose( memo, withInstanceId )( TemplateSelectorControl );
+export default compose( memo, withInstanceId )( TemplateSelector );
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/item.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/item.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/preview-template-title.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview-template-title.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/preview-template-title.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview-template-title.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-preview.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/__snapshots__/template-selector-control-test.js.snap b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-control-test.js.snap
similarity index 69%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/__snapshots__/template-selector-control-test.js.snap
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-control-test.js.snap
index 33bd5907e0dcb3..01b590f26561d4 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/__snapshots__/template-selector-control-test.js.snap
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-control-test.js.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TemplateSelectorControl Basic rendering renders with required props 1`] = `
+exports[`TemplateSelector Basic rendering renders with required props 1`] = `
 <div>
   <div
-    class="components-base-control template-selector-control"
+    class="components-base-control template-selector"
   >
     <div
       class="components-base-control__field"
     >
       <label
         class="components-base-control__label"
-        for="template-selector-control-17"
+        for="template-selector-17"
       >
         Select a Template...
       </label>
       <ul
-        class="template-selector-control__options"
-        data-testid="template-selector-control-options"
+        class="template-selector__options"
+        data-testid="template-selector-options"
       >
         <li
-          class="template-selector-control__template"
+          class="template-selector__template"
         >
           <button
-            aria-labelledby="template-selector-control-17 label-template-selector-control-17-blank"
+            aria-labelledby="template-selector-17 label-template-selector-17-blank"
             class="template-selector-item__label"
             type="button"
             value="blank"
@@ -37,17 +37,17 @@ exports[`TemplateSelectorControl Basic rendering renders with required props 1`]
             </div>
             <span
               class="template-selector-item__template-title"
-              id="label-template-selector-control-17-blank"
+              id="label-template-selector-17-blank"
             >
               Blank
             </span>
           </button>
         </li>
         <li
-          class="template-selector-control__template"
+          class="template-selector__template"
         >
           <button
-            aria-labelledby="template-selector-control-17 label-template-selector-control-17-template-1"
+            aria-labelledby="template-selector-17 label-template-selector-17-template-1"
             class="template-selector-item__label"
             type="button"
             value="template-1"
@@ -63,17 +63,17 @@ exports[`TemplateSelectorControl Basic rendering renders with required props 1`]
             </div>
             <span
               class="template-selector-item__template-title"
-              id="label-template-selector-control-17-template-1"
+              id="label-template-selector-17-template-1"
             >
               Template 1
             </span>
           </button>
         </li>
         <li
-          class="template-selector-control__template"
+          class="template-selector__template"
         >
           <button
-            aria-labelledby="template-selector-control-17 label-template-selector-control-17-template-2"
+            aria-labelledby="template-selector-17 label-template-selector-17-template-2"
             class="template-selector-item__label"
             type="button"
             value="template-2"
@@ -89,17 +89,17 @@ exports[`TemplateSelectorControl Basic rendering renders with required props 1`]
             </div>
             <span
               class="template-selector-item__template-title"
-              id="label-template-selector-control-17-template-2"
+              id="label-template-selector-17-template-2"
             >
               Template 2
             </span>
           </button>
         </li>
         <li
-          class="template-selector-control__template"
+          class="template-selector__template"
         >
           <button
-            aria-labelledby="template-selector-control-17 label-template-selector-control-17-template-3"
+            aria-labelledby="template-selector-17 label-template-selector-17-template-3"
             class="template-selector-item__label"
             type="button"
             value="template-3"
@@ -115,7 +115,7 @@ exports[`TemplateSelectorControl Basic rendering renders with required props 1`]
             </div>
             <span
               class="template-selector-item__template-title"
-              id="label-template-selector-control-17-template-3"
+              id="label-template-selector-17-template-3"
             >
               Template 3
             </span>
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/__snapshots__/template-selector-preview-test.js.snap b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/__snapshots__/template-selector-preview-test.js.snap
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/helpers/templates-blocks-helpers.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/helpers/templates-blocks-helpers.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/helpers/templates-blocks-helpers.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/helpers/templates-blocks-helpers.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/template-selector-control-test.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/index.js
similarity index 89%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/template-selector-control-test.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/index.js
index bf7107182a4a36..7585ece99e6e5d 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/template-selector-control-test.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/index.js
@@ -8,7 +8,7 @@ import { uniqueId, omit } from 'lodash';
 import { render, fireEvent } from '@testing-library/react';
 
 import { templatesFixture, blocksByTemplatesFixture } from './helpers/templates-blocks-helpers';
-import { TemplateSelectorControl } from '../template-selector-control';
+import { TemplateSelector } from '..';
 
 // Mock out this component until @wordpress/block-editor
 // `BlockPreview` component is available as default export.
@@ -34,7 +34,7 @@ afterAll( () => {
 
 const testUniqueId = uniqueId();
 
-describe( 'TemplateSelectorControl', () => {
+describe( 'TemplateSelector', () => {
 	const siteInformation = {
 		title: 'gutenberg-training',
 		vertical: 'Business',
@@ -43,7 +43,7 @@ describe( 'TemplateSelectorControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'renders with required props', () => {
 			const { getByText, container } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -63,7 +63,7 @@ describe( 'TemplateSelectorControl', () => {
 
 		it( 'highlights the selected template', () => {
 			render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -78,7 +78,7 @@ describe( 'TemplateSelectorControl', () => {
 
 		it( 'does not render when missing templates prop', () => {
 			const { queryByText, queryByTestId } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					blocksByTemplates={ blocksByTemplatesFixture }
@@ -87,12 +87,12 @@ describe( 'TemplateSelectorControl', () => {
 
 			// use `queryBy` to avoid throwing an error with `getBy`
 			expect( queryByText( 'Select a Template...' ) ).not.toBeInTheDocument();
-			expect( queryByTestId( 'template-selector-control-options' ) ).not.toBeInTheDocument();
+			expect( queryByTestId( 'template-selector-options' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'does not render when templates prop is not an Array', () => {
 			const { queryByText, queryByTestId } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ 'evil stuff here' }
@@ -101,7 +101,7 @@ describe( 'TemplateSelectorControl', () => {
 			);
 
 			expect( queryByText( 'Select a Template...' ) ).not.toBeInTheDocument();
-			expect( queryByTestId( 'template-selector-control-options' ) ).not.toBeInTheDocument();
+			expect( queryByTestId( 'template-selector-options' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -110,7 +110,7 @@ describe( 'TemplateSelectorControl', () => {
 			const onSelectSpy = jest.fn();
 
 			const { getByText } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -129,7 +129,7 @@ describe( 'TemplateSelectorControl', () => {
 	describe( 'Static previews', () => {
 		it( 'renders in static preview mode by default ', () => {
 			const { getByAltText } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -148,7 +148,7 @@ describe( 'TemplateSelectorControl', () => {
 			);
 
 			const { getByText } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixtureWithoutPreviews }
@@ -165,7 +165,7 @@ describe( 'TemplateSelectorControl', () => {
 	describe( 'Dynamic previews', () => {
 		it( 'renders in dynamic preview mode when useDynamicPreview is true', () => {
 			const { queryByAltText, getAllByTestId } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -184,7 +184,7 @@ describe( 'TemplateSelectorControl', () => {
 
 		it( 'does not render without blocksByTemplatesFixture prop when in dynamic mode', () => {
 			const { queryByLabelText, queryByTestId } = render(
-				<TemplateSelectorControl
+				<TemplateSelector
 					label="Select a Template..."
 					instanceId={ testUniqueId }
 					templates={ templatesFixture }
@@ -194,7 +194,7 @@ describe( 'TemplateSelectorControl', () => {
 			);
 
 			expect( queryByLabelText( 'Select a Template...' ) ).not.toBeInTheDocument();
-			expect( queryByTestId( 'template-selector-control-options' ) ).not.toBeInTheDocument();
+			expect( queryByTestId( 'template-selector-options' ) ).not.toBeInTheDocument();
 		} );
 	} );
 } );
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/template-selector-preview-test.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/test/template-selector-preview-test.js
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js
index cece8bd1de7112..5c20836b259047 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js
@@ -27,8 +27,8 @@ import { parse as parseBlocks } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './styles/starter-page-templates-editor.scss';
-import TemplateSelectorControl from './components/template-selector-control';
-import TemplateSelectorPreview from './components/template-selector-preview';
+import TemplateSelector from './components/template-selector';
+import TemplateSelectorPreview from './components/template-selector/preview';
 import { trackDismiss, trackSelection, trackView } from './utils/tracking';
 import replacePlaceholders from './utils/replace-placeholders';
 import ensureAssets from './utils/ensure-assets';
@@ -243,7 +243,7 @@ class PageTemplateModal extends Component {
 	renderTemplatesList = ( templatesList, legendLabel ) => (
 		<fieldset className="page-template-modal__list">
 			<legend className="page-template-modal__form-title">{ legendLabel }</legend>
-			<TemplateSelectorControl
+			<TemplateSelector
 				label={ __( 'Layout', 'full-site-editing' ) }
 				templates={ templatesList }
 				blocksByTemplates={ this.getBlocksByTemplateSlugs( this.props.templates ) }
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index 2af8816ffaf556..92b77781588c49 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -74,13 +74,13 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	box-shadow: none; // cancel "modal" appearance
 	border: none; // cancel "modal" appearance
 	top: 0; // overlay the Block Editor toolbar
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform: none;
-    max-width: none;
-    max-height: none;
-    background-color: #eeeeee;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	transform: none;
+	max-width: none;
+	max-height: none;
+	background-color: #eeeeee;
 }
 
 .page-template-modal .components-modal__header-heading-container {
@@ -143,7 +143,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		@include screen-reader-text();
 	}
 
-	.template-selector-control__options {
+	.template-selector__options {
 		display: grid;
 		// stylelint-disable-next-line unit-whitelist
 		grid-template-columns: 1fr;
@@ -160,7 +160,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		}
 	}
 
-	.template-selector-control__option {
+	.template-selector__option {
 		margin-bottom: 4px;
 	}
 
@@ -216,8 +216,6 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 				outline-offset: -4px;
 			}
 		}
-
-
 	}
 
 	.template-selector-item__preview-wrap {
@@ -243,10 +241,10 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 			opacity: 0.5;
 		}
 
-        .block-editor-block-list__layout,
-        .block-editor-block-list__block {
+		.block-editor-block-list__layout,
+		.block-editor-block-list__block {
 			padding: inherit;
-        }
+		}
 	}
 
 	.template-selector-item__media {
@@ -258,7 +256,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	}
 
 	// Blank template
-	.template-selector-control__template:first-child {
+	.template-selector__template:first-child {
 		.template-selector-item__preview-wrap {
 			@media screen and ( max-width: 659px ) {
 				padding-top: 0%;
@@ -316,26 +314,26 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 }
 
 .page-template-modal__buttons {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 10;
-    height: 56px;
-    display: flex;
-    align-items: center;
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 10;
+	height: 56px;
+	display: flex;
+	align-items: center;
 	padding-right: 24px;
 
 	@media screen and ( max-width: 659px ) {
 		display: none;
 	}
 
-    &.is-visually-hidden {
-    	@include screen-reader-text();
-    }
+	&.is-visually-hidden {
+		@include screen-reader-text();
+	}
 
 	.components-button {
 		height: 33px; // match to Gutenberg toolbar styles
-	    line-height: 32px; // match to Gutenberg toolbar styles
+		line-height: 32px; // match to Gutenberg toolbar styles
 	}
 }
 
@@ -359,9 +357,17 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 
 	@media screen and ( min-width: 1648px ) {
 		right: unset;
-		left: calc( #{$preview-left-sidebar-full} + ( 100vw - #{$preview-left-sidebar-full} - #{$preview-max-width} - #{$preview-right-margin} ) / 2 );
+		left: calc(
+			#{$preview-left-sidebar-full} + (
+					100vw - #{$preview-left-sidebar-full} - #{$preview-max-width} - #{$preview-right-margin}
+				) / 2
+		);
 		body.folded & {
-			left: calc( #{$preview-left-sidebar-reduced} + ( 100vw - #{$preview-left-sidebar-reduced} - #{$preview-max-width} - #{$preview-right-margin} ) / 2 );
+			left: calc(
+				#{$preview-left-sidebar-reduced} + (
+						100vw - #{$preview-left-sidebar-reduced} - #{$preview-max-width} - #{$preview-right-margin}
+					) / 2
+			);
 		}
 	}
 
@@ -374,7 +380,8 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	border-radius: 2px;
 	overflow-x: hidden;
 	overflow-y: auto;
-	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.14 ), 0 3px 1px -2px rgba( 0, 0, 0, 0.12 ), 0 1px 5px 0 rgba( 0, 0, 0, 0.2 );
+	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.14 ), 0 3px 1px -2px rgba( 0, 0, 0, 0.12 ),
+		0 1px 5px 0 rgba( 0, 0, 0, 0.2 );
 
 	.edit-post-visual-editor {
 		margin: 0;
@@ -417,19 +424,19 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 body:not( .is-fullscreen-mode ) {
 	.template-selector-preview {
 		@media screen and ( min-width: 783px ) {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + (24px * 2 ) } );
+			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
 		}
 
 		@media screen and ( min-width: 961px ) {
-			width: calc( 70% - #{$wp-org-sidebar-full } );
+			width: calc( 70% - #{$wp-org-sidebar-full} );
 		}
 	}
 	@media screen and ( min-width: 783px ) {
 		&.folded .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + (24px * 2 ) } );
+			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
 		}
 		&:not( .folded ):not( .auto-fold ) .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-full } );
+			width: calc( 70% - #{$wp-org-sidebar-full} );
 		}
 	}
 }
@@ -464,7 +471,10 @@ body:not( .is-fullscreen-mode ) {
 		}
 
 		// `core/columns`
-		.wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type='core/column'] {
+		.wp-block-columns
+			> .editor-inner-blocks
+			> .editor-block-list__layout
+			> [data-type='core/column'] {
 			//margin-left: -14px;
 			//margin-right: -14px;
 
@@ -507,12 +517,12 @@ body:not( .is-fullscreen-mode ) {
 }
 
 .page-template-modal__loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
 	transform: translate( -50%, -50% );
 	display: flex;
-    align-items: flex-end;
+	align-items: flex-end;
 
 	.components-spinner {
 		float: none;
diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
index 3f88853f496266..1f363634800491 100644
--- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
+++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
  * Internal dependencies
  */
 import { SiteVertical } from '../../stores/onboard/types';
-import { TemplateSelectorControl } from '../../../../../apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control';
+import { TemplateSelector } from '../../../../../apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector';
 
 export default () => {
 	const siteVertical = useSelect(
@@ -28,7 +28,7 @@ export default () => {
 		<div
 			className="page-template-modal__list" // eslint-disable-line wpcalypso/jsx-classname-namespace
 		>
-			<TemplateSelectorControl
+			<TemplateSelector
 				label={ NO__( 'Layout', 'full-site-editing' ) }
 				templates={ homepageTemplates }
 				blocksByTemplates={ {} /* Unneeded, since we're setting `useDynamicPreview` to `false` */ }

From 2b197af886f7fa9ac80a0a4724b2e5d110a448e1 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 13:59:58 +0600
Subject: [PATCH 02/11] Moar isolating

---
 .../components/template-selector/index.js     |   1 +
 .../components/template-selector/preview.js   |   8 +-
 .../components/template-selector/preview.scss | 182 ++++++++++
 .../components/template-selector/shared.scss  |  21 ++
 .../components/template-selector/style.scss   | 135 +++++++
 .../template-selector-preview-test.js.snap    |   2 +-
 .../styles/starter-page-templates-editor.scss | 337 +-----------------
 7 files changed, 346 insertions(+), 340 deletions(-)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
index 608d1352807f1c..cb0342d2f45877 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
@@ -20,6 +20,7 @@ import { memo } from '@wordpress/element';
  */
 import TemplateSelectorItem from './item';
 import replacePlaceholders from '../../utils/replace-placeholders';
+import './style.scss';
 
 export const TemplateSelector = ( {
 	label,
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
index 97dd05ec12924c..7f530f4606c167 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
@@ -21,6 +21,8 @@ import { useState, useEffect, useLayoutEffect, useRef, useReducer } from '@wordp
 import PreviewTemplateTitle from './preview-template-title';
 import BlockPreview from './block-preview';
 
+import './preview.scss';
+
 const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
 	const THRESHOLD_RESIZE = 300;
 
@@ -67,7 +69,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
 
 				// Try to adjust vertical offset of the large preview.
 				const offsetCorrectionEl = previewContainerEl.closest(
-					'.template-selector-preview__offset-correction'
+					'.template-selector__preview-offset-correction'
 				);
 
 				if ( offsetCorrectionEl && scale ) {
@@ -106,7 +108,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
 	if ( isEmpty( blocks ) || ! isArray( blocks ) ) {
 		return (
 			<div className={ classnames( 'template-selector-preview', 'is-blank-preview' ) }>
-				<div className="template-selector-preview__placeholder">
+				<div className="template-selector__preview-placeholder">
 					{ __( 'Select a layout to preview.', 'full-site-editing' ) }
 				</div>
 			</div>
@@ -121,7 +123,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
 					<div className="editor-styles-wrapper" style={ { visibility } }>
 						<div className="editor-writing-flow">
 							<PreviewTemplateTitle title={ title } />
-							<div className="template-selector-preview__offset-correction">
+							<div className="template-selector__preview-offset-correction">
 								<BlockPreview key={ recompute } blocks={ blocks } viewportWidth={ viewportWidth } />
 							</div>
 						</div>
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
new file mode 100644
index 00000000000000..b7278c79c9720e
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
@@ -0,0 +1,182 @@
+@import './shared.scss';
+
+// Template Selector Preview
+.template-selector-preview {
+	@media screen and ( max-width: 659px ) {
+		display: none;
+	}
+
+	@media screen and ( min-width: 783px ) {
+		width: calc( 70% - 50px );
+	}
+
+	@media screen and ( min-width: 660px ) {
+		&.is-blank-preview {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+		}
+	}
+
+	@media screen and ( min-width: 1648px ) {
+		right: unset;
+		left: calc(
+			#{$preview-left-sidebar-full} + (
+					100vw - #{$preview-left-sidebar-full} - #{$preview-max-width} - #{$preview-right-margin}
+				) / 2
+		);
+		body.folded & {
+			left: calc(
+				#{$preview-left-sidebar-reduced} + (
+						100vw - #{$preview-left-sidebar-reduced} - #{$preview-max-width} - #{$preview-right-margin}
+					) / 2
+			);
+		}
+	}
+
+	position: fixed;
+	top: 111px;
+	bottom: 24px;
+	right: $preview-right-margin;
+	width: calc( 80% - 50px );
+	background: $template-selector-empty-background;
+	border-radius: 2px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.14 ), 0 3px 1px -2px rgba( 0, 0, 0, 0.12 ),
+		0 1px 5px 0 rgba( 0, 0, 0, 0.2 );
+
+	.edit-post-visual-editor {
+		margin: 0;
+		padding: 0;
+	}
+
+	.editor-styles-wrapper {
+		.template-selector__preview-offset-correction {
+			position: relative;
+			top: $template-large-preview-title-height;
+		}
+
+		.editor-post-title {
+			transform-origin: top left;
+			width: 960px;
+			display: block;
+			position: absolute;
+			top: 0;
+		}
+
+		.editor-post-title,
+		.editor-post-title__block,
+		.editor-post-title__input {
+			padding-top: 0;
+			padding-bottom: 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			.editor-post-title__input {
+				margin: 0;
+				padding: 0;
+				height: $template-large-preview-title-height;
+				line-height: $template-large-preview-title-height;
+				overflow: hidden;
+				resize: none;
+			}
+		}
+	}
+}
+
+body:not( .is-fullscreen-mode ) {
+	.template-selector-preview {
+		@media screen and ( min-width: 783px ) {
+			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
+		}
+
+		@media screen and ( min-width: 961px ) {
+			width: calc( 70% - #{$wp-org-sidebar-full} );
+		}
+	}
+	@media screen and ( min-width: 783px ) {
+		&.folded .template-selector-preview {
+			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
+		}
+		&:not( .folded ):not( .auto-fold ) .template-selector-preview {
+			width: calc( 70% - #{$wp-org-sidebar-full} );
+		}
+	}
+}
+
+.template-selector__preview-placeholder {
+	color: var( --color-text-subtle );
+	font-size: 15px;
+	font-weight: 400;
+}
+
+// Preview adjustments.
+// Tweak styles which are inside of the preview container.
+.block-editor-block-preview__container,
+.template-selector-preview {
+	max-width: $preview-max-width;
+
+	.editor-styles-wrapper {
+		.wp-block {
+			width: 100%;
+		}
+
+		.wp-block[data-align='wide'] {
+			//max-width: 800px;
+		}
+
+		// `core/cover`
+		.wp-block[data-type='core/cover'][data-align='full'] {
+			margin: 0;
+			.wp-block-cover {
+				padding: 0;
+			}
+		}
+
+		// `core/columns`
+		.wp-block-columns
+			> .editor-inner-blocks
+			> .editor-block-list__layout
+			> [data-type='core/column'] {
+			//margin-left: -14px;
+			//margin-right: -14px;
+
+			& > .editor-block-list__block-edit > div > .block-core-columns > .editor-inner-blocks {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+		}
+
+		.block-editor-block-list__block {
+			&[data-align='full'] {
+				margin: 0;
+			}
+
+			.block-editor-block-list__block-edit {
+				@media screen and ( min-width: 600px ) {
+					margin: 0;
+				}
+			}
+		}
+
+		// Fix upstream: https://github.com/WordPress/gutenberg/pull/17202.
+		.block-editor-block-list__layout,
+		.block-editor-block-list__block {
+			padding: inherit;
+		}
+	}
+}
+
+// Set full height to preview container to inherits styles defined for themes.
+.template-selector-preview .components-disabled,
+.template-selector-preview .edit-post-visual-editor,
+.template-selector-item__preview-wrap .components-disabled,
+.template-selector-item__preview-wrap .edit-post-visual-editor {
+	height: 100%;
+
+	.editor-styles-wrapper {
+		height: 100%;
+	}
+}
+
+$template-large-preview-title-height: 120px;
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
new file mode 100644
index 00000000000000..9c26c6d90c2752
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
@@ -0,0 +1,21 @@
+$template-selector-border-color: #e2e4e7;
+$template-selector-border-color-selected: #555d66;
+$template-selector-border-color-active: #00a0d2;
+$template-selector-border-color-hover: #c9c9ca;
+$template-selector-empty-background: #fff;
+$template-selector-modal-offset-bottom: 25px;
+$template-selector-modal-offset-right: 32px;
+$template-selector-blank-template-mobile-height: 70px;
+
+@mixin screen-reader-text() {
+	border: 0;
+	clip: rect( 1px, 1px, 1px, 1px );
+	clip-path: inset( 50% );
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
new file mode 100644
index 00000000000000..423c390890c402
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
@@ -0,0 +1,135 @@
+@import './shared.scss';
+
+.components-base-control.template-selector-control {
+	.components-base-control__label {
+		@include screen-reader-text();
+	}
+}
+
+.template-selector__options {
+	display: grid;
+	// stylelint-disable-next-line unit-whitelist
+	grid-template-columns: 1fr;
+	grid-gap: 1.75em;
+
+	@media screen and ( min-width: 660px ) {
+		margin-top: 0;
+		// stylelint-disable unit-whitelist
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax( 110px, 1fr )
+		); // allow grid to take over number of cols on large screens
+		// stylelint-enable unit-whitelist
+	}
+}
+
+.template-selector__option {
+	margin-bottom: 4px;
+}
+
+.template-selector-item__label {
+	display: block;
+	width: 100%;
+	font-size: 14px;
+	text-align: center;
+	border: solid 2px $template-selector-border-color;
+	border-radius: 6px;
+	cursor: pointer;
+	appearance: none;
+	padding: 0;
+	overflow: hidden;
+	background-color: #fff;
+	position: relative;
+	transform: translateZ( 0 ); // Fix for Safari rounded border overflow (1/2).
+
+	.template-selector-item__template-title {
+		width: 100%;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 40px;
+		line-height: 40px;
+		background-color: #fff;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+	}
+
+	&:hover {
+		border: solid 2px $template-selector-border-color-hover;
+	}
+
+	&.is-selected {
+		border: solid 2px $template-selector-border-color-selected;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: -2px;
+
+		&:focus {
+			box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;
+			border: solid 2px $template-selector-border-color-selected;
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 4px solid transparent;
+			outline-offset: -4px;
+		}
+	}
+}
+
+.template-selector-item__preview-wrap {
+	width: 100%;
+	display: block;
+	margin: 0 auto;
+	background: $template-selector-empty-background;
+	border-radius: 0;
+	overflow: hidden;
+	height: 0;
+	padding-top: 100%; // Aspect radio boxes. It will take the 100% of width.
+	box-sizing: content-box;
+	position: relative;
+	pointer-events: none;
+	opacity: 1;
+	transform: translateZ( 0 ); // Fix for Safari rounded border overflow (2/2).
+
+	@media screen and ( max-width: 659px ) {
+		padding-top: 120%;
+	}
+
+	&.is-rendering {
+		opacity: 0.5;
+	}
+
+	.block-editor-block-list__layout,
+	.block-editor-block-list__block {
+		padding: inherit;
+	}
+}
+
+.template-selector-item__media {
+	width: 100%;
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+// Blank template
+.template-selector__template:first-child {
+	.template-selector-item__preview-wrap {
+		@media screen and ( max-width: 659px ) {
+			padding-top: 0%;
+			height: $template-selector-blank-template-mobile-height;
+		}
+	}
+	.template-selector-item__template-title {
+		@media screen and ( max-width: 659px ) {
+			height: $template-selector-blank-template-mobile-height;
+			line-height: $template-selector-blank-template-mobile-height;
+		}
+	}
+}
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
index cbedc48863effc..3765c04a7f4393 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
@@ -30,7 +30,7 @@ exports[`TemplateSelectorPreview Basic rendering renders the preview when blocks
               </div>
             </div>
             <div
-              class="template-selector-preview__offset-correction"
+              class="template-selector__preview-offset-correction"
             >
               <div
                 data-testid="block-template-preview"
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index 92b77781588c49..903f9467479ae3 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -1,25 +1,4 @@
-@mixin screen-reader-text() {
-	border: 0;
-	clip: rect( 1px, 1px, 1px, 1px );
-	clip-path: inset( 50% );
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-$template-selector-border-color: #e2e4e7;
-$template-selector-border-color-selected: #555d66;
-$template-selector-border-color-active: #00a0d2;
-$template-selector-border-color-hover: #c9c9ca;
-$template-selector-empty-background: #fff;
-$template-selector-modal-offset-bottom: 25px;
-$template-selector-modal-offset-right: 32px;
-$template-selector-blank-template-mobile-height: 70px;
-$template-large-preview-title-height: 120px;
+@import '../components/template-selector/shared.scss';
 
 $wp-org-sidebar-reduced: 36px;
 $wp-org-sidebar-full: 160px;
@@ -137,141 +116,6 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	margin-bottom: 20px;
 }
 
-.page-template-modal__list,
-.sidebar-modal-opener {
-	.components-base-control__label {
-		@include screen-reader-text();
-	}
-
-	.template-selector__options {
-		display: grid;
-		// stylelint-disable-next-line unit-whitelist
-		grid-template-columns: 1fr;
-		grid-gap: 1.75em;
-
-		@media screen and ( min-width: 660px ) {
-			margin-top: 0;
-			// stylelint-disable unit-whitelist
-			grid-template-columns: repeat(
-				auto-fit,
-				minmax( 110px, 1fr )
-			); // allow grid to take over number of cols on large screens
-			// stylelint-enable unit-whitelist
-		}
-	}
-
-	.template-selector__option {
-		margin-bottom: 4px;
-	}
-
-	.template-selector-item__label {
-		display: block;
-		width: 100%;
-		font-size: 14px;
-		text-align: center;
-		border: solid 2px $template-selector-border-color;
-		border-radius: 6px;
-		cursor: pointer;
-		appearance: none;
-		padding: 0;
-		overflow: hidden;
-		background-color: #fff;
-		position: relative;
-		transform: translateZ( 0 ); // Fix for Safari rounded border overflow (1/2).
-
-		.template-selector-item__template-title {
-			width: 100%;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			height: 40px;
-			line-height: 40px;
-			background-color: #fff;
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
-
-		&:hover {
-			border: solid 2px $template-selector-border-color-hover;
-		}
-
-		&.is-selected {
-			border: solid 2px $template-selector-border-color-selected;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-			outline-offset: -2px;
-
-			&:focus {
-				box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;
-				border: solid 2px $template-selector-border-color-selected;
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 4px solid transparent;
-				outline-offset: -4px;
-			}
-		}
-	}
-
-	.template-selector-item__preview-wrap {
-		width: 100%;
-		display: block;
-		margin: 0 auto;
-		background: $template-selector-empty-background;
-		border-radius: 0;
-		overflow: hidden;
-		height: 0;
-		padding-top: 100%; // Aspect radio boxes. It will take the 100% of width.
-		box-sizing: content-box;
-		position: relative;
-		pointer-events: none;
-		opacity: 1;
-		transform: translateZ( 0 ); // Fix for Safari rounded border overflow (2/2).
-
-		@media screen and ( max-width: 659px ) {
-			padding-top: 120%;
-		}
-
-		&.is-rendering {
-			opacity: 0.5;
-		}
-
-		.block-editor-block-list__layout,
-		.block-editor-block-list__block {
-			padding: inherit;
-		}
-	}
-
-	.template-selector-item__media {
-		width: 100%;
-		display: block;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-	// Blank template
-	.template-selector__template:first-child {
-		.template-selector-item__preview-wrap {
-			@media screen and ( max-width: 659px ) {
-				padding-top: 0%;
-				height: $template-selector-blank-template-mobile-height;
-			}
-		}
-		.template-selector-item__template-title {
-			@media screen and ( max-width: 659px ) {
-				height: $template-selector-blank-template-mobile-height;
-				line-height: $template-selector-blank-template-mobile-height;
-			}
-		}
-	}
-}
-
 .page-template-modal__actions {
 	display: flex;
 	flex-direction: column;
@@ -337,185 +181,6 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	}
 }
 
-// Template Selector Preview
-.template-selector-preview {
-	@media screen and ( max-width: 659px ) {
-		display: none;
-	}
-
-	@media screen and ( min-width: 783px ) {
-		width: calc( 70% - 50px );
-	}
-
-	@media screen and ( min-width: 660px ) {
-		&.is-blank-preview {
-			align-items: center;
-			display: flex;
-			justify-content: center;
-		}
-	}
-
-	@media screen and ( min-width: 1648px ) {
-		right: unset;
-		left: calc(
-			#{$preview-left-sidebar-full} + (
-					100vw - #{$preview-left-sidebar-full} - #{$preview-max-width} - #{$preview-right-margin}
-				) / 2
-		);
-		body.folded & {
-			left: calc(
-				#{$preview-left-sidebar-reduced} + (
-						100vw - #{$preview-left-sidebar-reduced} - #{$preview-max-width} - #{$preview-right-margin}
-					) / 2
-			);
-		}
-	}
-
-	position: fixed;
-	top: 111px;
-	bottom: 24px;
-	right: $preview-right-margin;
-	width: calc( 80% - 50px );
-	background: $template-selector-empty-background;
-	border-radius: 2px;
-	overflow-x: hidden;
-	overflow-y: auto;
-	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.14 ), 0 3px 1px -2px rgba( 0, 0, 0, 0.12 ),
-		0 1px 5px 0 rgba( 0, 0, 0, 0.2 );
-
-	.edit-post-visual-editor {
-		margin: 0;
-		padding: 0;
-	}
-
-	.editor-styles-wrapper {
-		.template-selector-preview__offset-correction {
-			position: relative;
-			top: $template-large-preview-title-height;
-		}
-
-		.editor-post-title {
-			transform-origin: top left;
-			width: 960px;
-			display: block;
-			position: absolute;
-			top: 0;
-		}
-
-		.editor-post-title,
-		.editor-post-title__block,
-		.editor-post-title__input {
-			padding-top: 0;
-			padding-bottom: 0;
-			margin-top: 0;
-			margin-bottom: 0;
-			.editor-post-title__input {
-				margin: 0;
-				padding: 0;
-				height: $template-large-preview-title-height;
-				line-height: $template-large-preview-title-height;
-				overflow: hidden;
-				resize: none;
-			}
-		}
-	}
-}
-
-body:not( .is-fullscreen-mode ) {
-	.template-selector-preview {
-		@media screen and ( min-width: 783px ) {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
-		}
-
-		@media screen and ( min-width: 961px ) {
-			width: calc( 70% - #{$wp-org-sidebar-full} );
-		}
-	}
-	@media screen and ( min-width: 783px ) {
-		&.folded .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
-		}
-		&:not( .folded ):not( .auto-fold ) .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-full} );
-		}
-	}
-}
-
-.template-selector-preview__placeholder {
-	color: var( --color-text-subtle );
-	font-size: 15px;
-	font-weight: 400;
-}
-
-// Preview adjustments.
-// Tweak styles which are inside of the preview container.
-.block-editor-block-preview__container,
-.template-selector-preview {
-	max-width: $preview-max-width;
-
-	.editor-styles-wrapper {
-		.wp-block {
-			width: 100%;
-		}
-
-		.wp-block[data-align='wide'] {
-			//max-width: 800px;
-		}
-
-		// `core/cover`
-		.wp-block[data-type='core/cover'][data-align='full'] {
-			margin: 0;
-			.wp-block-cover {
-				padding: 0;
-			}
-		}
-
-		// `core/columns`
-		.wp-block-columns
-			> .editor-inner-blocks
-			> .editor-block-list__layout
-			> [data-type='core/column'] {
-			//margin-left: -14px;
-			//margin-right: -14px;
-
-			& > .editor-block-list__block-edit > div > .block-core-columns > .editor-inner-blocks {
-				margin-top: 0;
-				margin-bottom: 0;
-			}
-		}
-
-		.block-editor-block-list__block {
-			&[data-align='full'] {
-				margin: 0;
-			}
-
-			.block-editor-block-list__block-edit {
-				@media screen and ( min-width: 600px ) {
-					margin: 0;
-				}
-			}
-		}
-
-		// Fix upstream: https://github.com/WordPress/gutenberg/pull/17202.
-		.block-editor-block-list__layout,
-		.block-editor-block-list__block {
-			padding: inherit;
-		}
-	}
-}
-
-// Set full height to preview container to inherits styles defined for themes.
-.template-selector-preview .components-disabled,
-.template-selector-preview .edit-post-visual-editor,
-.template-selector-item__preview-wrap .components-disabled,
-.template-selector-item__preview-wrap .edit-post-visual-editor {
-	height: 100%;
-
-	.editor-styles-wrapper {
-		height: 100%;
-	}
-}
-
 .page-template-modal__loading {
 	position: absolute;
 	top: 50%;

From e06b61a83a540b0ac3304f7af47f40e6223171b7 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 14:12:45 +0600
Subject: [PATCH 03/11] Move more styles

---
 .../components/template-selector/preview.scss          | 10 ++++++++--
 .../components/template-selector/shared.scss           |  3 +++
 .../styles/starter-page-templates-editor.scss          |  9 ---------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
index b7278c79c9720e..cc673e7c604e86 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
@@ -1,5 +1,13 @@
 @import './shared.scss';
 
+// Preview positioning
+$preview-max-width: 960px;
+$preview-right-margin: 24px;
+$preview-left-sidebar-reduced: calc( 30% + #{$wp-org-sidebar-reduced} );
+$preview-left-sidebar-full: calc( 30% + #{$wp-org-sidebar-full} );
+
+$template-large-preview-title-height: 120px;
+
 // Template Selector Preview
 .template-selector-preview {
 	@media screen and ( max-width: 659px ) {
@@ -178,5 +186,3 @@ body:not( .is-fullscreen-mode ) {
 		height: 100%;
 	}
 }
-
-$template-large-preview-title-height: 120px;
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
index 9c26c6d90c2752..81b1c7f2bac548 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
@@ -1,3 +1,6 @@
+$wp-org-sidebar-reduced: 36px;
+$wp-org-sidebar-full: 160px;
+
 $template-selector-border-color: #e2e4e7;
 $template-selector-border-color-selected: #555d66;
 $template-selector-border-color-active: #00a0d2;
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index 903f9467479ae3..b0bce87555ee50 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -1,14 +1,5 @@
 @import '../components/template-selector/shared.scss';
 
-$wp-org-sidebar-reduced: 36px;
-$wp-org-sidebar-full: 160px;
-
-// Preview positioning
-$preview-max-width: 960px;
-$preview-right-margin: 24px;
-$preview-left-sidebar-reduced: calc( 30% + #{$wp-org-sidebar-reduced} );
-$preview-left-sidebar-full: calc( 30% + #{$wp-org-sidebar-full} );
-
 // Modal Overlay
 .page-template-modal-screen-overlay {
 	animation: none;

From c2bbed82c7afebfc206d38d34361ebfa59a173d8 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 14:23:40 +0600
Subject: [PATCH 04/11] Fix a path

---
 .../components/template-selector/test/preview.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js
index 38006daa714dc6..18bc664171ae90 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/preview.js
@@ -3,7 +3,7 @@
  */
 import { render } from '@testing-library/react';
 import { blocksFixture } from './helpers/templates-blocks-helpers';
-import TemplateSelectorPreview from '../template-selector-preview';
+import TemplateSelectorPreview from '../preview';
 
 // Mock the "pass through" version of the `BlockPreview` component
 // See `components/block-preview.js`

From b73066c362874a762cb9e98f82f00594bd356f84 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 14:27:07 +0600
Subject: [PATCH 05/11] Update snapshots

---
 .../{template-selector-control-test.js.snap => index.js.snap}     | 0
 .../{template-selector-preview-test.js.snap => preview.js.snap}   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/{template-selector-control-test.js.snap => index.js.snap} (100%)
 rename apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/{template-selector-preview-test.js.snap => preview.js.snap} (100%)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-control-test.js.snap b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/index.js.snap
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-control-test.js.snap
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/index.js.snap
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/preview.js.snap
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
rename to apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/test/__snapshots__/preview.js.snap

From f4adda3a7abc69779004e9a64230865490109b6f Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 16:16:37 +0600
Subject: [PATCH 06/11] Use variables from @wordpress/base-styles

---
 .../components/template-selector/preview.scss       | 13 +++++++------
 .../components/template-selector/shared.scss        |  3 ---
 .../components/template-selector/style.scss         |  1 +
 .../styles/starter-page-templates-editor.scss       |  8 ++++----
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
index cc673e7c604e86..2e4f512c000cd2 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
@@ -1,10 +1,11 @@
+@import '~@wordpress/base-styles/variables';
 @import './shared.scss';
 
 // Preview positioning
 $preview-max-width: 960px;
 $preview-right-margin: 24px;
-$preview-left-sidebar-reduced: calc( 30% + #{$wp-org-sidebar-reduced} );
-$preview-left-sidebar-full: calc( 30% + #{$wp-org-sidebar-full} );
+$preview-left-sidebar-reduced: calc( 30% + #{$admin-sidebar-width-collapsed} );
+$preview-left-sidebar-full: calc( 30% + #{$admin-sidebar-width} );
 
 $template-large-preview-title-height: 120px;
 
@@ -95,19 +96,19 @@ $template-large-preview-title-height: 120px;
 body:not( .is-fullscreen-mode ) {
 	.template-selector-preview {
 		@media screen and ( min-width: 783px ) {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
+			width: calc( 70% - #{$admin-sidebar-width-collapsed + ( 24px * 2 )} );
 		}
 
 		@media screen and ( min-width: 961px ) {
-			width: calc( 70% - #{$wp-org-sidebar-full} );
+			width: calc( 70% - #{$admin-sidebar-width} );
 		}
 	}
 	@media screen and ( min-width: 783px ) {
 		&.folded .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
+			width: calc( 70% - #{$admin-sidebar-width-collapsed + ( 24px * 2 )} );
 		}
 		&:not( .folded ):not( .auto-fold ) .template-selector-preview {
-			width: calc( 70% - #{$wp-org-sidebar-full} );
+			width: calc( 70% - #{$admin-sidebar-width} );
 		}
 	}
 }
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
index 81b1c7f2bac548..9c26c6d90c2752 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
@@ -1,6 +1,3 @@
-$wp-org-sidebar-reduced: 36px;
-$wp-org-sidebar-full: 160px;
-
 $template-selector-border-color: #e2e4e7;
 $template-selector-border-color-selected: #555d66;
 $template-selector-border-color-active: #00a0d2;
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
index 423c390890c402..7c3a1ec4b6b2a0 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
@@ -1,3 +1,4 @@
+@import '~@wordpress/base-styles/variables';
 @import './shared.scss';
 
 .components-base-control.template-selector-control {
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index b0bce87555ee50..bf35008fc3a390 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -10,19 +10,19 @@
 body:not( .is-fullscreen-mode ) {
 	.page-template-modal-screen-overlay {
 		@media screen and ( min-width: 783px ) {
-			left: $wp-org-sidebar-reduced;
+			left: $admin-sidebar-width-collapsed;
 		}
 
 		@media screen and ( min-width: 961px ) {
-			left: $wp-org-sidebar-full;
+			left: $admin-sidebar-width;
 		}
 	}
 	@media screen and ( min-width: 783px ) {
 		&.folded .page-template-modal-screen-overlay {
-			left: $wp-org-sidebar-reduced;
+			left: $admin-sidebar-width-collapsed;
 		}
 		&:not( .folded ):not( .auto-fold ) .page-template-modal-screen-overlay {
-			left: $wp-org-sidebar-full;
+			left: $admin-sidebar-width;
 		}
 	}
 }

From ba960df65b84367bb0133d6bd95d5c79fb33e252 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 16:18:31 +0600
Subject: [PATCH 07/11] Have FSE depend on @wordpress/base-styles

---
 apps/full-site-editing/package-lock.json | 137 ++++++++++++-----------
 apps/full-site-editing/package.json      |   1 +
 2 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/apps/full-site-editing/package-lock.json b/apps/full-site-editing/package-lock.json
index 76c91ccdeb1f94..18fd666cf873c0 100644
--- a/apps/full-site-editing/package-lock.json
+++ b/apps/full-site-editing/package-lock.json
@@ -2716,6 +2716,11 @@
 				"core-js": "^3.1.4"
 			}
 		},
+		"@wordpress/base-styles": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.0.0.tgz",
+			"integrity": "sha512-Cfq3jlDqOSeclqT8aFgY9SdnJlKu0gZFyGtXVfHc2xCYJtkK9Xw4zW2u4RTtGuaKKm4RhgFhls+NaSVFguOIrQ=="
+		},
 		"@wordpress/browserslist-config": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.6.0.tgz",
@@ -6786,28 +6791,28 @@
 			"dependencies": {
 				"abbrev": {
 					"version": "1.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
 					"dev": true,
 					"optional": true
 				},
 				"ansi-regex": {
 					"version": "2.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
 					"dev": true,
 					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
 					"dev": true,
 					"optional": true
 				},
 				"are-we-there-yet": {
 					"version": "1.1.5",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
 					"dev": true,
 					"optional": true,
@@ -6818,14 +6823,14 @@
 				},
 				"balanced-match": {
 					"version": "1.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
 					"dev": true,
 					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 					"dev": true,
 					"optional": true,
@@ -6836,42 +6841,42 @@
 				},
 				"chownr": {
 					"version": "1.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
 					"dev": true,
 					"optional": true
 				},
 				"code-point-at": {
 					"version": "1.1.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
 					"dev": true,
 					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
 					"dev": true,
 					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
 					"dev": true,
 					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
 					"dev": true,
 					"optional": true
 				},
 				"debug": {
 					"version": "4.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
 					"dev": true,
 					"optional": true,
@@ -6881,28 +6886,28 @@
 				},
 				"deep-extend": {
 					"version": "0.6.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
 					"dev": true,
 					"optional": true
 				},
 				"delegates": {
 					"version": "1.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
 					"dev": true,
 					"optional": true
 				},
 				"detect-libc": {
 					"version": "1.0.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
 					"dev": true,
 					"optional": true
 				},
 				"fs-minipass": {
 					"version": "1.2.5",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
 					"dev": true,
 					"optional": true,
@@ -6912,14 +6917,14 @@
 				},
 				"fs.realpath": {
 					"version": "1.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
 					"dev": true,
 					"optional": true
 				},
 				"gauge": {
 					"version": "2.7.4",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
 					"dev": true,
 					"optional": true,
@@ -6936,7 +6941,7 @@
 				},
 				"glob": {
 					"version": "7.1.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
 					"dev": true,
 					"optional": true,
@@ -6951,14 +6956,14 @@
 				},
 				"has-unicode": {
 					"version": "2.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
 					"dev": true,
 					"optional": true
 				},
 				"iconv-lite": {
 					"version": "0.4.24",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
 					"dev": true,
 					"optional": true,
@@ -6968,7 +6973,7 @@
 				},
 				"ignore-walk": {
 					"version": "3.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
 					"dev": true,
 					"optional": true,
@@ -6978,7 +6983,7 @@
 				},
 				"inflight": {
 					"version": "1.0.6",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
 					"dev": true,
 					"optional": true,
@@ -6989,21 +6994,21 @@
 				},
 				"inherits": {
 					"version": "2.0.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
 					"dev": true,
 					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
 					"dev": true,
 					"optional": true
 				},
 				"is-fullwidth-code-point": {
 					"version": "1.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
 					"dev": true,
 					"optional": true,
@@ -7013,14 +7018,14 @@
 				},
 				"isarray": {
 					"version": "1.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
 					"dev": true,
 					"optional": true
 				},
 				"minimatch": {
 					"version": "3.0.4",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
 					"dev": true,
 					"optional": true,
@@ -7030,14 +7035,14 @@
 				},
 				"minimist": {
 					"version": "0.0.8",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
 					"dev": true,
 					"optional": true
 				},
 				"minipass": {
 					"version": "2.3.5",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
 					"dev": true,
 					"optional": true,
@@ -7048,7 +7053,7 @@
 				},
 				"minizlib": {
 					"version": "1.2.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
 					"dev": true,
 					"optional": true,
@@ -7058,7 +7063,7 @@
 				},
 				"mkdirp": {
 					"version": "0.5.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
 					"dev": true,
 					"optional": true,
@@ -7068,14 +7073,14 @@
 				},
 				"ms": {
 					"version": "2.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
 					"dev": true,
 					"optional": true
 				},
 				"needle": {
 					"version": "2.3.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
 					"dev": true,
 					"optional": true,
@@ -7087,7 +7092,7 @@
 				},
 				"node-pre-gyp": {
 					"version": "0.12.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
 					"dev": true,
 					"optional": true,
@@ -7106,7 +7111,7 @@
 				},
 				"nopt": {
 					"version": "4.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
 					"dev": true,
 					"optional": true,
@@ -7117,14 +7122,14 @@
 				},
 				"npm-bundled": {
 					"version": "1.0.6",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
 					"dev": true,
 					"optional": true
 				},
 				"npm-packlist": {
 					"version": "1.4.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
 					"dev": true,
 					"optional": true,
@@ -7135,7 +7140,7 @@
 				},
 				"npmlog": {
 					"version": "4.1.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
 					"dev": true,
 					"optional": true,
@@ -7148,21 +7153,21 @@
 				},
 				"number-is-nan": {
 					"version": "1.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
 					"dev": true,
 					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
 					"dev": true,
 					"optional": true
 				},
 				"once": {
 					"version": "1.4.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 					"dev": true,
 					"optional": true,
@@ -7172,21 +7177,21 @@
 				},
 				"os-homedir": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
 					"dev": true,
 					"optional": true
 				},
 				"os-tmpdir": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
 					"dev": true,
 					"optional": true
 				},
 				"osenv": {
 					"version": "0.1.5",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
 					"dev": true,
 					"optional": true,
@@ -7197,21 +7202,21 @@
 				},
 				"path-is-absolute": {
 					"version": "1.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
 					"dev": true,
 					"optional": true
 				},
 				"process-nextick-args": {
 					"version": "2.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
 					"dev": true,
 					"optional": true
 				},
 				"rc": {
 					"version": "1.2.8",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
 					"dev": true,
 					"optional": true,
@@ -7224,7 +7229,7 @@
 					"dependencies": {
 						"minimist": {
 							"version": "1.2.0",
-							"resolved": false,
+							"resolved": "",
 							"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
 							"dev": true,
 							"optional": true
@@ -7233,7 +7238,7 @@
 				},
 				"readable-stream": {
 					"version": "2.3.6",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
 					"dev": true,
 					"optional": true,
@@ -7249,7 +7254,7 @@
 				},
 				"rimraf": {
 					"version": "2.6.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
 					"dev": true,
 					"optional": true,
@@ -7259,49 +7264,49 @@
 				},
 				"safe-buffer": {
 					"version": "5.1.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
 					"dev": true,
 					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
 					"dev": true,
 					"optional": true
 				},
 				"sax": {
 					"version": "1.2.4",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
 					"dev": true,
 					"optional": true
 				},
 				"semver": {
 					"version": "5.7.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
 					"dev": true,
 					"optional": true
 				},
 				"set-blocking": {
 					"version": "2.0.0",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
 					"dev": true,
 					"optional": true
 				},
 				"signal-exit": {
 					"version": "3.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
 					"dev": true,
 					"optional": true
 				},
 				"string-width": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
 					"dev": true,
 					"optional": true,
@@ -7313,7 +7318,7 @@
 				},
 				"string_decoder": {
 					"version": "1.1.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
 					"dev": true,
 					"optional": true,
@@ -7323,7 +7328,7 @@
 				},
 				"strip-ansi": {
 					"version": "3.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
 					"dev": true,
 					"optional": true,
@@ -7333,14 +7338,14 @@
 				},
 				"strip-json-comments": {
 					"version": "2.0.1",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
 					"dev": true,
 					"optional": true
 				},
 				"tar": {
 					"version": "4.4.8",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
 					"dev": true,
 					"optional": true,
@@ -7356,14 +7361,14 @@
 				},
 				"util-deprecate": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
 					"dev": true,
 					"optional": true
 				},
 				"wide-align": {
 					"version": "1.1.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
 					"dev": true,
 					"optional": true,
@@ -7373,14 +7378,14 @@
 				},
 				"wrappy": {
 					"version": "1.0.2",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
 					"dev": true,
 					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.3",
-					"resolved": false,
+					"resolved": "",
 					"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
 					"dev": true,
 					"optional": true
diff --git a/apps/full-site-editing/package.json b/apps/full-site-editing/package.json
index b0bc1937ace950..a501804366de79 100644
--- a/apps/full-site-editing/package.json
+++ b/apps/full-site-editing/package.json
@@ -44,6 +44,7 @@
 		"sync:blog-posts-block": "./bin/sync-blog-posts-block.sh"
 	},
 	"dependencies": {
+		"@wordpress/base-styles": "1.0.0",
 		"classnames": "2.2.6"
 	},
 	"devDependencies": {

From 7b3639e81339965489302a820892d4325bab88ea Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 16:25:29 +0600
Subject: [PATCH 08/11] Fix import

---
 .../styles/starter-page-templates-editor.scss                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index bf35008fc3a390..e398be5232f512 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -1,4 +1,4 @@
-@import '../components/template-selector/shared.scss';
+@import '~@wordpress/base-styles/variables';
 
 // Modal Overlay
 .page-template-modal-screen-overlay {

From 40b73e877dc9bf00a071c9655a94680f08ba7b5a Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 16:54:22 +0600
Subject: [PATCH 09/11] Aaand add back other needed import

---
 .../styles/starter-page-templates-editor.scss                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index e398be5232f512..3067d939abf811 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -1,4 +1,5 @@
 @import '~@wordpress/base-styles/variables';
+@import '../components/template-selector/shared.scss';
 
 // Modal Overlay
 .page-template-modal-screen-overlay {

From be80333f7829eb7be61a206e0a3f99b017261c0a Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 16:54:41 +0600
Subject: [PATCH 10/11] Add workaround

---
 .../styles/starter-page-templates-editor.scss                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index 3067d939abf811..36c2884d3c2379 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -1,3 +1,4 @@
+@import '~@wordpress/base-styles/colors'; // @TODO: Remove once https://github.com/WordPress/gutenberg/pull/19159 is merged and released.
 @import '~@wordpress/base-styles/variables';
 @import '../components/template-selector/shared.scss';
 

From 36920fc0a0a4fd4a3329335105e26872c79a2641 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 16 Dec 2019 18:13:54 +0600
Subject: [PATCH 11/11] Moar workaround

---
 .../components/template-selector/preview.scss                    | 1 +
 .../page-template-modal/components/template-selector/style.scss  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
index 2e4f512c000cd2..a1c1d544df9149 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
@@ -1,3 +1,4 @@
+@import '~@wordpress/base-styles/colors'; // @TODO: Remove once https://github.com/WordPress/gutenberg/pull/19159 is merged and released.
 @import '~@wordpress/base-styles/variables';
 @import './shared.scss';
 
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
index 7c3a1ec4b6b2a0..5a71bcfbc4a162 100644
--- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
@@ -1,3 +1,4 @@
+@import '~@wordpress/base-styles/colors'; // @TODO: Remove once https://github.com/WordPress/gutenberg/pull/19159 is merged and released.
 @import '~@wordpress/base-styles/variables';
 @import './shared.scss';