@wordpress/edit-site 6.0.0 → 6.0.1

package/build-style/style.css

@@ -513,6 +513,7 @@
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
   opacity: 0;
   position: fixed;
+  right: 0;
 }
 .dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
   padding-right: 32px;
@@ -928,12 +929,15 @@
 }
 
 .dataviews-bulk-actions {
-  position: absolute;
+  position: sticky;
   display: flex;
   flex-direction: column;
   align-content: center;
   flex-wrap: wrap;
-  width: 100%;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
   bottom: 24px;
   z-index: 2;
 }
@@ -1110,6 +1114,18 @@
   align-items: flex-start;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-old(frame),
+::view-transition-new(frame) {
+  animation-duration: 0;
+}
+
+/* stylelint-enable */
+.edit-site-visual-editor__editor-canvas {
+  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+  view-transition-name: frame;
+  /* stylelint-enable */
+}
 .edit-site-visual-editor__editor-canvas.is-focused {
   outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
   outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
@@ -1505,18 +1521,12 @@
   will-change: opacity;
 }
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary {
-  font-size: 28px;
-  font-weight: 200;
   color: #1e1e1e;
-  margin-bottom: 4px;
-  line-height: 1.2;
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled {
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:disabled,
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
   color: #949494;
 }
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination .components-button.is-tertiary:hover {
-  background: transparent;
-}
 
 .edit-site-global-styles-screen-revisions__footer {
   height: 56px;
@@ -2012,17 +2022,17 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
   opacity: 1;
   transition: opacity 0.1s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-editor__interface-skeleton {
+  .edit-site-editor__editor-interface {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-editor__interface-skeleton.is-loading {
+.edit-site-editor__editor-interface.is-loading {
   opacity: 0;
 }
 
@@ -2036,10 +2046,6 @@
   justify-content: center;
 }
 
-.editor-header {
-  padding-left: 60px;
-}
-
 .edit-site-welcome-guide {
   width: 312px;
 }
@@ -2090,38 +2096,8 @@
   display: flex;
   flex-direction: column;
 }
-
-.edit-site-layout__hub {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: calc(100vw - 32px);
-  height: 60px;
-  z-index: 3;
-}
-@media (min-width: 782px) {
-  .edit-site-layout__hub {
-    width: calc(360px - 12px);
-  }
-}
-.edit-site-layout.is-full-canvas .edit-site-layout__hub {
-  padding-right: 0;
-  border-radius: 0;
-  width: 60px;
-  box-shadow: none;
-}
-
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page) {
-  margin-bottom: 60px;
-}
-@media (min-width: 782px) {
-  .edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page) {
-    margin-bottom: 0;
-  }
-}
-
-.edit-site-layout__header-container {
-  z-index: 4;
+.edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
+  background: #1e1e1e;
 }
 
 .edit-site-layout__content {
@@ -2232,10 +2208,22 @@
   height: 100%;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+  animation-delay: 255ms;
+}
+
+/* stylelint-enable  */
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+  display: none;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
+  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+  view-transition-name: toggle;
+  /* stylelint-enable  */
   position: relative;
   color: #fff;
-  border-radius: 0;
   height: 60px;
   width: 60px;
   overflow: hidden;
@@ -2243,6 +2231,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: #1e1e1e;
+  border-radius: 0;
 }
 .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
   color: #fff;
@@ -2273,7 +2263,6 @@
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
   display: flex;
-  border-radius: 2px;
   height: 64px;
   width: 64px;
   justify-content: center;
