spt: preview styles improvements

Automattic · Oct 3, 2019 · 51555a0 · 51555a0
1 parent 3dae492
commit 51555a0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/...ng-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js b/...ng-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js
@@ -11,23 +11,26 @@
  */
 /* eslint-disable import/no-extraneous-dependencies */
 import { BlockPreview } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
 /* eslint-enable import/no-extraneous-dependencies */
 
 const BlockTemplatePreview = ( { blocks = [], viewportWidth } ) => {
 	return (
 		/* eslint-disable wpcalypso/jsx-classname-namespace */
-		<div className="edit-post-visual-editor">
-			<div className="editor-styles-wrapper">
-				<div className="editor-writing-flow">
-					<div className="template-selector-item__preview-wrap">
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ viewportWidth }
-							__experimentalScalingDelay={ 0 }
-						/>
+		<div className="template-selector-item__preview-wrap">
+			<Disabled>
+				<div className="editor-styles-wrapper">
+					<div className="edit-post-visual-editor">
+						<div className="editor-writing-flow">
+							<BlockPreview
+								blocks={ blocks }
+								viewportWidth={ viewportWidth }
+								__experimentalScalingDelay={ 0 }
+							/>
+						</div>
 					</div>
 				</div>
-			</div>
+			</Disabled>
 		</div>
 		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	);

diff --git a/...ng-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js b/...ng-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Disabled, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 /* eslint-enable import/no-extraneous-dependencies */
 
@@ -68,11 +68,7 @@ const TemplateSelectorItem = props => {
 		/* eslint-enable wpcalypso/jsx-classname-namespace */
 
 		if ( useDynamicPreview ) {
-			return (
-				<Disabled>
-					<BlockPreview blocks={ getBlocksByTemplateSlug( value ) } viewportWidth={ 960 } />
-				</Disabled>
-			);
+			return <BlockPreview blocks={ getBlocksByTemplateSlug( value ) } viewportWidth={ 960 } />;
 		}
 
 		return (
@@ -105,6 +101,7 @@ const TemplateSelectorItem = props => {
 	};
 
 	return (
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
 		<button
 			type="button"
 			className={ classnames( 'template-selector-item__label', {
@@ -117,9 +114,10 @@ const TemplateSelectorItem = props => {
 		>
 			{ renderInnerPreview() }
 			<span className="template-selector-item__template-title" id={ labelId }>
-				{ label }
+				<div className="editor-styles-wrapper">{ label }</div>
 			</span>
 		</button>
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	);
 };
 

diff --git a/...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -155,6 +155,11 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 			height: 40px;
 			line-height: 40px;
 			background-color: #fff;
+			.editor-styles-wrapper {
+				font-size: 14px;
+				height: 40px;
+				line-height: 40px;
+			}
 		}
 
 		&:hover,
@@ -174,7 +179,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		width: 100%;
 		display: block;
 		margin: 0 auto;
-		background: $template-selector-empty-background;
+		//background: $template-selector-empty-background;
 		border-radius: 0;
 		overflow: hidden;
 		height: 0;
@@ -183,6 +188,11 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		position: relative;
 		pointer-events: none;
 
+		.edit-post-visual-editor {
+			padding-top: 100%;
+			margin-top: -100%;
+		}
+
 		@media screen and ( max-width: 659px ) {
 			padding-top: 120%;
 		}
@@ -419,3 +429,10 @@ body:not( .is-fullscreen-mode ) .template-selector-preview {
 	position: absolute;
 	top: 0;
 }
+//
+//.template-selector-control__template {
+//	.editor-styles-wrapper .editor-writing-flow {
+//		max-width: 80%;
+//		margin: 0 10%;
+//	}
+//}