Site and Post Editor: Unify the DocumentBar component (WordPress#56778)

Author: youknowriad

package-lock.json

@@ -62,8 +62,6 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 Store definition for the commands namespace.
 
-See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
-
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore>

packages/commands/README.md

@@ -17,8 +17,6 @@ const STORE_NAME = 'core/commands';
 /**
  * Store definition for the commands namespace.
  *
- * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14).
- *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *
  * @type {Object}

packages/commands/src/store/index.js

@@ -14,6 +14,7 @@ import {
 	PostSavedState,
 	PostPreviewButton,
 	store as editorStore,
+	DocumentBar,
 } from '@wordpress/editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -39,7 +40,6 @@ import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import DocumentActions from './document-actions';
 import { unlock } from '../../lock-unlock';
 
 const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
@@ -164,7 +164,7 @@ function Header( {
 							isLargeViewport,
 					} ) }
 				>
-					{ isEditingTemplate && <DocumentActions /> }
+					{ isEditingTemplate && <DocumentBar /> }
 				</div>
 			</motion.div>
 			<motion.div

packages/edit-post/src/components/header/document-actions/index.js

@@ -531,7 +531,7 @@ export function setIsEditingTemplate() {
 export const __unstableSwitchToTemplateMode =
 	( newTemplate = false ) =>
 	( { registry, select } ) => {
-		registry.dispatch( editorStore ).setRenderingMode( 'all' );
+		registry.dispatch( editorStore ).setRenderingMode( 'template-only' );
 		const isWelcomeGuideActive = select.isFeatureActive(
 			'welcomeGuideTemplate'
 		);

packages/edit-post/src/components/header/document-actions/style.scss

@@ -2,7 +2,6 @@
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
-@import "./components/header/document-actions/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/block-manager/style.scss";

packages/edit-post/src/components/header/index.js

@@ -97,10 +97,12 @@ export function useSpecificEditorSettings() {
 		keepCaretInsideBlock,
 		canvasMode,
 		settings,
+		postWithTemplate,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostType,
 			getEditedPostId,
+			getEditedPostContext,
 			getCanvasMode,
 			getSettings,
 		} = unlock( select( editSiteStore ) );
@@ -113,6 +115,7 @@ export function useSpecificEditorSettings() {
 			usedPostType,
 			usedPostId
 		);
+		const _context = getEditedPostContext();
 		return {
 			templateSlug: _record.slug,
 			focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
@@ -130,10 +133,11 @@ export function useSpecificEditorSettings() {
 			),
 			canvasMode: getCanvasMode(),
 			settings: getSettings(),
+			postWithTemplate: _context?.postId,
 		};
 	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
-
+	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
@@ -144,6 +148,7 @@ export function useSpecificEditorSettings() {
 			isDistractionFree,
 			hasFixedToolbar,
 			keepCaretInsideBlock,
+			defaultRenderingMode,
 
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
@@ -159,6 +164,7 @@ export function useSpecificEditorSettings() {
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
+		defaultRenderingMode,
 	] );
 
 	return defaultEditorSettings;