@@ -2304,27 +2293,6 @@
   }
 }
 
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container {
-  height: 60px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 4;
-  width: 100%;
-}
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container:focus-within {
-  opacity: 1 !important;
-}
-.edit-site-layout.is-distraction-free .edit-site-layout__header-container:focus-within div {
-  transform: translateX(0) translateY(0) translateZ(0) !important;
-}
-.edit-site-layout.is-distraction-free .edit-site-site-hub {
-  position: absolute;
-  top: 0;
-  z-index: 3;
-}
-
 .edit-site-layout__area {
   flex-grow: 1;
   margin: 0;
@@ -2550,7 +2518,7 @@
   position: sticky;
   top: 0;
   background: #1e1e1e;
-  padding-top: 108px;
+  padding-top: 48px;
   margin-bottom: 8px;
   padding-bottom: 8px;
   z-index: 1;
@@ -2558,8 +2526,8 @@
 
 .edit-site-sidebar-navigation-screen__title {
   flex-grow: 1;
-  padding: 6px 0 0 0;
   overflow-wrap: break-word;
+  padding: 2px 0 0 0;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -2728,6 +2696,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  margin-right: 12px;
 }
 
 .edit-site-site-hub__actions {
@@ -2739,9 +2708,6 @@
   width: 60px;
   flex-shrink: 0;
 }
-.edit-site-site-hub__view-mode-toggle-container .edit-site-layout__view-mode-toggle-icon {
-  background: #1e1e1e;
-}
 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
   background: transparent;
 }
@@ -2831,13 +2797,6 @@
 
 .edit-site-site-icon__icon {
   fill: currentColor;
-  transition: padding 0.3s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-site-icon__icon {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
 }
 .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
   padding: 6px;
@@ -2846,7 +2805,6 @@
 .edit-site-site-icon__image {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
   object-fit: cover;
   background: #333;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.0",
+	"version": "6.0.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.0",
-		"@wordpress/api-fetch": "^7.0.0",
-		"@wordpress/blob": "^4.0.0",
-		"@wordpress/block-editor": "^13.0.0",
-		"@wordpress/block-library": "^9.0.0",
-		"@wordpress/blocks": "^13.0.0",
-		"@wordpress/commands": "^1.0.0",
-		"@wordpress/components": "^28.0.0",
-		"@wordpress/compose": "^7.0.0",
-		"@wordpress/core-commands": "^1.0.0",
-		"@wordpress/core-data": "^7.0.0",
-		"@wordpress/data": "^10.0.0",
-		"@wordpress/dataviews": "^2.0.0",
-		"@wordpress/date": "^5.0.0",
-		"@wordpress/deprecated": "^4.0.0",
-		"@wordpress/dom": "^4.0.0",
-		"@wordpress/editor": "^14.0.0",
-		"@wordpress/element": "^6.0.0",
-		"@wordpress/escape-html": "^3.0.0",
-		"@wordpress/hooks": "^4.0.0",
-		"@wordpress/html-entities": "^4.0.0",
-		"@wordpress/i18n": "^5.0.0",
-		"@wordpress/icons": "^10.0.0",
-		"@wordpress/keyboard-shortcuts": "^5.0.0",
-		"@wordpress/keycodes": "^4.0.0",
-		"@wordpress/notices": "^5.0.0",
-		"@wordpress/patterns": "^2.0.0",
-		"@wordpress/plugins": "^7.0.0",
-		"@wordpress/preferences": "^4.0.0",
-		"@wordpress/primitives": "^4.0.0",
-		"@wordpress/priority-queue": "^3.0.0",
-		"@wordpress/private-apis": "^1.0.0",
-		"@wordpress/reusable-blocks": "^5.0.0",
-		"@wordpress/router": "^1.0.0",
-		"@wordpress/style-engine": "^2.0.0",
-		"@wordpress/url": "^4.0.0",
-		"@wordpress/viewport": "^6.0.0",
-		"@wordpress/widgets": "^4.0.0",
-		"@wordpress/wordcount": "^4.0.0",
+		"@wordpress/a11y": "^4.0.1",
+		"@wordpress/api-fetch": "^7.0.1",
+		"@wordpress/blob": "^4.0.1",
+		"@wordpress/block-editor": "^13.0.1",
+		"@wordpress/block-library": "^9.0.1",
+		"@wordpress/blocks": "^13.0.1",
+		"@wordpress/commands": "^1.0.1",
+		"@wordpress/components": "^28.0.1",
+		"@wordpress/compose": "^7.0.1",
+		"@wordpress/core-commands": "^1.0.1",
+		"@wordpress/core-data": "^7.0.1",
+		"@wordpress/data": "^10.0.1",
+		"@wordpress/dataviews": "^2.0.1",
+		"@wordpress/date": "^5.0.1",
+		"@wordpress/deprecated": "^4.0.1",
+		"@wordpress/dom": "^4.0.1",
+		"@wordpress/editor": "^14.0.1",
+		"@wordpress/element": "^6.0.1",
+		"@wordpress/escape-html": "^3.0.1",
+		"@wordpress/hooks": "^4.0.1",
+		"@wordpress/html-entities": "^4.0.1",
+		"@wordpress/i18n": "^5.0.1",
+		"@wordpress/icons": "^10.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.0.1",
+		"@wordpress/keycodes": "^4.0.1",
+		"@wordpress/notices": "^5.0.1",
+		"@wordpress/patterns": "^2.0.1",
+		"@wordpress/plugins": "^7.0.1",
+		"@wordpress/preferences": "^4.0.1",
+		"@wordpress/primitives": "^4.0.1",
+		"@wordpress/priority-queue": "^3.0.1",
+		"@wordpress/private-apis": "^1.0.1",
+		"@wordpress/reusable-blocks": "^5.0.1",
+		"@wordpress/router": "^1.0.1",
+		"@wordpress/style-engine": "^2.0.1",
+		"@wordpress/url": "^4.0.1",
+		"@wordpress/viewport": "^6.0.1",
+		"@wordpress/widgets": "^4.0.1",
+		"@wordpress/wordcount": "^4.0.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
+	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
 }

package/src/components/block-editor/inserter-media-categories.js

@@ -191,9 +191,7 @@ const inserterMediaCategories = [
 				per_page: 'page_size',
 				search: 'q',
 			};
-			const url = new URL(
-				'https://api.openverse.engineering/v1/images/'
-			);
+			const url = new URL( 'https://api.openverse.org/v1/images/' );
 			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
 				const queryKey = mapFromInserterMediaRequest[ key ] || key;
 				url.searchParams.set( queryKey, value );

package/src/components/block-editor/style.scss

@@ -1,4 +1,15 @@
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-old(frame),
+::view-transition-new(frame) {
+  animation-duration: 0;
+}
+/* stylelint-enable */
+
 .edit-site-visual-editor__editor-canvas {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: frame;
+	/* stylelint-enable */
+
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));

