This is also trash.

WordPress · Apr 21, 2023 · f3cfeb0 · f3cfeb0
1 parent 23c4a57
commit f3cfeb0
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 39 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -178,7 +178,8 @@ export default function BlockEditor() {
 					) : (
 						<BlockTools
 							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode': isTemplatePart || !! editorCanvasFill,
+								'is-focus-mode':
+									isTemplatePart || !! editorCanvasFill,
 								'is-view-mode': isViewMode,
 							} ) }
 							__unstableContentRef={ contentRef }

diff --git a/packages/edit-site/src/components/editor-canvas/index.js b/packages/edit-site/src/components/editor-canvas/index.js
@@ -21,13 +21,14 @@ import {
 } from '@wordpress/compose';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
 import { EditorCanvasFillContext } from './context';
-import { closeSmall } from '@wordpress/icons';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const SLOT_FILL_NAME = 'EditSiteEditorCanvas';
@@ -97,10 +98,5 @@ function EditorCanvas( { onClose, title, children } ) {
 	);
 }
 
-function useHasEditorCanvasFill() {
-	const fills = useSlotFills( SLOT_FILL_NAME );
-	return !! fills?.length;
-}
-
 export default EditorCanvas;
-export { useHasEditorCanvasFill, EditorCanvasSlot };
+export { EditorCanvasSlot };
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions.js
@@ -13,7 +13,7 @@ import {
 	SelectControl,
 	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	useContext,
@@ -33,6 +33,9 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { isGlobalStyleConfigEqual } from './utils';
 import { unlock } from '../../private-apis';
 import Revisions from '../revisions';
+import { store as editSiteStore } from '../../store';
+
+
 
 const SELECTOR_MINIMUM_REVISION_COUNT = 10;
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -170,10 +173,9 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 
 function ScreenRevisions( { onClose } ) {
 	const { goBack } = useNavigator();
-
 	const { user: userConfig, setUserConfig } =
 		useContext( GlobalStylesContext );
-	const { userRevisions, isDirty } = useSelect( ( select ) => {
+	const { userRevisions, isDirty, editorRole } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
@@ -186,6 +188,7 @@ function ScreenRevisions( { onClose } ) {
 				select(
 					coreStore
 				).__experimentalGetCurrentThemeGlobalStylesRevisions() || [],
+			editorRole: unlock( select( editSiteStore ) ).getEditorRole(),
 		};
 	}, [] );
 	const [ globalStylesRevision, setGlobalStylesRevision ] = useState( {} );
@@ -203,6 +206,14 @@ function ScreenRevisions( { onClose } ) {
 		}
 		setCurrentRevisionId( currentRevision?.id );
 	}, [ userRevisions, userConfig ] );
