Global styles: close stylebook if the editor canvas container slot is…

… not filled (#50086)

* Alternative to #50081 which uses the original method of checking for a slot fill to see if we need to render a custom header title for the editor canvas slot.

* Revert changes in #50081

* Reinstates trunk logic to check for global styles sidebar state AND throws in a check for canvas mode === `edit`, both of which will affect whether we reset the editor canvas container.
If the global sidebar is closed or the canvas is no longer in edit mode, turn off the fills.

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -5,6 +5,7 @@ import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
 import {
 	Button,
 	privateApis as componentsPrivateApis,
+	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
@@ -25,7 +26,7 @@ import { store as editSiteStore } from '../../store';
  *
  * @return {string} Translated string corresponding to value of view. Default is ''.
  */
-export function getEditorCanvasContainerTitle( view ) {
+function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
 			return __( 'Style Book' );
@@ -37,8 +38,11 @@ export function getEditorCanvasContainerTitle( view ) {
 // Creates a private slot fill.
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
-const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } =
-	createPrivateSlotFill( SLOT_FILL_NAME );
+const {
+	privateKey,
+	Slot: EditorCanvasContainerSlot,
+	Fill: EditorCanvasContainerFill,
+} = createPrivateSlotFill( SLOT_FILL_NAME );
 
 function EditorCanvasContainer( {
 	children,
@@ -110,6 +114,11 @@ function EditorCanvasContainer( {
 		</EditorCanvasContainerFill>
 	);
 }
+function useHasEditorCanvasContainer() {
+	const fills = useSlotFills( privateKey );
+	return !! fills?.length;
+}
 
 EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
 export default EditorCanvasContainer;
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

packages/edit-site/src/components/header-edit-mode/index.js

@@ -38,7 +38,10 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { getEditorCanvasContainerTitle } from '../editor-canvas-container';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
 import { unlock } from '../../private-apis';
 
 const preventDefault = ( event ) => {
@@ -122,7 +125,7 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const hasDefaultEditorCanvasView = ! editorCanvasView;
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = templateType === 'wp_template_part';
 

packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -21,27 +21,29 @@ export default function GlobalStylesSidebar() {
 	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
 		( select ) => {
 			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 			const _isVisualEditorMode =
 				'visual' === select( editSiteStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === getCanvasMode();
 
 			return {
 				isStyleBookOpened:
-					'style-book' ===
-					unlock(
-						select( editSiteStore )
-					).getEditorCanvasContainerView(),
+					'style-book' === getEditorCanvasContainerView(),
 				shouldClearCanvasContainerView:
 					'edit-site/global-styles' !==
 						getActiveComplementaryArea( 'core/edit-site' ) ||
-					! _isVisualEditorMode,
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
 			};
 		},
 		[]
 	);
-
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {
 			setEditorCanvasContainerView( undefined );