package/src/components/editor/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -28,11 +28,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
@@ -44,26 +41,20 @@ import {
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SiteEditorMoreMenu from '../more-menu';
+import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
+import useEditorTitle from './use-editor-title';
 
-const {
-	EditorInterface,
-	ExperimentalEditorProvider: EditorProvider,
-	Sidebar,
-} = unlock( editorPrivateApis );
+const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-export default function Editor( { isLoading } ) {
+export default function EditSiteEditor( { isLoading } ) {
 	const {
-		record: editedPost,
-		getTitle,
-		isLoaded: hasLoadedPost,
-	} = useEditedEntityRecord();
-	const { type: editedPostType } = editedPost;
-	const {
-		context,
-		contextPost,
+		editedPostType,
+		editedPostId,
+		contextPostType,
+		contextPostId,
 		editorMode,
 		canvasMode,
 		isEditingPage,
@@ -72,25 +63,25 @@ export default function Editor( { isLoading } ) {
 		editorCanvasView,
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
-			select( editSiteStore )
-		);
+		const {
+			getEditedPostContext,
+			getCanvasMode,
+			isPage,
+			getEditedPostType,
+			getEditedPostId,
+		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
-		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
+		const { getCurrentTheme } = select( coreDataStore );
 		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
 		return {
-			context: _context,
-			contextPost: _context?.postId
-				? getEntityRecord(
-						'postType',
-						_context.postType,
-						_context.postId
-				  )
-				: undefined,
+			editedPostType: getEditedPostType(),
+			editedPostId: getEditedPostId(),
+			contextPostType: _context?.postId ? _context.postType : undefined,
+			contextPostId: _context?.postId ? _context.postId : undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
@@ -104,30 +95,14 @@ export default function Editor( { isLoading } ) {
 				'trash',
 		};
 	}, [] );
+	useEditorTitle();
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const postWithTemplate = !! context?.postId;
-
-	let title;
-	if ( hasLoadedPost ) {
-		title = sprintf(
-			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
-			__( '%1$s ‹ %2$s' ),
-			getTitle(),
-			POST_TYPE_LABELS[ editedPostType ] ??
-				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
-		);
-	}
-
-	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URLQueryController> from double-announcing.
-	useTitle( hasLoadedPost && title );
-
+	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'
@@ -152,6 +127,7 @@ export default function Editor( { isLoading } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -202,10 +178,7 @@ export default function Editor( { isLoading } ) {
 		[ history, createSuccessNotice ]
 	);
 
-	const isReady =
-		! isLoading &&
-		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
-			( ! postWithTemplate && !! editedPost ) );
+	const isReady = ! isLoading;
 
 	return (
 		<>
@@ -215,55 +188,54 @@ export default function Editor( { isLoading } ) {
 			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
-			{ hasLoadedPost && ! editedPost && (
-				<Notice status="warning" isDismissible={ false }>
-					{ __(
-						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-					) }
-				</Notice>
-			) }
 			{ isReady && (
-				<EditorProvider
-					post={ postWithTemplate ? contextPost : editedPost }
-					__unstableTemplate={
-						postWithTemplate ? editedPost : undefined
+				<Editor
+					postType={
+						postWithTemplate ? contextPostType : editedPostType
 					}
+					postId={ postWithTemplate ? contextPostId : editedPostId }
+					templateId={ postWithTemplate ? editedPostId : undefined }
 					settings={ settings }
-					useSubRegistry={ false }
+					className={ clsx( 'edit-site-editor__editor-interface', {
+						'show-icon-labels': showIconLabels,
+					} ) }
+					styles={ styles }
+					enableRegionNavigation={ false }
+					customSaveButton={
+						_isPreviewingTheme && <SaveButton size="compact" />
+					}
+					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+					title={
+						! hasDefaultEditorCanvasView
+							? getEditorCanvasContainerTitle( editorCanvasView )
+							: undefined
+					}
+					iframeProps={ iframeProps }
+					onActionPerformed={ onActionPerformed }
+					extraSidebarPanels={
+						! isEditingPage && <PluginTemplateSettingPanel.Slot />
+					}
 				>
-					<SiteEditorMoreMenu />
-					<EditorInterface
-						className={ clsx(
-							'edit-site-editor__interface-skeleton',
-							{
-								'show-icon-labels': showIconLabels,
+					{ isEditMode && (
+						<BackButton>
+							{ ( { length } ) =>
+								length <= 1 && (
+									<Button
+										label={ __( 'Open Navigation' ) }
+										className="edit-site-layout__view-mode-toggle"
+										onClick={ () =>
+											setCanvasMode( 'view' )
+										}
+									>
+										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+									</Button>
+								)
 							}
-						) }
-						styles={ styles }
-						enableRegionNavigation={ false }
-						customSaveButton={
-							_isPreviewingTheme && <SaveButton size="compact" />
-						}
-						forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-						title={
-							! hasDefaultEditorCanvasView
-								? getEditorCanvasContainerTitle(
-										editorCanvasView
-								  )
-								: undefined
-						}
-						iframeProps={ iframeProps }
-					/>
-					<Sidebar
-						onActionPerformed={ onActionPerformed }
-						extraPanels={
-							! isEditingPage && (
-								<PluginTemplateSettingPanel.Slot />
-							)
-						}
-					/>
+						</BackButton>
+					) }
+					<SiteEditorMoreMenu />
 					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-				</EditorProvider>
+				</Editor>
 			) }
 		</>
 	);

package/src/components/editor/style.scss

@@ -1,4 +1,4 @@
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
 	@include reduce-motion("transition");
@@ -17,7 +17,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.editor-header {
-	padding-left: $header-height;
-}

package/src/components/editor/use-editor-title.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+import useTitle from '../routes/use-title';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+function useEditorTitle() {
+	const {
+		record: editedPost,
+		getTitle,
+		isLoaded: hasLoadedPost,
+	} = useEditedEntityRecord();
+	let title;
+	if ( hasLoadedPost ) {
+		title = sprintf(
+			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s' ),
+			getTitle(),
+			POST_TYPE_LABELS[ editedPost.type ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
+		);
+	}
+
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URLQueryController> from double-announcing.
+	useTitle( hasLoadedPost && title );
+}
+
+export default useEditorTitle;