Address custom views in the site editor

WordPress · May 8, 2024 · b3f5088 · b3f5088
1 parent c918e39
commit b3f5088
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,18 +11,37 @@ import SiteEditorMoreMenu from './more-menu';
 import { unlock } from '../../lock-unlock';
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
+import { store as editSiteStore } from '../../store';
 
 const { Header: EditorHeader } = unlock( editorPrivateApis );
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const { editorCanvasView } = useSelect( ( select ) => {
+		return {
+			editorCanvasView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+		};
+	}, [] );
 
 	return (
 		<EditorHeader
 			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
 			customSaveButton={
 				_isPreviewingTheme && <SaveButton size="compact" />
 			}
+			forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+			title={
+				! hasDefaultEditorCanvasView
+					? getEditorCanvasContainerTitle( editorCanvasView )
+					: undefined
+			}
 		>
 			<SiteEditorMoreMenu />
 		</EditorHeader>

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
@@ -204,6 +204,7 @@ function DocumentTools( {
 								);
 							} }
 							size="compact"
+							disabled={ disableBlockTools }
 						/>
 					) }
 			</div>

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -38,7 +38,9 @@ const slideY = {
 function Header( {
 	customSaveButton,
 	forceIsDirty,
+	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
+	title,
 	children,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
@@ -85,7 +87,9 @@ function Header( {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="editor-header__toolbar"
 			>
-				<DocumentTools disableBlockTools={ isTextEditor } />
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
 				{ hasTopToolbar && (
 					<CollapsableBlockToolbar
 						isCollapsed={ isBlockToolsCollapsed }
@@ -98,9 +102,13 @@ function Header( {
 							! isBlockToolsCollapsed && hasTopToolbar,
 					} ) }
 				>
-					<PostTypeSupportCheck supportKeys="title">
-						<DocumentBar />
-					</PostTypeSupportCheck>
+					{ ! title ? (
+						<PostTypeSupportCheck supportKeys="title">
+							<DocumentBar />
+						</PostTypeSupportCheck>
+					) : (
+						title
+					) }
 				</div>
 			</motion.div>
 			<motion.div
-Original file line number
+Diff line change
@@ Expand Up / @@ -204,6 +204,7 @@ function DocumentTools( { @@
     								);
     							} }
     							size="compact"
+    							disabled={ disableBlockTools }
     						/>
     					) }
     			</div>
@@ Expand Down @@