Add "show template" to preview dropdown. (WordPress#66514)

Co-authored-by: tellthemachines <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: paaljoachim <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: stokesman <[email protected]>
karthick-murugan · Nov 5, 2024 · 630ceb4 · 630ceb4
1 parent 25849be
commit 630ceb4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -15,7 +15,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
@@ -59,12 +59,14 @@ export default function DocumentBar( props ) {
 		isNotFound,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
+		isTemplatePreview,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostType,
 			getCurrentPostId,
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
+			getRenderingMode,
 		} = select( editorStore );
 		const {
 			getEditedEntityRecord,
@@ -96,6 +98,7 @@ export default function DocumentBar( props ) {
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
+			isTemplatePreview: getRenderingMode() === 'template-locked',
 		};
 	}, [] );
 
@@ -146,6 +149,12 @@ export default function DocumentBar( props ) {
 					</MotionButton>
 				) }
 			</AnimatePresence>
+			{ ! isTemplate && isTemplatePreview && (
+				<BlockIcon
+					icon={ layout }
+					className="editor-document-bar__icon-layout"
+				/>
+			) }
 			{ isNotFound ? (
 				<Text>{ __( 'Document not found' ) }</Text>
 			) : (

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
@@ -102,3 +102,16 @@
 		background-color: transparent;
 	}
 }
+
+.editor-document-bar__icon-layout.editor-document-bar__icon-layout {
+	position: absolute;
+	margin-left: $grid-unit-15;
+	display: none;
+	pointer-events: none;
+	svg {
+		fill: $gray-600;
+	}
+	@include break-small {
+		display: flex;
+	}
+}
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { desktop, mobile, tablet, external } from '@wordpress/icons';
+import { desktop, mobile, tablet, external, check } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -31,21 +31,32 @@ import PostPreviewButton from '../post-preview-button';
 import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getEntityRecord, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
-	const { setDeviceType } = useDispatch( editorStore );
+	const {
+		deviceType,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+		isTemplateHidden,
+		templateId,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType, getCurrentTemplateId } =
+			select( editorStore );
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -142,6 +153,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							</MenuItem>
 						</MenuGroup>
 					) }
+					{ ! isTemplate && !! templateId && (
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
+								onClick={ () => {
+									setRenderingMode(
+										isTemplateHidden
+											? 'template-locked'
+											: 'post-only'
+									);
+								} }
+							>
+								{ __( 'Show template' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
 					{ isViewable && (
 						<MenuGroup>
 							<PostPreviewButton