@wordpress/edit-site 6.33.3 → 6.34.0

package/src/components/sidebar-navigation-screen-global-styles/content.js

@@ -3,25 +3,53 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	StyleVariations,
+	ColorVariations,
+	TypographyVariations,
+} from '@wordpress/global-styles-ui';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import StyleVariationsContainer from '../global-styles/style-variations-container';
-import ColorVariations from '../global-styles/variations/variations-color';
-import TypographyVariations from '../global-styles/variations/variations-typography';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyles } = unlock( editorPrivateApis );
 
 export default function SidebarNavigationScreenGlobalStylesContent() {
 	const gap = 3;
+	const {
+		user: userConfig,
+		base: baseConfig,
+		setUser: setUserConfig,
+	} = useGlobalStyles();
 
 	return (
 		<VStack
 			spacing={ 10 }
 			className="edit-site-global-styles-variation-container"
 		>
-			<StyleVariationsContainer gap={ gap } />
-			<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
-			<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />
+			<StyleVariations
+				value={ userConfig }
+				baseValue={ baseConfig || {} }
+				onChange={ setUserConfig }
+				gap={ gap }
+			/>
+			<ColorVariations
+				value={ userConfig }
+				baseValue={ baseConfig || {} }
+				onChange={ setUserConfig }
+				title={ __( 'Palettes' ) }
+				gap={ gap }
+			/>
+			<TypographyVariations
+				value={ userConfig }
+				baseValue={ baseConfig || {} }
+				onChange={ setUserConfig }
+				title={ __( 'Typography' ) }
+				gap={ gap }
+			/>
 		</VStack>
 	);
 }

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -15,7 +16,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
@@ -40,9 +41,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		revisionsCount,
 	} = useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { setStylesPath } = unlock( useDispatch( editorStore ) );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
@@ -58,11 +57,9 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the global styles revisions once the canvas mode is set to edit,
-		// and the global styles sidebar is open. The global styles UI is responsible
-		// for redirecting to the revisions screen once the editor canvas container
-		// has been set to 'global-styles-revisions'.
-		setEditorCanvasContainerView( 'global-styles-revisions' );
-	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+		// and the global styles sidebar is open. Set the path to revisions.
+		setStylesPath( '/revisions' );
+	}, [ openGlobalStyles, setStylesPath ] );
 
 	// If there are no revisions, do not render a footer.
 	const shouldShowGlobalStylesFooter =

package/src/components/sidebar-navigation-screen-main/index.js

