Correctly style the template switching modal

WordPress · Jan 28, 2021 · e48c1ee · e48c1ee
1 parent 8ce8a8f
commit e48c1ee
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 35 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-template/change-modal.js b/packages/edit-post/src/components/sidebar/post-template/change-modal.js
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { map } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, Spinner } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -16,7 +17,7 @@ import { useMemo } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
-function TemplateItem( { slug, name } ) {
+function TemplatePreview( { slug } ) {
 	const { isResolved, template, postId, postType } = useSelect(
 		( select ) => {
 			const {
@@ -47,8 +48,6 @@ function TemplateItem( { slug, name } ) {
 		[ slug ]
 	);
 
-	const { editPost } = useDispatch( editorStore );
-
 	const blocks = useMemo( () => {
 		if ( ! template?.content?.raw ) {
 			return [];
@@ -60,49 +59,63 @@ function TemplateItem( { slug, name } ) {
 		return { postId, postType };
 	}, [ postId, postType ] );
 
+	return ! isResolved ? (
+		<Spinner />
+	) : (
+		<BlockPreview blocks={ blocks } context={ defaultBlockContext } />
+	);
+}
+
+function TemplateItem( { slug, name, isSelected } ) {
+	const { editPost } = useDispatch( editorStore );
+
 	const onSelect = () => {
 		editPost( {
 			template: slug,
 		} );
 	};
 
 	return (
-		isResolved && (
-			<div
-				className="edit-post-template-change-modal__item"
-				role="button"
-				tabIndex={ 0 }
-				aria-label={ name }
-				onClick={ onSelect }
-				onKeyDown={ ( event ) => {
-					if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-						onSelect();
-					}
-				} }
-			>
-				<BlockPreview
-					blocks={ blocks }
-					context={ defaultBlockContext }
-				/>
-				<div className="edit-post-template-change-modal__item-title">
-					{ name }
-				</div>
+		<div
+			className={ classnames( 'edit-post-template-change-modal__item', {
+				'is-selected': isSelected,
+				'is-default': ! slug,
+			} ) }
+			role="button"
+			tabIndex={ 0 }
+			aria-label={ name }
+			onClick={ onSelect }
+			onKeyDown={ ( event ) => {
+				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+					onSelect();
+				}
+			} }
+		>
+			<div className="edit-post-template-change-modal__item-preview">
+				{ slug && <TemplatePreview slug={ slug } /> }
+			</div>
+			<div className="edit-post-template-change-modal__item-title">
+				{ name }
 			</div>
-		)
+		</div>
 	);
 }
 
 function TemplateChangeModal( { onClose } ) {
-	const { availableTemplates } = useSelect( ( select ) => {
-		const { getEditorSettings } = select( editorStore );
+	const { availableTemplates, selectedTemplate } = useSelect( ( select ) => {
+		const { getEditorSettings, getEditedPostAttribute } = select(
+			editorStore
+		);
 		const { availableTemplates: _templates } = getEditorSettings();
 		return {
+			selectedTemplate: getEditedPostAttribute( 'template' ),
 			availableTemplates: _templates,
 		};
 	}, [] );
 
 	return (
 		<Modal
+			className="edit-post-post-template-modal"
 			title={ __( 'Change Template' ) }
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
@@ -115,6 +128,10 @@ function TemplateChangeModal( { onClose } ) {
 							key={ slug }
 							slug={ slug }
 							name={ name }
+							isSelected={
+								slug === selectedTemplate ||
+								( ! slug && ! selectedTemplate )
+							}
 						/>
 					);
 				} ) }

diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
@@ -8,17 +8,25 @@
 	}
 }
 
+.edit-post-post-template-modal {
+	background-color: $gray-100;
+
+	@include break-small {
+		width: 80vw;
+	}
+}
+
 .edit-post-post-template__value {
 	padding-left: 6px;
 }
 
 .edit-post-template-change-modal__items {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, 100px);
+	grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
+	grid-gap: $grid-unit-20;
 }
 
 .edit-post-template-change-modal__item {
-
 	border-radius: $radius-block-ui;
 	cursor: pointer;
 	margin-top: $grid-unit-20;
@@ -30,24 +38,37 @@
 		border: $border-width solid var(--wp-admin-theme-color);
 	}
 
-	&:focus {
+	&:focus,
+	&.is-selected {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
 
-	&.is-placeholder {
-		min-height: 100px;
-	}
-
 	&[draggable="true"] .block-editor-block-preview__container {
 		cursor: grab;
 	}
 }
 
 .edit-post-template-change-modal__item-title {
-	padding: $grid-unit-05;
+	padding: $grid-unit-10 0;
 	font-size: 12px;
 	text-align: center;
+	font-weight: 500;
+}
+
+.edit-post-template-change-modal__item-preview {
+	overflow: hidden;
+	box-shadow: $shadow-popover;
+	background-color: $white;
+	height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.edit-post-template-change-modal__item.is-default & {
+		opacity: 0.4;
+		background: repeating-linear-gradient(-45deg, $gray-400, $gray-400 10px, $white 10px, $white 50px);
+	}
 }