+	const { setEditorRole } = unlock( useDispatch( editSiteStore ) );
+	console.log( 'editorRole', editorRole );
+	useEffect( () => {
+		if ( editorRole !== 'global-styles-revisions' ) {
+			goBack();
+			setEditorRole( editorRole );
+		}
+	}, [ editorRole ] );
 
 	const restoreRevision = useCallback(
 		( revision ) => {
@@ -217,6 +228,7 @@ function ScreenRevisions( { onClose } ) {
 
 	const onCloseRevisions = () => {
 		goBack();
+		onClose();
 	};
 
 	const selectRevision = ( revision ) => {

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -43,6 +43,7 @@ import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
 import ScreenEffects from './screen-effects';
 import ScreenRevisions from './screen-revisions';
+import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -66,11 +67,16 @@ function GlobalStylesActionMenu() {
 					0 ) + 1,
 		};
 	}, [] );
+
+	const { setEditorRole } = unlock( useDispatch( editSiteStore ) );
 	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const loadCustomCSS = () => goTo( '/css' );
-	const loadRevisions = () => goTo( '/revisions' );
+	const loadRevisions = () => {
+		goTo( '/revisions' );
+		setEditorRole( 'global-styles-revisions' );
+	};
 	const hasRevisions = revisionsCount >= 2;
 	return (
 		<GlobalStylesMenuFill>
@@ -140,6 +146,7 @@ function BlockStyleVariationsScreens( { name } ) {
 		},
 		[ name ]
 	);
+
 	if ( ! blockStyleVariations?.length ) {
 		return null;
 	}
@@ -186,7 +193,7 @@ function ContextScreens( {
 		},
 		[ name ]
 	);
-
+	const { setEditorRole } = unlock( useDispatch( editSiteStore ) );
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
@@ -254,7 +261,10 @@ function ContextScreens( {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/revisions' }>
-				<ScreenRevisions name={ name } />
+				<ScreenRevisions
+					name={ name }
+					onClose={ () => setEditorRole( 'init' ) }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			{ !! blockStyleVariations?.length && (
@@ -330,6 +340,11 @@ function GlobalStylesUI( {
 	onCloseStyleBook,
 } ) {
 	const blocks = getBlockTypes();
+	const { editorRole } = useSelect( ( select ) => {
+		return {
+			editorRole: unlock( select( editSiteStore ) ).getEditorRole(),
+		};
+	}, [] );
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -374,7 +389,8 @@ function GlobalStylesUI( {
 					/>
 				);
 			} ) }
-			{ isStyleBookOpened && (
+
+			{ 'style-book' === editorRole && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
 

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -38,7 +38,7 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { useHasEditorCanvasFill } from '../editor-canvas';
+import { unlock } from '../../private-apis';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -56,6 +56,7 @@ export default function HeaderEditMode() {
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
+		editorRole,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -88,6 +89,7 @@ export default function HeaderEditMode() {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			editorRole: unlock( select( editSiteStore ) ).getEditorRole(),
 		};
 	}, [] );
 
@@ -117,8 +119,14 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	// @TODO We should genericize the style book slot.
-	const hasEditorCanvasFill = useHasEditorCanvasFill();
+
+	const defaultRole = 'init' === editorRole;
+
+	// @TODO Abstract this.
+	const headerTitle =
+		'style-book' === editorRole
+			? __( 'Style Book' )
+			: __( 'Global styles revisions' );
 
 	const isFocusMode = templateType === 'wp_template_part';
 
@@ -139,7 +147,7 @@ export default function HeaderEditMode() {
 				'show-icon-labels': showIconLabels,
 			} ) }
 		>
-			{ ! hasEditorCanvasFill && (
+			{ defaultRole && (
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
@@ -224,16 +232,12 @@ export default function HeaderEditMode() {
 			) }
 
 			<div className="edit-site-header-edit-mode__center">
-				{ hasEditorCanvasFill ? (
-					__( 'Style Book' )
-				) : (
-					<DocumentActions />
-				) }
+				{ ! defaultRole ? headerTitle : <DocumentActions /> }
 			</div>
 
 			<div className="edit-site-header-edit-mode__end">
 				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && ! hasEditorCanvasFill && (
+					{ ! isFocusMode && defaultRole && (
 						<div
 							className={ classnames(
 								'edit-site-header-edit-mode__preview-options',

diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
@@ -16,7 +16,6 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
 import {
 	useFocusOnMount,
 	useFocusReturn,

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
@@ -4,8 +4,7 @@
 import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
 /**
@@ -15,17 +14,19 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
+import { unlock } from '../../private-apis';
 
 export default function GlobalStylesSidebar() {
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const editorMode = useSelect(
-		( select ) => select( editSiteStore ).getEditorMode(),
-		[]
-	);
-
+	const { editorMode, editorRole } = useSelect( ( select ) => {
+		return {
+			editorMode: select( editSiteStore ).getEditorMode(),
+			editorRole: unlock( select( editSiteStore ) ).getEditorRole(),
+		};
+	}, [] );
+	const { setEditorRole } = unlock( useDispatch( editSiteStore ) );
 	useEffect( () => {
 		if ( editorMode !== 'visual' ) {
-			setIsStyleBookOpened( false );
+			setEditorRole( 'init' );
 		}
 	}, [ editorMode ] );
 	return (
@@ -45,10 +46,14 @@ export default function GlobalStylesSidebar() {
 						<Button
 							icon={ seen }
 							label={ __( 'Style Book' ) }
-							isPressed={ isStyleBookOpened }
+							isPressed={ editorRole === 'style-book' }
 							disabled={ editorMode !== 'visual' }
 							onClick={ () => {
-								setIsStyleBookOpened( ! isStyleBookOpened );
+								setEditorRole(
+									editorRole !== 'style-book'
+										? 'style-book'
+										: 'init'
+								);
 							} }
 						/>
 					</FlexItem>
@@ -59,8 +64,7 @@ export default function GlobalStylesSidebar() {
 			}
 		>
 			<GlobalStylesUI
-				isStyleBookOpened={ isStyleBookOpened }
-				onCloseStyleBook={ () => setIsStyleBookOpened( false ) }
+				onCloseStyleBook={ () => setEditorRole( 'init' ) }
 			/>
 		</DefaultSidebar>
 	);

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
@@ -27,3 +27,17 @@ export const setCanvasMode =
 			dispatch.setIsListViewOpened( true );
 		}
 	};
+
+/**
+ * Action that switches the canvas mode.
+ *
+ * @param {?string} mode Canvas mode.
+ */
+export const setEditorRole =
+	( mode ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_EDITOR_ROLE',
+			mode,
+		} );
+	};
diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js
@@ -8,3 +8,7 @@
 export function getCanvasMode( state ) {
 	return state.canvasMode;
 }
+
+export function getEditorRole( state ) {
+	return state.editorRole;
+}
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
@@ -141,6 +141,23 @@ function canvasMode( state = 'init', action ) {
 	return state;
 }
 
+/**
+ * Reducer used to track the site editor 'editor' role.
+ * This is used to differentiate between the editor canvas and other display types,
+ * such as the style book.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+function editorRole( state = 'init', action ) {
+	switch ( action.type ) {
+		case 'SET_EDITOR_ROLE':
+			return action.mode;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -149,4 +166,5 @@ export default combineReducers( {
 	listViewPanel,
 	saveViewPanel,
 	canvasMode,
+	editorRole,
 } );