@@ -4,8 +4,7 @@
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -14,8 +13,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
@@ -82,14 +79,6 @@ export default function SidebarNavigationScreenMain( { customDescription } ) {
 		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
 		[]
 	);
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-
-	// Clear the editor canvas container view when accessing the main navigation screen.
-	useEffect( () => {
-		setEditorCanvasContainerView( undefined );
-	}, [ setEditorCanvasContainerView ] );
 
 	let description;
 	if ( customDescription ) {

package/src/components/sidebar-navigation-screen-patterns/style.scss

@@ -22,7 +22,7 @@
 
 	h2 {
 		font-size: 11px;
-		font-weight: 500;
+		font-weight: $font-weight-medium;
 		text-transform: uppercase;
 	}
 }

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -13,7 +13,7 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useAddedBy } from '../page-templates/hooks';
-import { layout } from '@wordpress/icons';
+import { commentAuthorAvatar, published } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -62,14 +62,14 @@ export default function DataviewsTemplatesSidebarContent() {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
 			<SidebarNavigationItem
 				to="/template"
-				icon={ layout }
+				icon={ published }
 				aria-current={ activeView === 'active' }
 			>
 				{ __( 'Active templates' ) }
 			</SidebarNavigationItem>
 			<SidebarNavigationItem
 				to={ addQueryArgs( '/template', { activeView: 'user' } ) }
-				icon={ layout }
+				icon={ commentAuthorAvatar }
 				aria-current={ activeView === 'user' }
 			>
 				{

package/src/components/site-editor-routes/stylebook.js

@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
-import { StyleBookPreview } from '../style-book';
+import { unlock } from '../../lock-unlock';
 import { isClassicThemeWithStyleBookSupport } from './utils';
 
+const { StyleBookPreview } = unlock( editorPrivateApis );
+
 export const stylebookRoute = {
 	name: 'stylebook',
 	path: '/stylebook',

package/src/components/site-editor-routes/styles.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -9,10 +11,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Editor from '../editor';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
-import { StyleBookPreview } from '../style-book';
+import SidebarGlobalStyles from '../sidebar-global-styles';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { StyleBookPreview } = unlock( editorPrivateApis );
 
 function MobileGlobalStylesUI() {
 	const { query = {} } = useLocation();
@@ -22,19 +24,43 @@ function MobileGlobalStylesUI() {
 		return <Editor />;
 	}
 
-	return <GlobalStylesUIWrapper />;
+	return <SidebarGlobalStyles />;
+}
+
+function StylesPreviewArea() {
+	const { path, query } = useLocation();
+	const history = useHistory();
+	const isStylebook = query.preview === 'stylebook';
+
+	// Get section from URL query params
+	const section = query.section ?? '/';
+	const onChangeSection = ( updatedSection ) => {
+		history.navigate(
+			addQueryArgs( path, {
+				section: updatedSection,
+			} )
+		);
+	};
+
+	if ( isStylebook ) {
+		return (
+			<StyleBookPreview
+				path={ section }
+				onPathChange={ onChangeSection }
+			/>
+		);
+	}
+
+	return <Editor />;
 }
 
 export const stylesRoute = {
 	name: 'styles',
 	path: '/styles',
 	areas: {
-		content: <GlobalStylesUIWrapper />,
+		content: <SidebarGlobalStyles />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview( { query } ) {
-			const isStylebook = query.preview === 'stylebook';
-			return isStylebook ? <StyleBookPreview /> : <Editor />;
-		},
+		preview: <StylesPreviewArea />,
 		mobile: <MobileGlobalStylesUI />,
 	},
 	widths: {

package/src/components/site-hub/style.scss

@@ -29,7 +29,7 @@
 	display: block;
 	flex-grow: 1;
 	font-size: 15px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	overflow: hidden;
 	// Add space for the ↗ to render.
 	padding-right: $grid-unit-20;

package/src/components/welcome-guide/index.js

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import WelcomeGuideEditor from './editor';
-import WelcomeGuideStyles from './styles';
 import WelcomeGuidePage from './page';
 import WelcomeGuideTemplate from './template';
 
@@ -10,7 +9,6 @@ export default function WelcomeGuide( { postType } ) {
 	return (
 		<>
 			<WelcomeGuideEditor />
-			<WelcomeGuideStyles />
 			{ postType === 'page' && <WelcomeGuidePage /> }
 			{ postType === 'wp_template' && <WelcomeGuideTemplate /> }
 		</>

package/src/components/welcome-guide/style.scss

@@ -3,8 +3,7 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&.guide-editor .edit-site-welcome-guide__image,
-	&.guide-styles .edit-site-welcome-guide__image {
+	&.guide-editor .edit-site-welcome-guide__image {
 		background: #00a0d2;
 	}
 

package/src/hooks/commands/use-common-commands.js

@@ -6,10 +6,13 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
 import { rotateLeft, rotateRight, help, backup } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -17,8 +20,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useGlobalStyles } = unlock( editorPrivateApis );
 
 const getGlobalStylesToggleWelcomeGuideCommands = () =>
 	function useGlobalStylesToggleWelcomeGuideCommands() {
@@ -69,7 +72,14 @@ const getGlobalStylesToggleWelcomeGuideCommands = () =>
 
 const getGlobalStylesResetCommands = () =>
 	function useGlobalStylesResetCommands() {
-		const [ canReset, onReset ] = useGlobalStylesReset();
+		const { user, setUser } = useGlobalStyles();
+
+		// Check if there are user customizations that can be reset
+		const canReset =
+			!! user &&
+			( Object.keys( user?.styles ?? {} ).length > 0 ||
+				Object.keys( user?.settings ?? {} ).length > 0 );
+
 		const commands = useMemo( () => {
 			if ( ! canReset ) {
 				return [];
@@ -82,11 +92,11 @@ const getGlobalStylesResetCommands = () =>
 					icon: isRTL() ? rotateRight : rotateLeft,
 					callback: ( { close } ) => {
 						close();
-						onReset();
+						setUser( { styles: {}, settings: {} } );
 					},
 				},
 			];
-		}, [ canReset, onReset ] );
+		}, [ canReset, setUser ] );
 
 		return {
 			isLoading: false,
@@ -96,9 +106,8 @@ const getGlobalStylesResetCommands = () =>
 
 const getGlobalStylesOpenRevisionsCommands = () =>
 	function useGlobalStylesOpenRevisionsCommands() {
-		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-			useDispatch( editSiteStore )
-		);
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { setStylesPath } = unlock( useDispatch( editorStore ) );
 		const { params } = useLocation();
 		const { canvas = 'view' } = params;
 		const history = useHistory();
@@ -131,16 +140,14 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 							} );
 						}
 						openGeneralSidebar( 'edit-site/global-styles' );
-						setEditorCanvasContainerView(
-							'global-styles-revisions'
-						);
+						setStylesPath( '/revisions' );
 					},
 				},
 			];
 		}, [
 			history,
 			openGeneralSidebar,
-			setEditorCanvasContainerView,
+			setStylesPath,
 			hasRevisions,
 			canvas,
 		] );

