@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

package/src/components/page-templates/index.js

@@ -93,41 +93,32 @@ export default function PageTemplates() {
 			combinedTemplates: false,
 		} );
 	const { records: staticRecords, isResolving: isLoadingStaticData } =
-		useEntityRecordsWithPermissions( 'postType', 'wp_registered_template', {
+		useEntityRecordsWithPermissions( 'root', 'registeredTemplate', {
+			// This should not be needed, the endpoint returns all registered
+			// templates, but it's not possible right now to turn off pagination
+			// for entity configs.
 			per_page: -1,
 		} );
 
 	const activeTemplates = useMemo( () => {
-		const _active = [ ...staticRecords ].filter(
-			( record ) => ! record.is_custom
-		);
+		const _active = [ ...staticRecords ];
 		if ( activeTemplatesOption ) {
 			for ( const activeSlug in activeTemplatesOption ) {
 				const activeId = activeTemplatesOption[ activeSlug ];
-				if ( activeId === false ) {
-					// Remove the template from the array.
+				// Replace the template in the array.
+				const template = userRecords.find(
+					( userRecord ) =>
+						userRecord.id === activeId &&
+						userRecord.theme === activeTheme.stylesheet
+				);
+				if ( template ) {
 					const index = _active.findIndex(
-						( template ) => template.slug === activeSlug
+						( { slug } ) => slug === template.slug
 					);
 					if ( index !== -1 ) {
-						_active.splice( index, 1 );
-					}
-				} else {
-					// Replace the template in the array.
-					const template = userRecords.find(
-						( userRecord ) =>
-							userRecord.id === activeId &&
-							userRecord.theme === activeTheme.stylesheet
-					);
-					if ( template ) {
-						const index = _active.findIndex(
-							( { slug } ) => slug === template.slug
-						);
-						if ( index !== -1 ) {
-							_active[ index ] = template;
-						} else {
-							_active.push( template );
-						}
+						_active[ index ] = template;
+					} else {
+						_active.push( template );
 					}
 				}
 			}
@@ -135,33 +126,55 @@ export default function PageTemplates() {
 		return _active;
 	}, [ userRecords, staticRecords, activeTemplatesOption, activeTheme ] );
 
-	let _records;
 	let isLoadingData;
 	if ( activeView === 'active' ) {
-		_records = activeTemplates;
 		isLoadingData = isLoadingUserRecords || isLoadingStaticData;
 	} else if ( activeView === 'user' ) {
-		_records = userRecords;
 		isLoadingData = isLoadingUserRecords;
 	} else {
-		_records = staticRecords;
 		isLoadingData = isLoadingStaticData;
 	}
 
 	const records = useMemo( () => {
+		function isCustom( record ) {
+			// For registered templates, the is_custom field is defined.
+			return (
+				record.is_custom ??
+				// For user templates it's custom if the is_wp_suggestion meta
+				// field is not set and the slug is not found in the default
+				// template types.
+				( ! record.meta?.is_wp_suggestion &&
+					! defaultTemplateTypes.some(
+						( type ) => type.slug === record.slug
+					) )
+			);
+		}
+
+		let _records;
+		if ( activeView === 'active' ) {
+			// Don't show active custom templates in the active view.
+			_records = activeTemplates.filter(
+				( record ) => ! isCustom( record )
+			);
+		} else if ( activeView === 'user' ) {
+			_records = userRecords;
+		} else {
+			_records = staticRecords;
+		}
 		return _records.map( ( record ) => ( {
 			...record,
-			_isActive: activeTemplates.find(
+			_isActive: activeTemplates.some(
 				( template ) => template.id === record.id
 			),
-			_isCustom:
-				record.is_custom ||
-				( ! record.meta?.is_wp_suggestion &&
-					! defaultTemplateTypes.find(
-						( type ) => type.slug === record.slug
-					) ),
+			_isCustom: isCustom( record ),
 		} ) );
-	}, [ _records, activeTemplates, defaultTemplateTypes ] );
+	}, [
+		activeTemplates,
+		defaultTemplateTypes,
+		userRecords,
+		staticRecords,
+		activeView,
+	] );
 
 	const users = useSelect(
 		( select ) => {
@@ -325,7 +338,7 @@ export default function PageTemplates() {
 				onChangeSelection={ onChangeSelection }
 				isItemClickable={ () => true }
 				onClickItem={ ( item ) => {
-					if ( item.type === 'wp_registered_template' ) {
+					if ( typeof item.id === 'string' ) {
 						setSelectedRegisteredTemplate( item );
 					} else {
 						history.navigate(

package/src/components/{sidebar-global-styles-wrapper → sidebar-global-styles}/index.js

@@ -3,44 +3,30 @@
  */
 import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalHStack as HStack,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-} from '@wordpress/components';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { seen, moreVertical } from '@wordpress/icons';
+import { seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import GlobalStylesUI from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 
+const { GlobalStylesUIWrapper, GlobalStylesActionMenu } =
+	unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
 	path,
+	onChangeSection,
 } ) => {
 	const history = useHistory();
-	const canEditCSS = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return !! globalStyles?._links?.[ 'wp:action-edit-css' ];
-	}, [] );
 
 	return (
 		<HStack>
@@ -58,32 +44,10 @@ const GlobalStylesPageActions = ( {
 				} }
 				size="compact"
 			/>
-			{ canEditCSS && (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'More' ) }
-					toggleProps={ { size: 'compact' } }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ canEditCSS && (
-								<MenuItem
-									onClick={ () => {
-										onClose();
-										history.navigate(
-											addQueryArgs( path, {
-												section: '/css',
-											} )
-										);
-									} }
-								>
-									{ __( 'Additional CSS' ) }
-								</MenuItem>
-							) }
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			) }
+			<GlobalStylesActionMenu
+				hideWelcomeGuide
+				onChangePath={ onChangeSection }
+			/>
 		</HStack>
 	);
 };
@@ -110,7 +74,7 @@ export const useSection = () => {
 	}, [ path, query.section, history ] );
 };
 
-export default function GlobalStylesUIWrapper() {
+export default function SidebarGlobalStyles() {
 	const { path } = useLocation();
 
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
@@ -127,13 +91,17 @@ export default function GlobalStylesUIWrapper() {
 						isStyleBookOpened={ isStyleBookOpened }
 						setIsStyleBookOpened={ setIsStyleBookOpened }
 						path={ path }
+						onChangeSection={ onChangeSection }
 					/>
 				) : null
 			}
 			className="edit-site-styles"
 			title={ __( 'Styles' ) }
 		>
-			<GlobalStylesUI path={ section } onPathChange={ onChangeSection } />
+			<GlobalStylesUIWrapper
+				path={ section }
+				onPathChange={ onChangeSection }
+			/>
 		</Page>
 	);
 }

package/src/components/{sidebar-global-styles-wrapper → sidebar-global-styles}/style.scss

@@ -2,13 +2,13 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-styles {
-	.edit-site-global-styles-screen-root {
+	.global-styles-ui-screen-root {
 		box-shadow: none;
 		& > div > hr {
 			display: none;
 		}
 	}
-	.edit-site-global-styles-sidebar__navigator-provider {
+	.global-styles-ui-sidebar__navigator-provider {
 		.components-tools-panel {
 			border-top: none;
 		}
@@ -16,7 +16,7 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		.edit-site-global-styles-sidebar__navigator-screen {
+		.global-styles-ui-sidebar__navigator-screen {
 			padding-top: $grid-unit-15;
 			padding-left: $grid-unit-15;
 			padding-right: $grid-unit-15;

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

@@ -72,29 +72,22 @@
 	}
 }
 
-.edit-site-global-styles-variation-title {
-	color: $gray-300;
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: $font-weight-medium;
-}
-
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item {
 
 	// Use a white outline to provide contrast with the dark background.
-	.edit-site-global-styles-variations_item-preview {
+	.global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.05);
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+	&:not(.is-active):hover .global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.15);
 	}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
+	&.is-active .global-styles-ui-variations_item-preview {
 		outline-color: $white;
 	}
 
-	&:focus-visible .edit-site-global-styles-variations_item-preview {
+	&:focus-visible .global-styles-ui-variations_item-preview {
 		outline-color: var(--wp-admin-theme-color);
 	}
 }

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-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 );
@@ -38,13 +38,12 @@ export default function DataviewsTemplatesSidebarContent() {
 	const {
 		query: { activeView = 'active' },
 	} = useLocation();
-	const { records } = useEntityRecords(
-		'postType',
-		'wp_registered_template',
-		{
-			per_page: -1,
-		}
-	);
+	const { records } = useEntityRecords( 'root', 'registeredTemplate', {
+		// This should not be needed, the endpoint returns all registered
+		// templates, but it's not possible right now to turn off pagination for
+		// entity configs.
+		per_page: -1,
+	} );
 	const firstItemPerAuthorText = useMemo( () => {
 		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
 			const author = template.author_text;
@@ -63,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/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;
 	}