@wordpress/edit-site 6.48.0 → 6.48.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.48.0",
+	"version": "6.48.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,61 +41,61 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptExtraDependencies": [
 		"wp-dom-ready"
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.48.0",
-		"@wordpress/admin-ui": "^2.3.0",
-		"@wordpress/api-fetch": "^7.48.0",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/blob": "^4.48.0",
-		"@wordpress/block-editor": "^15.21.0",
-		"@wordpress/block-library": "^9.48.0",
-		"@wordpress/blocks": "^15.21.0",
-		"@wordpress/commands": "^1.48.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/core-data": "^7.48.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/dataviews": "^16.0.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/dom": "^4.48.0",
-		"@wordpress/editor": "^14.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/escape-html": "^3.48.0",
-		"@wordpress/fields": "^0.40.0",
-		"@wordpress/global-styles-engine": "^1.15.0",
-		"@wordpress/global-styles-ui": "^1.15.0",
-		"@wordpress/hooks": "^4.48.0",
-		"@wordpress/html-entities": "^4.48.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/media-utils": "^5.48.0",
-		"@wordpress/notices": "^5.48.0",
-		"@wordpress/patterns": "^2.48.0",
-		"@wordpress/plugins": "^7.48.0",
-		"@wordpress/preferences": "^4.48.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/reusable-blocks": "^5.48.0",
-		"@wordpress/router": "^1.48.0",
-		"@wordpress/style-engine": "^2.48.0",
-		"@wordpress/ui": "^0.15.0",
-		"@wordpress/url": "^4.48.0",
-		"@wordpress/viewport": "^6.48.0",
-		"@wordpress/views": "^1.15.0",
-		"@wordpress/widgets": "^4.48.0",
-		"@wordpress/wordcount": "^4.48.0",
+		"@wordpress/a11y": "^4.48.1",
+		"@wordpress/admin-ui": "^2.3.1",
+		"@wordpress/api-fetch": "^7.48.1",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/blob": "^4.48.1",
+		"@wordpress/block-editor": "^15.21.1",
+		"@wordpress/block-library": "^9.48.1",
+		"@wordpress/blocks": "^15.21.1",
+		"@wordpress/commands": "^1.48.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/core-data": "^7.48.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/dataviews": "^16.0.1",
+		"@wordpress/date": "^5.48.1",
+		"@wordpress/deprecated": "^4.48.1",
+		"@wordpress/dom": "^4.48.1",
+		"@wordpress/editor": "^14.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/escape-html": "^3.48.1",
+		"@wordpress/fields": "^0.40.1",
+		"@wordpress/global-styles-engine": "^1.15.1",
+		"@wordpress/global-styles-ui": "^1.15.1",
+		"@wordpress/hooks": "^4.48.1",
+		"@wordpress/html-entities": "^4.48.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/media-utils": "^5.48.1",
+		"@wordpress/notices": "^5.48.1",
+		"@wordpress/patterns": "^2.48.1",
+		"@wordpress/plugins": "^7.48.1",
+		"@wordpress/preferences": "^4.48.1",
+		"@wordpress/primitives": "^4.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/reusable-blocks": "^5.48.1",
+		"@wordpress/router": "^1.48.1",
+		"@wordpress/style-engine": "^2.48.1",
+		"@wordpress/theme": "^0.15.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/url": "^4.48.1",
+		"@wordpress/viewport": "^6.48.1",
+		"@wordpress/views": "^1.15.1",
+		"@wordpress/widgets": "^4.48.1",
+		"@wordpress/wordcount": "^4.48.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.9.2",
+		"colord": "^2.9.3",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
@@ -107,5 +107,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/layout/index.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { NavigableRegion } from '@wordpress/admin-ui';
+import { NavigableRegion, getAdminThemeColors } from '@wordpress/admin-ui';
 import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
@@ -20,13 +20,14 @@ import {
 	usePrevious,
 } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
 import {
 	UnsavedChangesWarning,
 	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -48,9 +49,11 @@ import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
 const { useLocation } = unlock( routerPrivateApis );
-const { useStyle } = unlock( editorPrivateApis );
+const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
+const { ThemeProvider } = unlock( themePrivateApis );
 
 const ANIMATION_DURATION = 0.3;
+const CONTENT_COLOR = { background: '#ffffff' };
 
 function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
@@ -59,6 +62,8 @@ function Layout() {
 	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 	const showDesktopSiteHub = ! hasAdminBarInEditor;
 	const showMobileSiteHub = ! hasAdminBarInEditor || routeKey !== 'home';
+	const hasMobileAreas =
+		areas.mobileSidebar || areas.mobileContent || areas.preview;
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
 	const navigateRegionsProps = useNavigateRegions();
@@ -111,7 +116,7 @@ function Layout() {
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					{ ( ! isMobileViewport || ! areas.mobile ) && (
+					{ ( ! isMobileViewport || ! hasMobileAreas ) && (
 						<NavigableRegion
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
@@ -164,8 +169,9 @@ function Layout() {
 					) }
 
 					<SnackbarNotices className="edit-site-layout__snackbar" />
+					<UploadProgressSnackbar />
 
-					{ isMobileViewport && areas.mobile && (
+					{ isMobileViewport && hasMobileAreas && (
 						<div className="edit-site-layout__mobile">
 							<SidebarNavigationProvider>
 								{ canvas !== 'edit' ? (
@@ -179,17 +185,33 @@ function Layout() {
 											/>
 										) }
 										<SidebarContent routeKey={ routeKey }>
-											<ErrorBoundary>
-												{ areas.mobile }
-											</ErrorBoundary>
+											{ areas.mobileContent ? (
+												<ThemeProvider
+													color={ CONTENT_COLOR }
+												>
+													<div className="edit-site-layout__mobile-content">
+														<ErrorBoundary>
+															{
+																areas.mobileContent
+															}
+														</ErrorBoundary>
+													</div>
+												</ThemeProvider>
+											) : (
+												<ErrorBoundary>
+													{ areas.mobileSidebar }
+												</ErrorBoundary>
+											) }
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
 									</>
 								) : (
-									<ErrorBoundary>
-										{ areas.mobile }
-									</ErrorBoundary>
+									<ThemeProvider color={ CONTENT_COLOR }>
+										<ErrorBoundary>
+											{ areas.preview }
+										</ErrorBoundary>
+									</ThemeProvider>
 								) }
 							</SidebarNavigationProvider>
 						</div>
@@ -204,7 +226,11 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								<ErrorBoundary>{ areas.content }</ErrorBoundary>
+								<ThemeProvider color={ CONTENT_COLOR }>
+									<ErrorBoundary>
+										{ areas.content }
+									</ErrorBoundary>
+								</ThemeProvider>
 							</div>
 						) }
 
@@ -215,7 +241,9 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
+							<ThemeProvider color={ CONTENT_COLOR }>
+								<ErrorBoundary>{ areas.edit }</ErrorBoundary>
+							</ThemeProvider>
 						</div>
 					) }
 
@@ -255,7 +283,11 @@ function Layout() {
 													backgroundColor,
 											} }
 										>
-											{ areas.preview }
+											<ThemeProvider
+												color={ CONTENT_COLOR }
+											>
+												{ areas.preview }
+											</ThemeProvider>
 										</ResizableFrame>
 									</ErrorBoundary>
 								</div>
@@ -269,6 +301,7 @@ function Layout() {
 }
 
 export default function LayoutWithGlobalStylesProvider( props ) {
+	const themeColors = useMemo( getAdminThemeColors, [] );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onPluginAreaError( name ) {
 		createErrorNotice(
@@ -287,7 +320,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 			<Tooltip.Provider>
 				{ /** This needs to be within the SlotFillProvider */ }
 				<PluginArea onError={ onPluginAreaError } />
-				<Layout { ...props } />
+				<ThemeProvider color={ themeColors }>
+					<Layout { ...props } />
+				</ThemeProvider>
 			</Tooltip.Provider>
 		</SlotFillProvider>
 	);

package/src/components/layout/style.scss

@@ -1,18 +1,17 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
 .edit-site-layout {
 	height: 100%;
-	background: $gray-900;
-	color: $gray-400;
+	background: var(--wpds-color-bg-surface-neutral-weak);
+	color: var(--wpds-color-fg-content-neutral);
 	display: flex;
 	flex-direction: column;
 
 	// Show a dark background in "frame" mode to avoid edge artifacts.
 	&:not(.is-full-canvas) .editor-visual-editor {
-		background: $gray-900;
+		background: var(--wpds-color-bg-surface-neutral-weak);
 	}
 }
 
@@ -81,6 +80,13 @@
 	}
 }
 
+.edit-site-layout__mobile-content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	background: var(--wpds-color-bg-surface-neutral);
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
@@ -104,7 +110,7 @@
 	}
 
 	.edit-site-resizable-frame__inner {
-		color: $gray-900;
+		color: var(--wpds-color-fg-content-neutral);
 	}
 
 	@include break-medium {
@@ -173,7 +179,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	view-transition-name: toggle;
 	/* stylelint-enable  */
 	position: relative;
-	color: $white;
+	color: var(--wpds-color-fg-interactive-neutral);
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
@@ -181,12 +187,12 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: $gray-900;
+	background: var(--wpds-color-bg-surface-neutral-weak);
 	border-radius: 0;
 
 	&:hover,
 	&:active {
-		color: $white;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 	}
 
 	&:focus-visible,
@@ -229,8 +235,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	left: auto;
 	right: 0;
 	width: $sidebar-width;
-	color: $gray-900;
-	background: $white;
+	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-bg-surface-neutral-strong);
 
 	&:focus,
 	&:focus-within {
@@ -246,7 +252,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	@include break-medium {
-		border-left: $border-width solid $gray-300;
+		border-left:
+			$border-width solid
+			var(--wpds-color-stroke-surface-neutral);
 	}
 }
 

package/src/components/page-patterns/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 
@@ -93,7 +92,7 @@
 		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;
-		background-color: $white;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
 		width: calc(100% + 2px); // Account for the border width of the token field.
 		left: -1px;
 		min-width: initial;

package/src/components/post-list/quick-edit-modal.js

@@ -167,7 +167,6 @@ export function QuickEditModal( {
 				<PostCardPanel
 					postType={ postType }
 					postId={ postId }
-					onClose={ closeModal }
 					hideActions
 				/>
 			</div>

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

@@ -1,9 +1,8 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-save-hub {
-	color: $gray-600;
-	border-top: 1px solid $gray-800;
+	color: var(--wpds-color-fg-content-neutral);
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 	flex-shrink: 0;
 	margin: 0;
 	padding: $grid-unit-20 $canvas-padding;
@@ -18,6 +17,7 @@
 		opacity: 1;
 	}
 
+	&[aria-disabled="true"],
 	&[aria-disabled="true"]:hover {
 		color: inherit;
 	}
@@ -25,7 +25,7 @@
 	&:not(.is-primary) {
 		&.is-busy,
 		&.is-busy[aria-disabled="true"]:hover {
-			color: $gray-900;
+			color: var(--wpds-color-fg-interactive-neutral);
 		}
 	}
 }

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

@@ -1,7 +1,5 @@
-@use "@wordpress/base-styles/colors" as *;
-
 .edit-site-sidebar-button {
-	color: $gray-200;
+	color: var(--wpds-color-fg-interactive-neutral);
 	flex-shrink: 0;
 
 	// Focus (resets default button focus and use focus-visible).
@@ -21,6 +19,6 @@
 	&:focus,
 	&:not(:disabled,[aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $gray-100;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 	}
 }

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

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-dataviews {

package/src/components/sidebar-global-styles/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-styles {
@@ -25,7 +24,7 @@
 		}
 	}
 	.edit-site-sidebar-button {
-		color: $gray-900;
+		color: var(--wpds-color-fg-interactive-neutral);
 	}
 }
 

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

@@ -1,8 +1,7 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-item.components-item {
-	color: $gray-600;
+	color: var(--wpds-color-fg-interactive-neutral-weak);
 	// 6px right padding to align with + button
 	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
 	border: none;
@@ -11,16 +10,16 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: $gray-200;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
-			fill: $gray-200;
+			fill: var(--wpds-color-fg-interactive-neutral-active);
 		}
 	}
 
 	&[aria-current="true"] {
-		background: $gray-800;
-		color: $white;
+		background: var(--wpds-color-bg-interactive-neutral-weak-active);
+		color: var(--wpds-color-fg-interactive-neutral-active);
 		font-weight: $font-weight-medium;
 	}
 
@@ -30,7 +29,7 @@
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
-		fill: $gray-600;
+		fill: var(--wpds-color-fg-interactive-neutral-weak);
 	}
 
 	&.with-suffix {

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

@@ -101,7 +101,6 @@ export default function SidebarNavigationScreen( {
 					) }
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
-						color={ '#e0e0e0' /* $gray-200 */ }
 						level={ 1 }
 						size={ 20 }
 					>

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

@@ -23,7 +23,7 @@
 	padding: 0 $grid-unit-20;
 
 	.components-text {
-		color: $gray-400;
+		color: var(--wpds-color-fg-content-neutral);
 	}
 
 	.components-heading {
@@ -34,7 +34,7 @@
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
-	background: $gray-900;
+	background: var(--wpds-color-bg-surface-neutral-weak);
 	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
@@ -95,11 +95,11 @@
 .edit-site-sidebar-navigation-screen__footer {
 	position: sticky;
 	bottom: 0;
-	background-color: $gray-900;
+	background-color: var(--wpds-color-bg-surface-neutral-weak);
 	gap: 0;
 	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
-	border-top: 1px solid $gray-800;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 
 	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
@@ -116,20 +116,20 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: $gray-800;
+		background: var(--wpds-color-bg-interactive-neutral-weak);
 
 		.components-button {
-			color: $gray-200 !important;
+			color: var(--wpds-color-fg-interactive-neutral) !important;
 		}
 	}
 	.components-input-control__input {
-		color: $gray-200 !important;
-		background: $gray-800 !important;
+		color: var(--wpds-color-fg-interactive-neutral) !important;
+		background: var(--wpds-color-bg-interactive-neutral-weak) !important;
 	}
 	.components-input-control__backdrop {
 		border: 4px !important;
 	}
 	.components-base-control__help {
-		color: $gray-600;
+		color: var(--wpds-color-fg-content-neutral-weak);
 	}
 }

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

@@ -1,12 +1,10 @@
-@use "@wordpress/base-styles/colors" as *;
-
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: $gray-200;
+		color: var(--wpds-color-fg-interactive-neutral);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $gray-100;
+			color: var(--wpds-color-fg-interactive-neutral);
 		}
 	}
 }

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

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-screen__description {
@@ -24,19 +23,30 @@
 	}
 
 	.block-editor-list-view-block-select-button {
-		color: $gray-600;
+		color: var(--wpds-color-fg-interactive-neutral-weak);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $white;
+			color: var(--wpds-color-fg-interactive-neutral-active);
 		}
 	}
 
 	.block-editor-list-view-block__menu {
-		color: $gray-600;
+		color: var(--wpds-color-fg-interactive-neutral-weak);
 		&:hover,
 		&:focus {
-			color: $white;
+			color: var(--wpds-color-fg-interactive-neutral-active);
+		}
+	}
+
+	.block-editor-inserter__toggle {
+		background: var(--wpds-color-bg-interactive-brand-strong);
+		color: var(--wpds-color-fg-interactive-brand-strong);
+
+		&:hover,
+		&:focus {
+			background: var(--wpds-color-bg-interactive-brand-strong-active);
+			color: var(--wpds-color-fg-interactive-brand-strong-active);
 		}
 	}
 }

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

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-screen-patterns__group {
@@ -17,7 +16,7 @@
 	margin-top: $grid-unit-20;
 
 	p {
-		color: $gray-600;
+		color: var(--wpds-color-fg-content-neutral-weak);
 	}
 
 	h2 {
@@ -28,6 +27,6 @@
 }
 
 .edit-site-sidebar-navigation-screen-patterns__divider {
-	border-top: 1px solid $gray-800;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 	margin: $grid-unit-20 0;
 }

package/src/components/site-editor-routes/README.md

@@ -6,15 +6,15 @@ When `canvasMode` is not `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
-| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `sidebar` | Always rendered. | Only if no mobile area (`mobileSidebar`, `mobileContent`, or `preview`) is provided. |
 | `content` | Rendered if provided. | Not rendered. |
 | `preview` | Rendered if provided. | Not rendered. |
 | `edit` | Rendered if provided. | Not rendered. |
-| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+| `mobileSidebar` | Not rendered | Rendered as full-screen (with the themed sidebar background), if provided and `mobileContent` is not provided. |
+| `mobileContent` | Not rendered | Rendered as full-screen (with the white content background), if provided. |
 
 When `canvasMode` is `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
-| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
-| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |