@wordpress/edit-site 6.50.1-next.v.202607070741.0 → 7.1.0

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -54,7 +54,7 @@ function SuggestionListItem( {
 			<WCText
 				size="body"
 				lineHeight={ 1.53846153846 } // 20px
-				weight={ 500 }
+				weight="var(--wpds-typography-font-weight-emphasis)"
 				className={ `${ baseCssClass }__title` }
 			>
 				<TextHighlight
@@ -223,7 +223,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.all_items }
@@ -247,7 +247,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.singular_name }

package/src/components/add-new-template/index.js

@@ -131,7 +131,7 @@ function TemplateListItem( {
 				>
 					<WCText
 						align="center"
-						weight={ 500 }
+						weight="var(--wpds-typography-font-weight-emphasis)"
 						lineHeight={ 1.53846153846 } // 20px
 					>
 						{ title }

package/src/components/add-new-template-legacy/add-custom-template-modal-content.js

@@ -54,7 +54,7 @@ function SuggestionListItem( {
 			<WCText
 				size="body"
 				lineHeight={ 1.53846153846 } // 20px
-				weight={ 500 }
+				weight="var(--wpds-typography-font-weight-emphasis)"
 				className={ `${ baseCssClass }__title` }
 			>
 				<TextHighlight
@@ -225,7 +225,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.all_items }
@@ -249,7 +249,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.singular_name }

package/src/components/add-new-template-legacy/index.js

@@ -132,7 +132,7 @@ function TemplateListItem( {
 				>
 					<WCText
 						align="center"
-						weight={ 500 }
+						weight="var(--wpds-typography-font-weight-emphasis)"
 						lineHeight={ 1.53846153846 } // 20px
 					>
 						{ title }

package/src/components/canvas-loader/index.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	privateApis as componentsPrivateApis,
-	ProgressBar,
-} from '@wordpress/components';
+import { ProgressBar } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
@@ -14,12 +11,10 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import { unlock } from '../../lock-unlock';
 
-const { Theme } = unlock( componentsPrivateApis );
 const { useStyle } = unlock( editorPrivateApis );
 
 export default function CanvasLoader( { id } ) {
 	const textColor = useStyle( 'color.text' );
-	const backgroundColor = useStyle( 'color.background' );
 	const { elapsed, total } = useSelect( ( select ) => {
 		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
 		const resolving = selectorsByStatus.resolving ?? 0;
@@ -31,10 +26,11 @@ export default function CanvasLoader( { id } ) {
 	}, [] );
 
 	return (
-		<div className="edit-site-canvas-loader">
-			<Theme accent={ textColor } background={ backgroundColor }>
-				<ProgressBar id={ id } max={ total } value={ elapsed } />
-			</Theme>
+		<div
+			className="edit-site-canvas-loader"
+			style={ textColor ? { '--color': textColor } : undefined }
+		>
+			<ProgressBar id={ id } max={ total } value={ elapsed } />
 		</div>
 	);
 }

package/src/components/canvas-loader/style.scss

@@ -1,4 +1,7 @@
 .edit-site-canvas-loader {
+	// TODO: Use design tokens with ThemeProvider.
+	--wp-components-color-foreground: var(--color);
+
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -13,10 +16,6 @@
 		animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
 		animation-fill-mode: forwards;
 	}
-
-	& > div {
-		width: 160px;
-	}
 }
 
 @keyframes edit-site-canvas-loader__fade-in-animation {

package/src/components/editor/index.js

@@ -16,7 +16,7 @@ import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -205,39 +205,31 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<div className="edit-site-editor__view-mode-toggle">
-										<Button
-											__next40pxDefaultSize
-											label={ __( 'Open Navigation' ) }
-											showTooltip
-											tooltipPosition="middle right"
-											onClick={ () => {
-												resetZoomLevel();
-												setCurrentRevisionId( null );
-												history.navigate(
-													getNavigationPath(
-														location,
-														postWithTemplate
-															? context.postType
-															: postType
-													),
-													{
-														transition:
-															'canvas-mode-view-transition',
-													}
-												);
-											} }
-										/>
-										<div className="edit-site-editor__back-icon">
-											<Icon
-												icon={
-													isRTL()
-														? chevronRight
-														: chevronLeft
+									<Button
+										size="compact"
+										label={ __( 'Open Navigation' ) }
+										showTooltip
+										tooltipPosition="middle right"
+										onClick={ () => {
+											resetZoomLevel();
+											setCurrentRevisionId( null );
+											history.navigate(
+												getNavigationPath(
+													location,
+													postWithTemplate
+														? context.postType
+														: postType
+												),
+												{
+													transition:
+														'canvas-mode-view-transition',
 												}
-											/>
-										</div>
-									</div>
+											);
+										} }
+										icon={
+											isRTL() ? chevronRight : chevronLeft
+										}
+									/>
 								)
 							}
 						</BackButton>

package/src/components/editor/style.scss

@@ -22,54 +22,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.edit-site-editor__view-mode-toggle {
-	view-transition-name: toggle;
-	position: relative;
-	top: 0;
-	left: 0;
-	height: $button-size-compact;
-	width: $button-size-compact;
-	z-index: 100;
-
-	.components-button {
-		color: $white;
-		height: 100%;
-		width: 100%;
-		border-radius: 0;
-		overflow: hidden;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		&:hover,
-		&:active {
-			color: $white;
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-	}
-
-	&:hover .edit-site-editor__back-icon {
-		color: var(--wp-admin-theme-color);
-	}
-}
-
-.edit-site-editor__back-icon {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: $button-size-compact;
-	height: $button-size-compact;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: transparent;
-	pointer-events: none;
-
-	svg {
-		fill: currentColor;
-	}
-}

package/src/components/editor/use-editor-title.js

@@ -3,9 +3,11 @@
  */
 import { _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -14,7 +16,7 @@ import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
-const { getTemplateInfo } = unlock( editorPrivateApis );
+const { getTemplateInfo } = unlock( coreDataPrivateApis );
 
 function useEditorTitle( postType, postId ) {
 	const { title, isLoaded } = useSelect(

package/src/components/layout/index.js

@@ -95,6 +95,7 @@ function Layout() {
 			( desktopToggle ?? mobileToggleRef.current )?.focus();
 		}
 		// Should not depend on the previous canvas mode value but the next.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ canvas ] );
 
 	return (
@@ -174,9 +175,6 @@ function Layout() {
 										{ showMobileSiteHub && (
 											<SiteHubMobile
 												ref={ mobileToggleRef }
-												isTransparent={
-													isResizableFrameOversized
-												}
 											/>
 										) }
 										{ areas.mobileContent ? (

package/src/components/layout/style.scss

@@ -177,61 +177,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
-.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
-	display: none;
-}
-
-.edit-site-layout__view-mode-toggle.components-button {
-	view-transition-name: toggle;
-	position: relative;
-	color: var(--wpds-color-foreground-interactive-neutral);
-	height: $header-height;
-	width: $header-height;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--wpds-color-background-surface-neutral-weak);
-	border-radius: 0;
-
-	&:hover,
-	&:active {
-		color: var(--wpds-color-foreground-interactive-neutral-active);
-	}
-
-	&:focus-visible,
-	&:focus {
-		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
-		outline: 4px solid #0000;
-		outline-offset: 4px;
-	}
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		top: $grid-unit-10 + $border-width;
-		right: $grid-unit-10 + $border-width;
-		bottom: $grid-unit-10 + $border-width;
-		left: $grid-unit-20 + $border-width;
-		border-radius: $radius-medium;
-		box-shadow: none;
-
-		@media not (prefers-reduced-motion) {
-			transition: box-shadow 0.1s ease;
-		}
-	}
-
-	.edit-site-layout__view-mode-toggle-icon {
-		display: flex;
-		height: $header-height;
-		width: $header-height;
-		justify-content: center;
-		align-items: center;
-	}
-}
-
 .edit-site-layout__actions {
 	z-index: z-index(".edit-site-layout__actions");
 	position: fixed !important; // Need to override the default relative positioning

package/src/components/save-button/index.js

@@ -4,13 +4,12 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	useEntitiesSavedStatesIsDirty,
-	store as editorStore,
-} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -23,6 +22,7 @@ import {
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
+const { useEntitiesSavedStatesIsDirty } = unlock( coreDataPrivateApis );
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
@@ -35,7 +35,7 @@ export default function SaveButton( {
 } ) {
 	const { params } = useLocation();
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { saveDirtyEntities } = unlock( useDispatch( coreStore ) );
 	const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
 	const { isSaving, isSaveViewOpen, previewingThemeName } = useSelect(
 		( select ) => {

package/src/components/save-panel/index.js

@@ -8,14 +8,12 @@ import clsx from 'clsx';
  */
 import { NavigableRegion } from '@wordpress/admin-ui';
 import { Button, Modal } from '@wordpress/components';
-import {
-	EntitiesSavedStates,
-	useEntitiesSavedStatesIsDirty,
-	privateApis,
-} from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useEffect } from '@wordpress/element';
 
@@ -28,8 +26,12 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible } = unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
+const {
+	EntitiesSavedStatesExtensible,
+	EntitiesSavedStates,
+	useEntitiesSavedStatesIsDirty,
+} = unlock( coreDataPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( {
 	onClose,

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

@@ -2,17 +2,9 @@
 	color: var(--wpds-color-foreground-interactive-neutral);
 	flex-shrink: 0;
 
-	// Focus (resets default button focus and use focus-visible).
-	&:focus:not(:disabled) {
-		box-shadow: none;
+	&:focus:not(:focus-visible) {
 		outline: none;
 	}
-	&:focus-visible:not(:disabled) {
-		box-shadow:
-			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
-		outline: 3px solid transparent;
-	}
 
 	&:hover:not(:disabled,[aria-disabled="true"]),
 	&:focus-visible,

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

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/mixins";
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-item.components-item {
@@ -10,21 +11,24 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: var(--wpds-color-foreground-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
-			fill: var(--wpds-color-foreground-interactive-neutral-active);
+			fill: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 
 	&[aria-current="true"] {
 		background: var(--wpds-color-background-interactive-neutral-weak-active);
-		color: var(--wpds-color-foreground-interactive-neutral-active);
-		font-weight: $font-weight-medium;
+		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	// Make sure the focus style is drawn on top of the current item background.
 	&:focus-visible {
+		// TODO: remove once the <Item> component has migrated to the WPDS focus color token.
+		--wp-components-color-accent: var(--wpds-color-stroke-focus);
+
 		transform: translateZ(0);
 	}
 

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

@@ -27,7 +27,7 @@
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: var(--wpds-color-foreground-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 
@@ -35,7 +35,7 @@
 		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus {
-			color: var(--wpds-color-foreground-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 

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

@@ -5,11 +5,11 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 } from '@wordpress/components';
-import { getTemplatePartIcon } from '@wordpress/editor';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as coreDataPrivateApis } from '@wordpress/core-data';
 import { useViewConfig } from '@wordpress/views';
 
 /**
@@ -30,6 +30,7 @@ import { unlock } from '../../lock-unlock';
 const VIEW_CONFIG_FIELDS = [ 'view_list' ];
 
 const { useLocation } = unlock( routerPrivateApis );
+const { getTemplatePartIcon } = unlock( coreDataPrivateApis );
 
 function CategoriesGroup( {
 	templatePartViews,

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

@@ -21,7 +21,7 @@
 
 	h2 {
 		font-size: 11px;
-		font-weight: $font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		text-transform: uppercase;
 	}
 }

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

@@ -14,12 +14,12 @@ import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-gl
 import SidebarGlobalStyles from '../sidebar-global-styles';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { StyleBookPreview } = unlock( editorPrivateApis );
+const { StyleBookPreview, useGlobalStyles } = unlock( editorPrivateApis );
 
-function StylesPreviewArea() {
+function StyleBookPreviewArea( { siteData } ) {
 	const { path, query } = useLocation();
 	const history = useHistory();
-	const isStylebook = query.preview === 'stylebook';
+	const { user: userConfig } = useGlobalStyles();
 
 	// Get section from URL query params
 	const section = query.section ?? '/';
@@ -31,13 +31,22 @@ function StylesPreviewArea() {
 		);
 	};
 
-	if ( isStylebook ) {
-		return (
-			<StyleBookPreview
-				path={ section }
-				onPathChange={ onChangeSection }
-			/>
-		);
+	return (
+		<StyleBookPreview
+			path={ section }
+			onPathChange={ onChangeSection }
+			settings={ siteData.editorSettings }
+			// Without userConfig the preview falls back to the static `settings` styles and unsaved global styles edits are not shown.
+			userConfig={ userConfig }
+		/>
+	);
+}
+
+function StylesPreviewArea( { siteData } ) {
+	const { query } = useLocation();
+
+	if ( query.preview === 'stylebook' ) {
+		return <StyleBookPreviewArea siteData={ siteData } />;
 	}
 
 	return <Editor />;
@@ -49,7 +58,9 @@ export const stylesRoute = {
 	areas: {
 		content: <SidebarGlobalStyles />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview: <StylesPreviewArea />,
+		preview: ( { siteData } ) => (
+			<StylesPreviewArea siteData={ siteData } />
+		),
 		mobileContent: <SidebarGlobalStyles />,
 	},
 	widths: {

package/src/components/site-hub/index.js

@@ -1,17 +1,12 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { memo, forwardRef, useContext } from '@wordpress/element';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -23,7 +18,7 @@ import { SidebarNavigationContext } from '../sidebar';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export const SiteHubMobile = memo(
-	forwardRef( ( { isTransparent }, ref ) => {
+	forwardRef( ( props, ref ) => {
 		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
@@ -81,32 +76,13 @@ export const SiteHubMobile = memo(
 
 		return (
 			<div className="edit-site-site-hub">
-				<HStack justify="flex-start" spacing="0">
-					<div
-						className={ clsx(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
-						) }
-					>
-						<Button
-							__next40pxDefaultSize
-							ref={ ref }
-							className="edit-site-layout__view-mode-toggle"
-							style={ {
-								transform: 'scale(0.5)',
-								borderRadius: 4,
-							} }
-							{ ...backButtonProps }
-						>
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								size={ 48 }
-							/>
-						</Button>
-					</div>
-				</HStack>
+				<Button
+					size="compact"
+					ref={ ref }
+					className="edit-site-site-hub__back-button"
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					{ ...backButtonProps }
+				/>
 			</div>
 		);
 	} )