@wordpress/edit-site 6.0.4 → 6.0.5

package/build-style/style.css

@@ -434,7 +434,6 @@
   aspect-ratio: 1/1;
   background-color: #f0f0f0;
   border-radius: 4px;
-  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -826,7 +825,7 @@
   padding: 0 12px;
   height: 32px;
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   position: relative;
   display: flex;
   align-items: center;
@@ -1705,7 +1704,7 @@
   overflow: hidden;
   height: 100%;
   width: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .page-pages-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1755,10 +1754,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
   width: 96px;
@@ -1777,7 +1772,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1869,7 +1864,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
 }
 .page-templates-preview-field .page-templates-preview-field__button {
   box-shadow: none;
@@ -1880,7 +1874,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .page-templates-preview-field .page-templates-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1892,9 +1886,6 @@
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
   height: 100%;
 }
-.page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
-  border-radius: 3px 3px 0 0;
-}
 .page-templates-preview-field.is-viewtype-table {
   border-radius: 2px;
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.4",
+	"version": "6.0.5",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,20 +32,20 @@
 		"@wordpress/a11y": "^4.0.1",
 		"@wordpress/api-fetch": "^7.0.1",
 		"@wordpress/blob": "^4.0.1",
-		"@wordpress/block-editor": "^13.0.3",
-		"@wordpress/block-library": "^9.0.4",
+		"@wordpress/block-editor": "^13.0.4",
+		"@wordpress/block-library": "^9.0.5",
 		"@wordpress/blocks": "^13.0.3",
 		"@wordpress/commands": "^1.0.3",
 		"@wordpress/components": "^28.0.3",
 		"@wordpress/compose": "^7.0.1",
-		"@wordpress/core-commands": "^1.0.3",
-		"@wordpress/core-data": "^7.0.3",
+		"@wordpress/core-commands": "^1.0.4",
+		"@wordpress/core-data": "^7.0.4",
 		"@wordpress/data": "^10.0.2",
-		"@wordpress/dataviews": "^2.0.3",
+		"@wordpress/dataviews": "^2.0.4",
 		"@wordpress/date": "^5.0.1",
 		"@wordpress/deprecated": "^4.0.1",
 		"@wordpress/dom": "^4.0.1",
-		"@wordpress/editor": "^14.0.3",
+		"@wordpress/editor": "^14.0.4",
 		"@wordpress/element": "^6.0.1",
 		"@wordpress/escape-html": "^3.0.1",
 		"@wordpress/hooks": "^4.0.1",
@@ -55,18 +55,18 @@
 		"@wordpress/keyboard-shortcuts": "^5.0.2",
 		"@wordpress/keycodes": "^4.0.1",
 		"@wordpress/notices": "^5.0.2",
-		"@wordpress/patterns": "^2.0.3",
+		"@wordpress/patterns": "^2.0.4",
 		"@wordpress/plugins": "^7.0.3",
 		"@wordpress/preferences": "^4.0.3",
 		"@wordpress/primitives": "^4.0.1",
 		"@wordpress/priority-queue": "^3.0.1",
 		"@wordpress/private-apis": "^1.0.2",
-		"@wordpress/reusable-blocks": "^5.0.3",
+		"@wordpress/reusable-blocks": "^5.0.4",
 		"@wordpress/router": "^1.0.2",
 		"@wordpress/style-engine": "^2.0.2",
 		"@wordpress/url": "^4.0.1",
 		"@wordpress/viewport": "^6.0.2",
-		"@wordpress/widgets": "^4.0.3",
+		"@wordpress/widgets": "^4.0.4",
 		"@wordpress/wordcount": "^4.0.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9dd5f8dcfa4fc7242e5d48be20ee789ad087b432"
+	"gitHead": "85486692a3e48b7d863226cf895a21d787434921"
 }

package/src/components/editor/index.js

