@wordpress/editor 14.33.3 → 14.34.0

package/build-types/store/private-selectors.d.ts

@@ -3,6 +3,20 @@ export function getInserterSidebarToggleRef(state: any): any;
 export function getEntityActions(state: any, ...args: any[]): import("@wordpress/dataviews").Action<any>[];
 export function isEntityReady(state: any, ...args: any[]): boolean;
 export function getEntityFields(state: any, ...args: any[]): import("@wordpress/dataviews").Field<any>[];
+/**
+ * Get the current global styles navigation path.
+ *
+ * @param {Object} state Global application state.
+ * @return {string} The current styles path.
+ */
+export function getStylesPath(state: Object): string;
+/**
+ * Get whether the stylebook is currently visible.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the stylebook is visible.
+ */
+export function getShowStylebook(state: Object): boolean;
 /**
  * Get the inserter.
  *

package/build-types/store/private-selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-selectors.d.ts","sourceRoot":"","sources":["../../src/store/private-selectors.js"],"names":[],"mappings":"AAsFA,sDAEC;AACD,6DAEC;AAsFD,2GAEC;AAED,mEAEC;AAED,yGAEC;AAjJD;;;;;;GAMG;AACH;;;;EAmCE;AAeF;;;;EAqCE;AAEF;;;;;;;;;GASG;AACH;;;;EA2BE;AAcF;;;;;;;;GAQG;AACH;;;;EAsBE;AAEF;;;;;;;GAOG;AACH;;;;EAyCE"}
+{"version":3,"file":"private-selectors.d.ts","sourceRoot":"","sources":["../../src/store/private-selectors.js"],"names":[],"mappings":"AAsFA,sDAEC;AACD,6DAEC;AAsFD,2GAEC;AAED,mEAEC;AAED,yGAEC;AAsFD;;;;;GAKG;AACH,qCAHW,MAAM,GACL,MAAM,CAIjB;AAED;;;;;GAKG;AACH,wCAHW,MAAM,GACL,OAAO,CAIlB;AAzPD;;;;;;GAMG;AACH;;;;EAmCE;AAeF;;;;EAqCE;AAEF;;;;;;;;;GASG;AACH;;;;EA2BE;AAcF;;;;;;;;GAQG;AACH;;;;EAsBE;AAEF;;;;;;;GAOG;AACH;;;;EAyCE"}

package/build-types/store/reducer.d.ts

@@ -176,6 +176,22 @@ export function listViewToggleRef(state?: Object): Object;
  */
 export function inserterSidebarToggleRef(state?: Object): Object;
 export function publishSidebarActive(state: boolean | undefined, action: any): boolean;
