Change the post template visually

WordPress · Jan 21, 2021 · d058865 · d058865
1 parent 59c4e24
commit d058865
Show file tree

Hide file tree

Showing 4 changed files with 239 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -15,9 +15,11 @@ import { memo, useMemo } from '@wordpress/element';
 import BlockEditorProvider from '../provider';
 import LiveBlockPreview from './live';
 import AutoHeightBlockPreview from './auto';
+import { BlockContextProvider } from '../block-context';
 
 export function BlockPreview( {
 	blocks,
+	context = {},
 	__experimentalPadding = 0,
 	viewportWidth = 1200,
 	__experimentalLive = false,
@@ -32,16 +34,18 @@ export function BlockPreview( {
 		return null;
 	}
 	return (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			{ __experimentalLive ? (
-				<LiveBlockPreview onClick={ __experimentalOnClick } />
-			) : (
-				<AutoHeightBlockPreview
-					viewportWidth={ viewportWidth }
-					__experimentalPadding={ __experimentalPadding }
-				/>
-			) }
-		</BlockEditorProvider>
+		<BlockContextProvider value={ context }>
+			<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+				{ __experimentalLive ? (
+					<LiveBlockPreview onClick={ __experimentalOnClick } />
+				) : (
+					<AutoHeightBlockPreview
+						viewportWidth={ viewportWidth }
+						__experimentalPadding={ __experimentalPadding }
+					/>
+				) }
+			</BlockEditorProvider>
+		</BlockContextProvider>
 	);
 }
 

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
@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { BlockPreview } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+function TemplateItem( { slug, name } ) {
+	const { isResolved, template, postId, postType } = useSelect(
+		( select ) => {
+			const {
+				getCurrentTheme,
+				getEntityRecord,
+				hasFinishedResolution,
+			} = select( coreStore );
+			const { getCurrentPostId, getCurrentPostType } = select(
+				editorStore
+			);
+			const theme = getCurrentTheme();
+			const templateId = theme ? theme.stylesheet + '//' + slug : null;
+			const getEntityArgs = [ 'postType', 'wp_template', templateId ];
+			const entityRecord = templateId
+				? getEntityRecord( ...getEntityArgs )
+				: null;
+			const hasResolvedEntity = templateId
+				? hasFinishedResolution( 'getEntityRecord', getEntityArgs )
+				: false;
+
+			return {
+				template: entityRecord,
+				isResolved: hasResolvedEntity,
+				postId: getCurrentPostId(),
+				postType: getCurrentPostType(),
+			};
+		},
+		[ slug ]
+	);
+
+	const { editPost } = useDispatch( editorStore );
+
+	const blocks = useMemo( () => {
+		if ( ! template?.content?.raw ) {
+			return [];
+		}
+		return parse( template.content.raw );
+	}, [ template ] );
+
+	const defaultBlockContext = useMemo( () => {
+		return { postId, postType };
+	}, [ postId, postType ] );
+
+	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>
+		)
+	);
+}
+
+function TemplateChangeModal( { onClose } ) {
+	const { availableTemplates } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { availableTemplates: _templates } = getEditorSettings();
+		return {
+			availableTemplates: _templates,
+		};
+	}, [] );
+
+	return (
+		<Modal
+			title={ __( 'Change Template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+			isFullScreen
+		>
+			<div className="edit-post-template-change-modal__items">
+				{ map( availableTemplates, ( name, slug ) => {
+					return (
+						<TemplateItem
+							key={ slug }
+							slug={ slug }
+							name={ name }
+						/>
+					);
+				} ) }
+			</div>
+		</Modal>
+	);
+}
+
+export default TemplateChangeModal;
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -13,6 +13,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import TemplateChangeModal from './change-modal';
 
 function PostTemplate() {
 	const { template, isEditing, isFSETheme } = useSelect( ( select ) => {
@@ -44,51 +45,71 @@ function PostTemplate() {
 	}, [] );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const [ isChangingTemplate, setIsChangingTemplate ] = useState( false );
 
 	if ( ! isFSETheme || ! template ) {
 		return null;
 	}
 
 	return (
-		<PanelRow className="edit-post-post-template">
-			<span>{ __( 'Template' ) }</span>
-			{ ! isEditing && (
-				<span className="edit-post-post-template__value">
-					{ createInterpolateElement(
-						sprintf(
-							/* translators: 1: Template name. */
-							__( '%s (<a>Edit</a>)' ),
-							template.slug
-						),
-						{
-							a: (
-								<Button
-									isLink
-									onClick={ () => {
-										setIsEditingTemplate( true );
-										createSuccessNotice(
-											__(
-												'Editing template. Changes made here affect all posts and pages that use the template.'
-											),
-											{
-												type: 'snackbar',
-											}
-										);
-									} }
-								>
-									{ __( 'Edit' ) }
-								</Button>
+		<>
+			<PanelRow className="edit-post-post-template">
+				<span>{ __( 'Template' ) }</span>
+				{ ! isEditing && (
+					<span className="edit-post-post-template__value">
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: 1: Template name. */
+								__(
+									'%s (<edit>Edit</edit> | <change>Change</change>)'
+								),
+								template.slug
 							),
-						}
-					) }
-				</span>
+							{
+								edit: (
+									<Button
+										isLink
+										onClick={ () => {
+											setIsEditingTemplate( true );
+											createSuccessNotice(
+												__(
+													'Editing template. Changes made here affect all posts and pages that use the template.'
+												),
+												{
+													type: 'snackbar',
+												}
+											);
+										} }
+									>
+										{ __( 'Edit' ) }
+									</Button>
+								),
+								change: (
+									<Button
+										isLink
+										onClick={ () => {
+											setIsChangingTemplate( true );
+										} }
+									>
+										{ __( 'Change' ) }
+									</Button>
+								),
+							}
+						) }
+					</span>
+				) }
+				{ isEditing && (
+					<span className="edit-post-post-template__value">
+						{ template.slug }
+					</span>
+				) }
+			</PanelRow>
+			{ isChangingTemplate && (
+				<TemplateChangeModal
+					onClose={ () => setIsChangingTemplate( false ) }
+				/>
 			) }
-			{ isEditing && (
-				<span className="edit-post-post-template__value">
-					{ template.slug }
-				</span>
-			) }
-		</PanelRow>
+		</>
 	);
 }
 

diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
@@ -11,3 +11,43 @@
 .edit-post-post-template__value {
 	padding-left: 6px;
 }
+
+.edit-post-template-change-modal__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 100px);
+}
+
+.edit-post-template-change-modal__item {
+
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+	margin-top: $grid-unit-20;
+	transition: all 0.05s ease-in-out;
+	position: relative;
+	border: $border-width solid transparent;
+
+	&:hover {
+		border: $border-width solid var(--wp-admin-theme-color);
+	}
+
+	&:focus {
+		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;
+	font-size: 12px;
+	text-align: center;
+}