package/src/hooks/commands/use-set-command-context.js

@@ -10,7 +10,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
 
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
@@ -25,8 +24,6 @@ export default function useSetCommandContext() {
 		return select( blockEditorStore ).getBlockSelectionStart();
 	}, [] );
 
-	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
-
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 	if ( canvas === 'edit' ) {
@@ -35,13 +32,5 @@ export default function useSetCommandContext() {
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
 	}
-	if ( hasEditorCanvasContainer ) {
-		/*
-		 * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context
-		 * to remove the suggested commands that may not make sense with Style Book or Style Revisions open.
-		 * See https://github.com/WordPress/gutenberg/issues/62216.
-		 */
-		commandContext = '';
-	}
 	useCommandContext( commandContext );
 }

package/src/index.js

@@ -20,7 +20,6 @@ import {
 /**
  * Internal dependencies
  */
-import './hooks';
 import { store as editSiteStore } from './store';
 import { unlock } from './lock-unlock';
 import App from './components/app';

package/src/posts.js

@@ -18,7 +18,6 @@ import {
 /**
  * Internal dependencies
  */
-import './hooks';
 import { store as editSiteStore } from './store';
 
 /**

package/src/posts.scss

@@ -9,7 +9,6 @@
 @use "./components/sidebar/style.scss" as *;
 @use "./components/site-hub/style.scss" as *;
 @use "./components/site-icon/style.scss" as *;
-@use "./components/editor-canvas-container/style.scss" as *;
 @use "./components/post-list/style.scss" as *;
 @use "./components/resizable-frame/style.scss" as *;
 

package/src/store/private-actions.js

@@ -1,17 +1,3 @@
-/**
- * Action that switches the editor canvas container view.
- *
- * @param {?string} view Editor canvas container view.
- */
-export const setEditorCanvasContainerView =
-	( view ) =>
-	( { dispatch } ) => {
-		dispatch( {
-			type: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',
-			view,
-		} );
-	};
-
 export function registerRoute( route ) {
 	return {
 		type: 'REGISTER_ROUTE',

package/src/store/private-selectors.js

@@ -1,14 +1,3 @@
-/**
- * Returns the editor canvas container view.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} Editor canvas container view.
- */
-export function getEditorCanvasContainerView( state ) {
-	return state.editorCanvasContainerView;
-}
-
 export function getRoutes( state ) {
 	return state.routes;
 }

package/src/store/reducer.js

@@ -64,23 +64,6 @@ export function saveViewPanel( state = false, action ) {
 	return state;
 }
 
-/**
- * Reducer used to track the site editor canvas container view.
- * Default is `undefined`, denoting the default, visual block editor.
- * This could be, for example, `'style-book'` (the style book).
- *
- * @param {string|undefined} state  Current state.
- * @param {Object}           action Dispatched action.
- */
-function editorCanvasContainerView( state = undefined, action ) {
-	switch ( action.type ) {
-		case 'SET_EDITOR_CANVAS_CONTAINER_VIEW':
-			return action.view;
-	}
-
-	return state;
-}
-
 function routes( state = [], action ) {
 	switch ( action.type ) {
 		case 'REGISTER_ROUTE':
@@ -96,6 +79,5 @@ export default combineReducers( {
 	settings,
 	editedPost,
 	saveViewPanel,
-	editorCanvasContainerView,
 	routes,
 } );

package/src/style.scss

@@ -4,12 +4,10 @@
 @use "@wordpress/admin-ui/build-style/style.css" as admin-ui;
 @use "@wordpress/dataviews/build-style/style.css" as dataviews;
 @use "@wordpress/fields/build-style/style.css" as fields;
+@use "@wordpress/global-styles-ui/build-style/style.css" as global-styles-ui;
 @use "./components/add-new-template/style.scss" as *;
 @use "./components/block-editor/style.scss" as *;
 @use "./components/canvas-loader/style.scss" as *;
-@use "./components/global-styles/style.scss" as *;
-@use "./components/global-styles/screen-revisions/style.scss" as *;
-@use "./components/global-styles-sidebar/style.scss" as *;
 @use "./components/page-patterns/style.scss" as *;
 @use "./components/page-templates/style.scss" as *;
 @use "./components/editor/style.scss" as *;
@@ -30,16 +28,11 @@
 @use "./components/sidebar-dataviews/style.scss" as *;
 @use "./components/site-hub/style.scss" as *;
 @use "./components/site-icon/style.scss" as *;
-@use "./components/style-book/style.scss" as *;
-@use "./components/editor-canvas-container/style.scss" as *;
 @use "./components/post-edit/style.scss" as *;
 @use "./components/post-list/style.scss" as *;
 @use "./components/resizable-frame/style.scss" as *;
-@use "./hooks/push-changes-to-global-styles/style.scss" as *;
-@use "./components/global-styles/font-library-modal/style.scss" as *;
 @use "./components/pagination/style.scss" as *;
-@use "./components/global-styles/variations/style.scss" as *;
-@use "./components/sidebar-global-styles-wrapper/style.scss" as *;
+@use "./components/sidebar-global-styles/style.scss" as *;
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {

package/tsconfig.json

@@ -21,6 +21,8 @@
 		{ "path": "../element" },
 		{ "path": "../escape-html" },
 		{ "path": "../fields" },
+		{ "path": "../global-styles-engine" },
+		{ "path": "../global-styles-ui" },
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
@@ -31,6 +33,7 @@
 		{ "path": "../notices" },
 		{ "path": "../keycodes" },
 		{ "path": "../plugins" },
+		{ "path": "../preferences" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
 		{ "path": "../rich-text" },
@@ -40,16 +43,5 @@
 		{ "path": "../views" },
 		{ "path": "../wordcount" }
 	],
-	// NOTE: This package is being progressively typed. You are encouraged to
-	// expand this array with files which can be type-checked. At some point in
-	// the future, this can be simplified to an `includes` of `src/**/*`.
-	"files": [
-		"src/components/style-book/categories.ts",
-		"src/components/style-book/constants.ts",
-		"src/components/style-book/types.ts",
-		"src/components/style-book/color-examples.tsx",
-		"src/components/style-book/duotone-examples.tsx",
-		"src/components/style-book/examples.tsx"
-	],
 	"include": []
 }