@wordpress/editor 14.10.0 → 14.12.0

package/src/components/post-actions/index.js

@@ -18,7 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 
-const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
 export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
@@ -54,7 +54,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenuV2
+		<Menu
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -79,7 +79,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenuV2>
+		</Menu>
 	);
 }
 
@@ -93,12 +93,9 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuV2.Item
-			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
-		>
-			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
-		</DropdownMenuV2.Item>
+		<Menu.Item onClick={ onClick } hideOnClick={ ! action.RenderModal }>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
 	);
 }
 
@@ -145,7 +142,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuV2.Group>
+		<Menu.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -167,6 +164,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuV2.Group>
+		</Menu.Group>
 	);
 }

package/src/components/post-author/panel.js

@@ -25,8 +25,10 @@ function PostAuthorToggle( { isOpen, onClick } ) {
 			className="editor-post-author__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			aria-label={
+				// translators: %s: Author name.
+				sprintf( __( 'Change author: %s' ), authorName )
+			}
 			onClick={ onClick }
 		>
 			{ authorName }

package/src/components/post-card-panel/index.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -22,27 +18,20 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 export default function PostCardPanel( {
 	postType,
 	postId,
 	onActionPerformed,
 } ) {
-	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
+	const { title, icon } = useSelect(
 		( select ) => {
 			const { __experimentalGetTemplateInfo } = select( editorStore );
-			const { canUser, getEditedEntityRecord } = select( coreStore );
-			const siteSettings = canUser( 'read', {
-				kind: 'root',
-				name: 'site',
-			} )
-				? getEditedEntityRecord( 'root', 'site' )
-				: undefined;
+			const { getEditedEntityRecord } = select( coreStore );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -52,31 +41,18 @@ export default function PostCardPanel( {
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 					postType
 				) && __experimentalGetTemplateInfo( _record );
-			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
-				if ( PATTERN_POST_TYPE === postType ) {
-					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
-					const currentSyncStatus =
-						_record?.meta?.wp_pattern_sync_status === 'unsynced'
-							? 'unsynced'
-							: _record?.wp_pattern_sync_status;
-					_isSync = currentSyncStatus !== 'unsynced';
-				} else {
-					_isSync = true;
-				}
-			}
 			return {
 				title: _templateInfo?.title || _record?.title,
 				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
-				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === postId,
-				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
 		[ postId, postType ]
 	);
+
+	const pageTypeBadge = usePageTypeBadge();
+
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -84,12 +60,7 @@ export default function PostCardPanel( {
 				className="editor-post-card-panel__header"
 				align="flex-start"
 			>
-				<Icon
-					className={ clsx( 'editor-post-card-panel__icon', {
-						'is-sync': isSync,
-					} ) }
-					icon={ icon }
-				/>
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
 				<Text
 					numberOfLines={ 2 }
 					truncate
@@ -99,14 +70,9 @@ export default function PostCardPanel( {
 					lineHeight="20px"
 				>
 					{ title ? decodeEntities( title ) : __( 'No title' ) }
-					{ isFrontPage && (
-						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Homepage' ) }
-						</span>
-					) }
-					{ isPostsPage && (
+					{ pageTypeBadge && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Posts Page' ) }
+							{ pageTypeBadge }
 						</span>
 					) }
 				</Text>

package/src/components/post-card-panel/style.scss

@@ -34,17 +34,9 @@
 	}
 }
 
-.editor-post-card-panel__icon.is-sync {
-	fill: var(--wp-block-synced-color);
-
-	& + .editor-post-card-panel__title {
-		color: var(--wp-block-synced-color);
-	}
-}
-
 .editor-post-card-panel__title-badge {
 	background: $gray-100;
-	color: $gray-700;
+	color: $gray-800;
 	padding: 0 $grid-unit-05;
 	border-radius: $radius-small;
 	font-size: 12px;

package/src/components/post-content-information/index.js

@@ -70,7 +70,7 @@ export default function PostContentInformation() {
 		readingTime <= 1
 			? __( '1 minute' )
 			: sprintf(
-					// translators: %s: the number of minutes to read the post.
+					/* translators: %s: the number of minutes to read the post. */
 					_n( '%s minute', '%s minutes', readingTime ),
 					readingTime.toLocaleString()
 			  );

package/src/components/post-featured-image/index.js

@@ -121,6 +121,35 @@ function PostFeaturedImage( {
 		} );
 	}
 
+	/**
+	 * Generates the featured image alt text for this editing context.
+	 *
+	 * @param {Object} imageMedia                               The image media object.
+	 * @param {string} imageMedia.alt_text                      The alternative text of the image.
+	 * @param {Object} imageMedia.media_details                 The media details of the image.
+	 * @param {Object} imageMedia.media_details.sizes           The sizes of the image.
+	 * @param {Object} imageMedia.media_details.sizes.full      The full size details of the image.
+	 * @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
+	 * @param {string} imageMedia.slug                          The slug of the image.
+	 * @return {string} The featured image alt text.
+	 */
+	function getImageDescription( imageMedia ) {
+		if ( imageMedia.alt_text ) {
+			return sprintf(
+				// Translators: %s: The selected image alt text.
+				__( 'Current image: %s' ),
+				imageMedia.alt_text
+			);
+		}
+		return sprintf(
+			// Translators: %s: The selected image filename.
+			__(
+				'The current image has no alternative text. The file name is: %s'
+			),
+			imageMedia.media_details.sizes?.full?.file || imageMedia.slug
+		);
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -130,21 +159,7 @@ function PostFeaturedImage( {
 						id={ `editor-post-featured-image-${ featuredImageId }-describedby` }
 						className="hidden"
 					>
-						{ media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image alt text.
-								__( 'Current image: %s' ),
-								media.alt_text
-							) }
-						{ ! media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image filename.
-								__(
-									'The current image has no alternative text. The file name is: %s'
-								),
-								media.media_details.sizes?.full?.file ||
-									media.slug
-							) }
+						{ getImageDescription( media ) }
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
@@ -188,7 +203,7 @@ function PostFeaturedImage( {
 										<img
 											className="editor-post-featured-image__preview-image"
 											src={ mediaSourceUrl }
-											alt=""
+											alt={ getImageDescription( media ) }
 										/>
 									) }
 									{ isLoading && <Spinner /> }

package/src/components/post-featured-image/style.scss

@@ -41,8 +41,6 @@
 .editor-post-featured-image__preview {
 	width: 100%;
 	padding: 0;
-	transition: all 0.1s ease-out;
-	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
 	overflow: hidden; // Ensure the focus style properly encapsulates the image.
 	outline-offset: -#{$border-width};
@@ -66,6 +64,11 @@
 
 .editor-post-featured-image__toggle {
 	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
 }
 
 .editor-post-featured-image__actions {

package/src/components/post-last-revision/index.js

@@ -44,7 +44,7 @@ function PostLastRevision() {
 				icon={ backup }
 				iconPosition="right"
 				text={ sprintf(
-					/* translators: %s: number of revisions */
+					/* translators: %s: number of revisions. */
 					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }

package/src/components/post-schedule/label.js

@@ -48,7 +48,7 @@ export function getFullPostScheduleLabel( dateAttribute ) {
 
 	const timezoneAbbreviation = getTimezoneAbbreviation();
 	const formattedDate = dateI18n(
-		// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
+		// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
 		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
 		date
 	);

package/src/components/post-sticky/test/index.js

@@ -35,23 +35,23 @@ function setupUseSelectMock( { hasStickyAction, postType } ) {
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
 		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
 		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
-		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
-		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
+		expect( screen.getByText( 'Can Show Sticky' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-taxonomies/flat-term-selector.js

@@ -2,8 +2,12 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, withFilters } from '@wordpress/components';
+import { Fragment, useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	FormTokenField,
+	withFilters,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
@@ -53,6 +57,13 @@ const termNamesToIds = ( names, terms ) => {
 		.filter( ( id ) => id !== undefined );
 };
 
+const Wrapper = ( { children, __nextHasNoMarginBottom } ) =>
+	__nextHasNoMarginBottom ? (
+		<VStack spacing={ 4 }>{ children }</VStack>
+	) : (
+		<Fragment>{ children }</Fragment>
+	);
+
 /**
  * Renders a flat term selector component.
  *
@@ -289,7 +300,7 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 	);
 
 	return (
-		<>
+		<Wrapper __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }
@@ -306,7 +317,7 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</>
+		</Wrapper>
 	);
 }
 

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -310,7 +310,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		const defaultName =
 			slug === 'category' ? __( 'Category' ) : __( 'Term' );
 		const termAddedMessage = sprintf(
-			/* translators: %s: taxonomy name */
+			/* translators: %s: term name. */
 			_x( '%s added', 'term' ),
 			taxonomy?.labels?.singular_name ?? defaultName
 		);
@@ -341,7 +341,7 @@ export function HierarchicalTermSelector( { slug } ) {
 
 		const resultCount = getResultCount( newFilteredTermsTree );
 		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results */
+			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', resultCount ),
 			resultCount
 		);

package/src/components/post-template/swap-template-button.js

@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { parse } from '@wordpress/blocks';
-import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,12 +70,10 @@ function TemplatesList( { postType, onSelect } ) {
 			} ) ),
 		[ availableTemplates ]
 	);
-	const shownTemplates = useAsyncList( templatesAsPatterns );
 	return (
 		<BlockPatternsList
 			label={ __( 'Templates' ) }
 			blockPatterns={ templatesAsPatterns }
-			shownPatterns={ shownTemplates }
 			onClickPattern={ onSelect }
 		/>
 	);

package/src/components/post-transform-panel/index.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { serialize } from '@wordpress/blocks';
 
@@ -20,7 +19,6 @@ import {
 } from '../../store/constants';
 
 function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
 	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
 		return null;
 	}
@@ -29,7 +27,6 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 		<BlockPatternsList
 			label={ __( 'Templates' ) }
 			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
 			onClickPattern={ onSelect }
 			showTitlesAsTooltip
 		/>

package/src/components/post-url/index.js

@@ -76,7 +76,7 @@ export default function PostURL( { onClose } ) {
 		} );
 	} );
 	const postUrlSlugDescriptionId =
-		'editor-post-url__slug-descriotion-' + useInstanceId( PostURL );
+		'editor-post-url__slug-description-' + useInstanceId( PostURL );
 
 	return (
 		<div className="editor-post-url">

package/src/components/post-url/panel.js

@@ -93,8 +93,10 @@ function PostURLToggle( { isOpen, onClick } ) {
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
+			aria-label={
+				// translators: %s: Current post link.
+				sprintf( __( 'Change link: %s' ), decodedSlug )
+			}
 			onClick={ onClick }
 		>
 			<>{ decodedSlug }</>

package/src/components/preferences-modal/index.js

@@ -36,25 +36,40 @@ const {
 } = unlock( preferencesPrivateApis );
 
 export default function EditorPreferencesModal( { extraSections = {} } ) {
+	const isActive = useSelect( ( select ) => {
+		return select( interfaceStore ).isModalActive( 'editor/preferences' );
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	// Please wrap all contents inside PreferencesModalContents to prevent all
+	// hooks from executing when the modal is not open.
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalContents extraSections={ extraSections } />
+		</PreferencesModal>
+	);
+}
+
+function PreferencesModalContents( { extraSections = {} } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isActive, showBlockBreadcrumbsOption } = useSelect(
+	const showBlockBreadcrumbsOption = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { get } = select( preferencesStore );
-			const { isModalActive } = select( interfaceStore );
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
-			return {
-				showBlockBreadcrumbsOption:
-					! isDistractionFreeEnabled &&
-					isLargeViewport &&
-					isRichEditingEnabled,
-				isActive: isModalActive( 'editor/preferences' ),
-			};
+			return (
+				! isDistractionFreeEnabled &&
+				isLargeViewport &&
+				isRichEditingEnabled
+			);
 		},
 		[ isLargeViewport ]
 	);
-	const { closeModal } = useDispatch( interfaceStore );
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
@@ -330,13 +345,5 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 		]
 	);
 
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
-	);
+	return <PreferencesModalTabs sections={ sections } />;
 }

package/src/components/preferences-modal/test/index.js

@@ -19,7 +19,7 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	it( 'should not render when the modal is not active', () => {
-		useSelect.mockImplementation( () => [ false, false, false ] );
+		useSelect.mockImplementation( () => false );
 		render( <EditPostPreferencesModal /> );
 		expect(
 			screen.queryByRole( 'dialog', { name: 'Preferences' } )

package/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,27 +31,36 @@ 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 { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	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 ) => {
 		setDeviceType( newDeviceType );
-		__unstableSetEditorMode( 'edit' );
 		resetZoomLevel();
 	};
 
@@ -144,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