@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/global-styles/variations/variation.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,18 +10,19 @@ import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { unlock } from '../../../lock-unlock';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children } ) {
+export default function Variation( { variation, children, isPill } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
@@ -29,6 +30,7 @@ export default function Variation( { variation, children } ) {
 			user: {
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
+				_links: variation._links ?? {},
 			},
 			base,
 			merged: mergeBaseAndUserConfigs( base, variation ),
@@ -41,6 +43,7 @@ export default function Variation( { variation, children } ) {
 		setUserConfig( () => ( {
 			settings: variation.settings,
 			styles: variation.styles,
+			_links: variation._links,
 		} ) );
 	};
 
@@ -69,12 +72,9 @@ export default function Variation( { variation, children } ) {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
+				className={ clsx( 'edit-site-global-styles-variations_item', {
+					'is-active': isActive,
+				} ) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
@@ -84,7 +84,12 @@ export default function Variation( { variation, children } ) {
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
-				<div className="edit-site-global-styles-variations_item-preview">
+				<div
+					className={ clsx(
+						'edit-site-global-styles-variations_item-preview',
+						{ 'is-pill': isPill }
+					) }
+				>
 					{ children( isFocused ) }
 				</div>
 			</div>

package/src/components/global-styles/variations/variations-color.js

@@ -1,36 +1,34 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
 
-	if ( ! colorVariations?.length ) {
+	// Return null if there is only one variation (the default).
+	if ( colorVariations?.length <= 1 ) {
 		return null;
 	}
 
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid columns={ 3 } gap={ gap }>
+			<VStack spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation }>
+					<Variation key={ index } variation={ variation } isPill>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</Grid>
+			</VStack>
 		</VStack>
 	);
 }

package/src/components/global-styles/variations/variations-panel.js

@@ -2,16 +2,25 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { NavigationButtonAsItem } from '../navigation-button';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function getCoreBlockStyles( blockStyles ) {
-	return blockStyles?.filter( ( style ) => style.source === 'block' );
+// Only core block styles (source === block) or block styles with a matching
+// theme.json style variation will be configurable via Global Styles.
+function getFilteredBlockStyles( blockStyles, variations ) {
+	return blockStyles?.filter(
+		( style ) =>
+			style.source === 'block' || variations.includes( style.name )
+	);
 }
 
 export function useBlockVariations( name ) {
@@ -22,8 +31,10 @@ export function useBlockVariations( name ) {
 		},
 		[ name ]
 	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return coreBlockStyles;
+	const [ variations ] = useGlobalStyle( 'variations', name );
+	const variationNames = Object.keys( variations ?? {} );
+
+	return getFilteredBlockStyles( blockStyles, variationNames );
 }
 
 export function VariationsPanel( { name } ) {

package/src/components/global-styles/variations/variations-typography.js

@@ -19,7 +19,8 @@ import Subtitle from '../subtitle';
 export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
-	if ( ! typographyVariations?.length ) {
+	// Return null if there is only one variation (the default).
+	if ( typographyVariations?.length <= 1 ) {
 		return null;
 	}
 

package/src/components/global-styles-renderer/index.js

@@ -10,11 +10,17 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings ] = useGlobalStylesOutput();
+	const postType = useSelect( ( select ) => {
+		return select( editSiteStore ).getEditedPostType();
+	} );
+	const [ styles, settings ] = useGlobalStylesOutput(
+		postType !== TEMPLATE_POST_TYPE
+	);
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 

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

@@ -21,12 +21,12 @@ import {
 /**
  * Internal dependencies
  */
-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 '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
+import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
 
@@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					gap={ 1 }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
@@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() {
 							}
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
+							size="compact"
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened
 							}
+							size="compact"
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />

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

@@ -38,14 +38,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -104,6 +96,3 @@
 	}
 }
 
-.edit-site-sidebar__panel {
-	margin-top: -1px;
-}

package/src/components/layout/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -72,7 +75,6 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
-		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -104,9 +106,6 @@ export default function Layout() {
 				'core',
 				'showBlockBreadcrumbs'
 			),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -151,7 +150,7 @@ export default function Layout() {
 	let commandContext = 'site-editor';
 
 	if ( canvasMode === 'edit' ) {
-		commandContext = 'site-editor-edit';
+		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
@@ -177,7 +176,7 @@ export default function Layout() {
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
-				className={ classnames(
+				className={ clsx(
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
@@ -186,7 +185,6 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
-						'is-zoom-out': isZoomOutMode,
 						'has-block-breadcrumbs':
 							hasBlockBreadcrumbs &&
 							! isDistractionFree &&
@@ -267,6 +265,8 @@ export default function Layout() {
 						</NavigableRegion>
 					) }
 
+					<EditorSnackbars />
+
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
 							{ areas.mobile }
@@ -291,7 +291,7 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<div
-									className={ classnames(
+									className={ clsx(
 										'edit-site-layout__canvas',
 										{
 											'is-right-aligned':

package/src/components/layout/router.js

@@ -3,7 +3,7 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -17,49 +17,84 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
+function useRedirectOldPaths() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
+	useEffect( () => {
+		const { postType, path, categoryType, ...rest } = params;
+
+		if ( path === '/wp_template_part/all' ) {
+			history.replace( { postType: TEMPLATE_PART_POST_TYPE } );
+		}
+
+		if ( path === '/page' ) {
+			history.replace( {
+				postType: 'page',
+				...rest,
+			} );
+		}
+
+		if ( path === '/wp_template' ) {
+			history.replace( {
+				postType: TEMPLATE_POST_TYPE,
+				...rest,
+			} );
+		}
+
+		if ( path === '/patterns' ) {
+			history.replace( {
+				postType:
+					categoryType === TEMPLATE_PART_POST_TYPE
+						? TEMPLATE_PART_POST_TYPE
+						: PATTERN_TYPES.user,
+				...rest,
+			} );
+		}
 
-	// Note: Since "sidebar" is not yet supported here,
-	// returning undefined from "mobile" means show the sidebar.
+		if ( path === '/navigation' ) {
+			history.replace( {
+				postType: NAVIGATION_POST_TYPE,
+				...rest,
+			} );
+		}
+	}, [ history, params ] );
+}
+
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const { params } = useLocation();
+	const { postType, postId, path, layout, isCustom, canvas } = params;
+	useRedirectOldPaths();
 
 	// Page list
-	if ( path === '/page' ) {
+	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'pages-list',
+			key: 'pages',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
-						title={ __( 'Manage pages' ) }
+						title={ __( 'Pages' ) }
+						backPath={ {} }
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
 				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor
-						isLoading={ isSiteEditorLoading }
-						onClick={ () =>
-							history.push( {
-								postType: 'page',
-								postId,
-								canvas: 'edit',
-							} )
-						}
-					/>
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile:
 					canvas === 'edit' ? (
@@ -74,39 +109,17 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// Regular other post types
-	if ( postType && postId ) {
-		let sidebar;
-		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
-			sidebar = <SidebarNavigationScreenPattern />;
-		} else if ( postType === 'wp_template' ) {
-			sidebar = <SidebarNavigationScreenTemplate />;
-		} else if ( postType === 'page' ) {
-			sidebar = <SidebarNavigationScreenPage />;
-		} else {
-			sidebar = <SidebarNavigationScreenNavigationMenu />;
-		}
-		return {
-			key: 'page',
-			areas: {
-				sidebar,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
-		};
-	}
-
 	// Templates
-	if ( path === '/wp_template' ) {
+	if ( postType === TEMPLATE_POST_TYPE ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
-			key: 'templates-list',
+			key: 'templates',
 			areas: {
-				sidebar: <SidebarNavigationScreenTemplatesBrowse />,
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
+				),
 				content: <PageTemplates />,
-				preview: isListLayout && (
+				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile: <PageTemplates />,
@@ -117,17 +130,19 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	/* Patterns and Template Parts
-	 * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
-	 * backwards compatibility.
-	 */
-	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
+	// Patterns
+	if (
+		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
+	) {
 		return {
 			key: 'patterns',
 			areas: {
-				sidebar: <SidebarNavigationScreenPatterns />,
+				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
+				preview: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -137,7 +152,9 @@ export default function useLayoutAreas() {
 		return {
 			key: 'styles',
 			areas: {
-				sidebar: <SidebarNavigationScreenGlobalStyles />,
+				sidebar: (
+					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />
@@ -147,11 +164,29 @@ export default function useLayoutAreas() {
 	}
 
 	// Navigation
-	if ( path === '/navigation' ) {
+	if ( postType === NAVIGATION_POST_TYPE ) {
+		if ( postId ) {
+			return {
+				key: 'navigation',
+				areas: {
+					sidebar: (
+						<SidebarNavigationScreenNavigationMenu
+							backPath={ { postType: NAVIGATION_POST_TYPE } }
+						/>
+					),
+					preview: <Editor isLoading={ isSiteEditorLoading } />,
+					mobile: canvas === 'edit' && (
+						<Editor isLoading={ isSiteEditorLoading } />
+					),
+				},
+			};
+		}
 		return {
-			key: 'styles',
+			key: 'navigation',
 			areas: {
-				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				sidebar: (
+					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />

package/src/components/layout/style.scss

@@ -118,7 +118,7 @@
 		justify-content: flex-end;
 	}
 
-	& > div {
+	.edit-site-resizable-frame__inner {
 		color: $gray-900;
 	}
 
@@ -128,6 +128,7 @@
 		width: calc(100% - #{$canvas-padding});
 
 		.edit-site-resizable-frame__inner-content {
+			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 			transition: border-radius 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
@@ -142,10 +143,6 @@
 		top: 0;
 		bottom: 0;
 		width: 100%;
-
-		& > div {
-			border-radius: 0;
-		}
 	}
 }
 
@@ -172,7 +169,6 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-bottom: 1px solid transparent;
 
 	&:hover,
 	&:active {
@@ -279,3 +275,11 @@
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }
+
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+}

package/src/components/{header-edit-mode/more-menu → more-menu}/index.js

@@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 

package/src/components/page/header.js

@@ -5,7 +5,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	FlexBlock,
+	__experimentalVStack as VStack,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -15,8 +15,8 @@ import {
 
 export default function Header( { title, subTitle, actions } ) {
 	return (
-		<HStack as="header" alignment="left" className="edit-site-page-header">
-			<FlexBlock className="edit-site-page-header__page-title">
+		<VStack className="edit-site-page-header" as="header" spacing={ 0 }>
+			<HStack className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
 					level={ 3 }
@@ -25,15 +25,19 @@ export default function Header( { title, subTitle, actions } ) {
 				>
 					{ title }
 				</Heading>
-				{ subTitle && (
-					<Text as="p" className="edit-site-page-header__sub-title">
-						{ subTitle }
-					</Text>
-				) }
-			</FlexBlock>
-			<FlexItem className="edit-site-page-header__actions">
-				{ actions }
-			</FlexItem>
-		</HStack>
+				<FlexItem className="edit-site-page-header__actions">
+					{ actions }
+				</FlexItem>
+			</HStack>
+			{ subTitle && (
+				<Text
+					variant="muted"
+					as="p"
+					className="edit-site-page-header__sub-title"
+				>
+					{ subTitle }
+				</Text>
+			) }
+		</VStack>
 	);
 }