+/**
+ * Reducer for the current global styles navigation path.
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {string} Updated state.
+ */
+export function stylesPath(state: string | undefined, action: Object): string;
+/**
+ * Reducer for whether the stylebook is visible.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ * @return {boolean} Updated state.
+ */
+export function showStylebook(state: boolean | undefined, action: Object): boolean;
 declare const _default: import("redux").Reducer<{
     postId: any;
     postType: any;
@@ -195,6 +211,8 @@ declare const _default: import("redux").Reducer<{
     listViewPanel: any;
     listViewToggleRef: Object;
     publishSidebarActive: boolean;
+    stylesPath: string;
+    showStylebook: boolean;
     dataviews: {
         actions: {
             [x: string]: Record<string, import("@wordpress/dataviews").Action<any>[]> | {
@@ -227,6 +245,8 @@ declare const _default: import("redux").Reducer<{
     listViewPanel: Object | undefined;
     listViewToggleRef: Object | undefined;
     publishSidebarActive: boolean | undefined;
+    stylesPath: string | undefined;
+    showStylebook: boolean | undefined;
     dataviews: never;
 }>>;
 export default _default;

package/build-types/store/reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/store/reducer.js"],"names":[],"mappings":"AAWA;;;;;;;GAOG;AACH,uCAJW,GAAC,GAEA,GAAC,CAQZ;AAED;;;;;;;;GAQG;AACH,+BALW,MAAM,KACN,MAAM,GAEL,OAAO,CASlB;AAED;;;;;;;;;GASG;AACH,mDALW,MAAM,kBACN,MAAM,GAEL,OAAO,CAOlB;AAED;;;;;;;;;GASG;AACH,6CALW,MAAM,kBACN,MAAM,GAEL,OAAO,CAYlB;AAED,kEAOC;AAED,sEAOC;AAED,oEAOC;AAED;;;;;;;GAOG;AACH,gCALW,MAAM,sBACN,MAAM,GAEL,OAAO,CAYlB;AAED;;;;;;;;GAQG;AACH,8BALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAajB;AAED;;;;;;;GAOG;AACH,gCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAYjB;AAED;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,gCALW,aAAa,sBACb,MAAM,GAEL,aAAa,CASxB;AAED;;;;;;;;;GASG;AACH,sCALW,aAAa,sBACb,MAAM,GAEL,aAAa,CAcxB;AAED;;;;;;;;;GASG;AACH,0CALW,aAAa,sBACb,MAAM,GAEL,aAAa,CAcxB;AAED;;;;;;;GAOG;AACH,sCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAYjB;AAED,2EAOC;AAED;;;;;;;GAOG;AACH,kCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CASjB;AAED;;;;;;;GAOG;AACH,gEAJW,MAAM,SAahB;AAED;;;;;;;;GAQG;AACH,0CAHW,MAAM,sBACN,MAAM,OAUhB;AAED;;;;;;;;GAQG;AACH,qCAHW,MAAM,sBACN,MAAM,OAUhB;AAED;;;;;;GAMG;AACH,0CAHW,MAAM,GACL,MAAM,CAIjB;AAED;;;;;;GAMG;AACH,iDAHW,MAAM,GACL,MAAM,CAIjB;AAED,uFAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA9Ma,OAAO;;;;gBACN,OAAO,OAAA;;;;oBACP,OAAO,OAAA;;;;UACP,MAAM,OAAA"}
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../src/store/reducer.js"],"names":[],"mappings":"AAWA;;;;;;;GAOG;AACH,uCAJW,GAAC,GAEA,GAAC,CAQZ;AAED;;;;;;;;GAQG;AACH,+BALW,MAAM,KACN,MAAM,GAEL,OAAO,CASlB;AAED;;;;;;;;;GASG;AACH,mDALW,MAAM,kBACN,MAAM,GAEL,OAAO,CAOlB;AAED;;;;;;;;;GASG;AACH,6CALW,MAAM,kBACN,MAAM,GAEL,OAAO,CAYlB;AAED,kEAOC;AAED,sEAOC;AAED,oEAOC;AAED;;;;;;;GAOG;AACH,gCALW,MAAM,sBACN,MAAM,GAEL,OAAO,CAYlB;AAED;;;;;;;;GAQG;AACH,8BALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAajB;AAED;;;;;;;GAOG;AACH,gCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAYjB;AAED;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,gCALW,aAAa,sBACb,MAAM,GAEL,aAAa,CASxB;AAED;;;;;;;;;GASG;AACH,sCALW,aAAa,sBACb,MAAM,GAEL,aAAa,CAcxB;AAED;;;;;;;;;GASG;AACH,0CALW,aAAa,sBACb,MAAM,GAEL,aAAa,CAcxB;AAED;;;;;;;GAOG;AACH,sCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CAYjB;AAED,2EAOC;AAED;;;;;;;GAOG;AACH,kCALW,MAAM,sBACN,MAAM,GAEL,MAAM,CASjB;AAED;;;;;;;GAOG;AACH,gEAJW,MAAM,SAahB;AAED;;;;;;;;GAQG;AACH,0CAHW,MAAM,sBACN,MAAM,OAUhB;AAED;;;;;;;;GAQG;AACH,qCAHW,MAAM,sBACN,MAAM,OAUhB;AAED;;;;;;GAMG;AACH,0CAHW,MAAM,GACL,MAAM,CAIjB;AAED;;;;;;GAMG;AACH,iDAHW,MAAM,GACL,MAAM,CAIjB;AAED,uFAUC;AAED;;;;;;GAMG;AACH,kCAJW,MAAM,sBACN,MAAM,GACL,MAAM,CAUjB;AAED;;;;;;GAMG;AACH,qCAJW,OAAO,sBACP,MAAM,GACL,OAAO,CAUlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAhPa,OAAO;;;;gBACN,OAAO,OAAA;;;;oBACP,OAAO,OAAA;;;;UACP,MAAM,OAAA"}

package/build-types/utils/set-nested-value.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
+ *
+ * @param {Object} object Object to modify
+ * @param {Array}  path   Path of the property to set.
+ * @param {*}      value  Value to set.
+ */
+export default function setNestedValue(object: Object, path: any[], value: any): Object;
+//# sourceMappingURL=set-nested-value.d.ts.map

package/build-types/utils/set-nested-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-nested-value.d.ts","sourceRoot":"","sources":["../../src/utils/set-nested-value.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,+CAJW,MAAM,sBAEN,GAAC,UAsBX"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.33.3",
+	"version": "14.34.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -53,49 +53,49 @@
 	],
 	"dependencies": {
 		"@floating-ui/react-dom": "2.0.8",
-		"@wordpress/a11y": "^4.33.1",
-		"@wordpress/api-fetch": "^7.33.1",
-		"@wordpress/base-styles": "^6.9.1",
-		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.1",
-		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.1",
-		"@wordpress/components": "^30.6.1",
-		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.1",
-		"@wordpress/data": "^10.33.1",
-		"@wordpress/dataviews": "^10.1.1",
-		"@wordpress/date": "^5.33.1",
-		"@wordpress/deprecated": "^4.33.1",
-		"@wordpress/dom": "^4.33.1",
-		"@wordpress/element": "^6.33.1",
-		"@wordpress/fields": "^0.25.3",
-		"@wordpress/hooks": "^4.33.1",
-		"@wordpress/html-entities": "^4.33.1",
-		"@wordpress/i18n": "^6.6.1",
-		"@wordpress/icons": "^11.0.1",
-		"@wordpress/interface": "^9.18.1",
-		"@wordpress/keyboard-shortcuts": "^5.33.1",
-		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/media-utils": "^5.33.1",
-		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.1",
-		"@wordpress/plugins": "^7.33.1",
-		"@wordpress/preferences": "^4.33.1",
-		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.1",
-		"@wordpress/rich-text": "^7.33.1",
-		"@wordpress/server-side-render": "^6.9.1",
-		"@wordpress/url": "^4.33.1",
-		"@wordpress/warning": "^3.33.1",
-		"@wordpress/wordcount": "^4.33.1",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/api-fetch": "^7.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/blob": "^4.34.0",
+		"@wordpress/block-editor": "^15.7.0",
+		"@wordpress/blocks": "^15.7.0",
+		"@wordpress/commands": "^1.34.0",
+		"@wordpress/components": "^30.7.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/core-data": "^7.34.0",
+		"@wordpress/data": "^10.34.0",
+		"@wordpress/dataviews": "^10.2.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/fields": "^0.26.0",
+		"@wordpress/global-styles-engine": "^1.1.0",
+		"@wordpress/global-styles-ui": "^1.1.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/interface": "^9.19.0",
+		"@wordpress/keyboard-shortcuts": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/media-utils": "^5.34.0",
+		"@wordpress/notices": "^5.34.0",
+		"@wordpress/patterns": "^2.34.0",
+		"@wordpress/plugins": "^7.34.0",
+		"@wordpress/preferences": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/reusable-blocks": "^5.34.0",
+		"@wordpress/rich-text": "^7.34.0",
+		"@wordpress/server-side-render": "^6.10.0",
+		"@wordpress/url": "^4.34.0",
+		"@wordpress/warning": "^3.34.0",
+		"@wordpress/wordcount": "^4.34.0",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
-		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"remove-accents": "^0.5.0",
@@ -108,5 +108,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/components/collab-sidebar/comment-author-info.js

@@ -18,38 +18,45 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { getAvatarBorderColor } from './utils';
 
-/**
- * Render author information for a comment.
- *
- * @param {Object} props        - Component properties.
- * @param {string} props.avatar - URL of the author's avatar.
- * @param {string} props.name   - Name of the author.
- * @param {string} props.date   - Date of the comment.
- * @param {string} props.userId - User ID of the author.
- *
- * @return {React.ReactNode} The JSX element representing the author's information.
- */
 function CommentAuthorInfo( { avatar, name, date, userId } ) {
+	const hasAvatar = !! avatar;
 	const dateSettings = getDateSettings();
 	const {
 		currentUserAvatar,
 		currentUserName,
 		currentUserId,
 		dateFormat = dateSettings.formats.date,
-	} = useSelect( ( select ) => {
-		const { getCurrentUser, getEntityRecord } = select( coreStore );
-		const { getSettings } = select( blockEditorStore );
-		const userData = getCurrentUser();
-		const { __experimentalDiscussionSettings } = getSettings();
-		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			currentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
-			currentUserName: userData?.name,
-			currentUserId: userData?.id,
-			dateFormat: siteSettings?.date_format,
-		};
-	}, [] );
+	} = useSelect(
+		( select ) => {
+			const { canUser, getCurrentUser, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+
+			if ( hasAvatar ) {
+				return {
+					dateFormat: siteSettings?.date_format,
+				};
+			}
+
+			const { getSettings } = select( blockEditorStore );
+			const { __experimentalDiscussionSettings } = getSettings();
+			const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+			const userData = getCurrentUser();
+			return {
+				currentUserAvatar:
+					userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,
+				currentUserName: userData?.name,
+				currentUserId: userData?.id,
+				dateFormat: siteSettings?.date_format,
+			};
+		},
+		[ hasAvatar ]
+	);
 
 	const commentDate = getDate( date );
 	const commentDateTime = dateI18n( 'c', commentDate );

package/src/components/collab-sidebar/style.scss

@@ -111,7 +111,7 @@
 }
 
 .editor-collab-sidebar-panel__more-reply-button {
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .editor-collab-sidebar-panel__resolution-text {

package/src/components/document-bar/index.js

@@ -31,6 +31,8 @@ import { TEMPLATE_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
+import { getStylesCanvasTitle } from '../styles-canvas';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -45,9 +47,9 @@ const MotionButton = motion.create( Button );
  * ```jsx
  * <DocumentBar />
  * ```
+ *
  * @param {Object}   props       The component props.
- * @param {string}   props.title A title for the document, defaulting to the document or
- *                               template title currently being edited.
+ * @param {string}   props.title A title for the document, defaulting to the document or template title currently being edited.
  * @param {IconType} props.icon  An icon for the document, no default.
  *                               (A default icon indicating the document post type is no longer used.)
  *
@@ -63,6 +65,7 @@ export default function DocumentBar( props ) {
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 		isTemplatePreview,
+		stylesCanvasTitle,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostType,
@@ -94,6 +97,17 @@ export default function DocumentBar( props ) {
 		} );
 		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
 
+		// Check if styles canvas is active and get its title
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
+		const _stylesPath = getStylesPath();
+		const _showStylebook = getShowStylebook();
+		const _stylesCanvasTitle = getStylesCanvasTitle(
+			_stylesPath,
+			_showStylebook
+		);
+
 		return {
 			postId: _postId,
 			postType: _postType,
@@ -111,6 +125,7 @@ export default function DocumentBar( props ) {
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
 			isTemplatePreview: getRenderingMode() === 'template-locked',
+			stylesCanvasTitle: _stylesCanvasTitle,
 		};
 	}, [] );
 
@@ -120,7 +135,7 @@ export default function DocumentBar( props ) {
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
-	const title = props.title || entityTitle;
+	const title = props.title || stylesCanvasTitle || entityTitle;
 	const icon = props.icon;
 
 	const pageTypeBadge = usePageTypeBadge( postId );

package/src/components/editor/index.js

@@ -9,11 +9,14 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import EditorInterface from '../editor-interface';
 import { ExperimentalEditorProvider } from '../provider';
 import Sidebar from '../sidebar';
 import NotesSidebar from '../collab-sidebar';
+import GlobalStylesSidebar from '../global-styles-sidebar';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 
 function Editor( {
 	postType,
@@ -32,15 +35,29 @@ function Editor( {
 	extraSidebarPanels,
 	...props
 } ) {
-	const { post, template, hasLoadedPost, error } = useSelect(
+	const {
+		post,
+		template,
+		hasLoadedPost,
+		error,
+		isBlockTheme,
+		showGlobalStyles,
+	} = useSelect(
 		( select ) => {
 			const {
 				getEntityRecord,
 				getResolutionError,
 				hasFinishedResolution,
+				getCurrentTheme,
 			} = select( coreStore );
+			const { getRenderingMode, getCurrentPostType } =
+				select( editorStore );
 
 			const postArgs = [ 'postType', postType, postId ];
+			const renderingMode = getRenderingMode();
+			const currentPostType = getCurrentPostType();
+			const _isBlockTheme = getCurrentTheme()?.is_block_theme;
+
 			return {
 				post: getEntityRecord( ...postArgs ),
 				template: templateId
@@ -56,6 +73,11 @@ function Editor( {
 				),
 				error: getResolutionError( 'getEntityRecord', postArgs )
 					?.message,
+				isBlockTheme: _isBlockTheme,
+				showGlobalStyles:
+					_isBlockTheme &&
+					( currentPostType === 'wp_template' ||
+						renderingMode === 'template-locked' ),
 			};
 		},
 		[ postType, postId, templateId ]
@@ -92,6 +114,8 @@ function Editor( {
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }
 					/>
+					{ isBlockTheme && <GlobalStylesRenderer /> }
+					{ showGlobalStyles && <GlobalStylesSidebar /> }
 				</ExperimentalEditorProvider>
 			) }
 		</>

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

@@ -118,6 +118,6 @@
 
 .helpDetailBadgeText {
 	color: $white;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	font-size: 12px;
 }

package/src/components/editor-interface/index.js

@@ -18,6 +18,7 @@ import { useState, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 import EditorNotices from '../editor-notices';
 import Header from '../header';
 import InserterSidebar from '../inserter-sidebar';
@@ -25,7 +26,7 @@ import ListViewSidebar from '../list-view-sidebar';
 import SavePublishPanels from '../save-publish-panels';
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
-import EditorContentSlotFill from './content-slot-fill';
+import StylesCanvas from '../styles-canvas';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -42,7 +43,6 @@ const interfaceLabels = {
 
 export default function EditorInterface( {
 	className,
-	styles,
 	children,
 	forceIsDirty,
 	contentRef,
@@ -51,7 +51,6 @@ export default function EditorInterface( {
 	customSaveButton,
 	customSavePanel,
 	forceDisableBlockTools,
-	title,
 	iframeProps,
 } ) {
 	const {
@@ -62,9 +61,14 @@ export default function EditorInterface( {
 		isPreviewMode,
 		showBlockBreadcrumbs,
 		documentLabel,
+		stylesPath,
+		showStylebook,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
@@ -86,12 +90,16 @@ export default function EditorInterface( {
 			documentLabel:
 				// translators: Default label for the Document in the Block Breadcrumb.
 				postTypeLabel || _x( 'Document', 'noun, breadcrumb' ),
+			stylesPath: getStylesPath(),
+			showStylebook: getShowStylebook(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
 		: __( 'Block Library' );
+	const shouldShowStylesCanvas =
+		showStylebook || stylesPath?.startsWith( '/revisions' );
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
@@ -127,7 +135,6 @@ export default function EditorInterface( {
 						}
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
-						title={ title }
 					/>
 				)
 			}
@@ -148,41 +155,35 @@ export default function EditorInterface( {
 						<EditorNotices />
 					) }
 
-					<EditorContentSlotFill.Slot>
-						{ ( [ editorCanvasView ] ) =>
-							editorCanvasView ? (
-								editorCanvasView
-							) : (
-								<>
-									{ ! isPreviewMode && mode === 'text' && (
-										<TextEditor
-											// We should auto-focus the canvas (title) on load.
-											// eslint-disable-next-line jsx-a11y/no-autofocus
-											autoFocus={ autoFocus }
-										/>
-									) }
-									{ ! isPreviewMode &&
-										! isLargeViewport &&
-										mode === 'visual' && (
-											<BlockToolbar hideDragHandle />
-										) }
-									{ ( isPreviewMode ||
-										mode === 'visual' ) && (
-										<VisualEditor
-											styles={ styles }
-											contentRef={ contentRef }
-											disableIframe={ disableIframe }
-											// We should auto-focus the canvas (title) on load.
-											// eslint-disable-next-line jsx-a11y/no-autofocus
-											autoFocus={ autoFocus }
-											iframeProps={ iframeProps }
-										/>
-									) }
-									{ children }
-								</>
-							)
-						}
-					</EditorContentSlotFill.Slot>
+					{ shouldShowStylesCanvas ? (
+						<StylesCanvas />
+					) : (
+						<>
+							{ ! isPreviewMode && mode === 'text' && (
+								<TextEditor
+									// We should auto-focus the canvas (title) on load.
+									// eslint-disable-next-line jsx-a11y/no-autofocus
+									autoFocus={ autoFocus }
+								/>
+							) }
+							{ ! isPreviewMode &&
+								! isLargeViewport &&
+								mode === 'visual' && (
+									<BlockToolbar hideDragHandle />
+								) }
+							{ ( isPreviewMode || mode === 'visual' ) && (
+								<VisualEditor
+									contentRef={ contentRef }
+									disableIframe={ disableIframe }
+									// We should auto-focus the canvas (title) on load.
+									// eslint-disable-next-line jsx-a11y/no-autofocus
+									autoFocus={ autoFocus }
+									iframeProps={ iframeProps }
+								/>
+							) }
+							{ children }
+						</>
+					) }
 				</>
 			}
 			footer={

package/src/components/entities-saved-states/entity-type-list.js

@@ -5,18 +5,12 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useContext } from '@wordpress/element';
+import { getGlobalStylesChanges } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
-import { unlock } from '../../lock-unlock';
-
-const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
 
 function getEntityDescription( entity, count ) {
 	switch ( entity ) {
@@ -35,20 +29,28 @@ function getEntityDescription( entity, count ) {
 }
 
 function GlobalStylesDescription( { record } ) {
-	const { user: currentEditorGlobalStyles } =
-		useContext( GlobalStylesContext );
-	const savedRecord = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord(
-				record.kind,
-				record.name,
-				record.key
-			),
+	const { editedRecord, savedRecord } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( coreStore );
+			return {
+				editedRecord: getEditedEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+				savedRecord: getEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+			};
+		},
 		[ record.kind, record.name, record.key ]
 	);
 
 	const globalStylesChanges = getGlobalStylesChanges(
-		currentEditorGlobalStyles,
+		editedRecord,
 		savedRecord,
 		{
 			maxResults: 10,