@@ -41,6 +41,7 @@ import {
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
+import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
 import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
@@ -205,6 +206,7 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={
 						! hasDefaultEditorCanvasView

package/src/components/layout/index.js

@@ -46,7 +46,6 @@ import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
-import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
@@ -56,6 +55,7 @@ import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import SavePanel from '../save-panel';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
@@ -209,6 +209,7 @@ export default function Layout() {
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />
+										<SavePanel />
 									</motion.div>
 								) }
 							</AnimatePresence>
@@ -282,8 +283,6 @@ export default function Layout() {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);

package/src/components/layout/router.js

@@ -77,6 +77,7 @@ export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
@@ -93,15 +94,14 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PagePages />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : (
-						<PagePages />
-					),
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePages />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -119,10 +119,14 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: <PageTemplates />,
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PageTemplates />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -139,8 +143,12 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && (
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePatterns />
+				),
+				preview: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -156,7 +164,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -175,7 +183,7 @@ export default function useLayoutAreas() {
 						/>
 					),
 					preview: <Editor isLoading={ isSiteEditorLoading } />,
-					mobile: canvas === 'edit' && (
+					mobile: hasEditCanvasMode && (
 						<Editor isLoading={ isSiteEditorLoading } />
 					),
 				},
@@ -188,7 +196,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -201,7 +209,7 @@ export default function useLayoutAreas() {
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile: canvas === 'edit' && (
+			mobile: hasEditCanvasMode && (
 				<Editor isLoading={ isSiteEditorLoading } />
 			),
 		},

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

@@ -43,7 +43,7 @@
 	overflow: hidden;
 	height: 100%;
 	width: 100%;
-	border-radius: 3px 3px 0 0;
+	border-radius: $grid-unit-05;
 
 	&:focus-visible {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

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

@@ -35,13 +35,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border-radius: 3px 3px 0 0;
-
-		&.is-viewtype-grid {
-			.block-editor-block-preview__container {
-				border-radius: 3px 3px 0 0;
-			}
-		}
 
 		&.is-viewtype-table {
 			width: 96px;
@@ -62,7 +55,7 @@
 			cursor: pointer;
 			overflow: hidden;
 			height: 100%;
-			border-radius: 3px 3px 0 0;
+			border-radius: $grid-unit-05;
 
 			&:focus-visible {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

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

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	border-radius: 3px 3px 0 0;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +12,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: 3px;
+		border-radius: $grid-unit-05;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -32,10 +31,6 @@
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
-
-		.page-templates-preview-field__button {
-			border-radius: 3px 3px 0 0;
-		}
 	}
 
 	&.is-viewtype-table {

package/src/components/revisions/index.js

@@ -25,6 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -74,7 +75,6 @@ function Revisions( { userConfig, blocks } ) {
 				name="revisions"
 				tabIndex={ 0 }
 			>
-				<EditorStyles styles={ editorStyles } />
 				<style>
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
@@ -88,6 +88,14 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
+						 */ }
+						<EditorStyles styles={ editorStyles } />
+						<__unstableBlockStyleVariationOverridesWithConfig
+							config={ mergedConfig }
+						/>
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

package/src/store/private-actions.js

@@ -13,10 +13,10 @@ import { store as editorStore } from '@wordpress/editor';
 export const setCanvasMode =
 	( mode ) =>
 	( { registry, dispatch } ) => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
 		const switchCanvasMode = () => {
 			registry.batch( () => {
-				const isMediumOrBigger =
-					window.matchMedia( '(min-width: 782px)' ).matches;
 				registry.dispatch( blockEditorStore ).clearSelectedBlock();
 				registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
 				registry
@@ -59,7 +59,11 @@ export const setCanvasMode =
 			} );
 		};
 
-		if ( ! document.startViewTransition ) {
+		/*
+		 * Skip transition in mobile, otherwise it crashes the browser.
+		 * See: https://github.com/WordPress/gutenberg/pull/63002.
+		 */
+		if ( ! isMediumOrBigger || ! document.startViewTransition ) {
 			switchCanvasMode();
 		} else {
 			document.documentElement.classList.add(