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

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/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/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/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

@@ -16,7 +16,7 @@ import SidebarGlobalStyles from '../sidebar-global-styles';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { StyleBookPreview } = unlock( editorPrivateApis );
 
-function StylesPreviewArea() {
+function StylesPreviewArea( { siteData } ) {
 	const { path, query } = useLocation();
 	const history = useHistory();
 	const isStylebook = query.preview === 'stylebook';
@@ -36,6 +36,7 @@ function StylesPreviewArea() {
 			<StyleBookPreview
 				path={ section }
 				onPathChange={ onChangeSection }
+				settings={ siteData.editorSettings }
 			/>
 		);
 	}
@@ -49,7 +50,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>
 		);
 	} )

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

@@ -3,18 +3,13 @@
 .edit-site-site-hub {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	gap: $grid-unit-10;
-	margin-right: $grid-unit-15;
+	padding-left: $grid-unit-20;
 	height: $header-height;
 }
 
-.edit-site-site-hub__view-mode-toggle-container {
-	height: $header-height;
-	width: $header-height;
-	flex-shrink: 0;
-
-	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
-		background: transparent;
+.edit-site-site-hub__back-button {
+	&:hover:not(:disabled, [aria-disabled="true"]),
+	&:active:not(:disabled, [aria-disabled="true"]) {
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 }

package/src/style.scss

@@ -42,6 +42,7 @@
 	display: block;
 }
 
+// stylelint-disable selector-class-pattern -- WordPress admin body classes use underscores by convention.
 body.js #wpbody {
 	padding-top: 0;
 }
@@ -64,6 +65,7 @@ body.js.site-editor-php {
 		}
 	}
 }
+// stylelint-enable selector-class-pattern
 
 .edit-site {
 	@include reset;