@wordpress/edit-site 5.3.1 → 5.3.2

package/build-style/style-rtl.css

@@ -403,13 +403,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: auto;
   right: auto;
   left: 0;
-  width: 280px;
   color: #1e1e1e;
+  background: #fff;
+  width: 100vw;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__actions {
+    width: 280px;
+  }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: auto;
+  top: 46px;
   bottom: 0;
 }
+@media (min-width: 782px) {
+  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+    border-right: 1px solid #ddd;
+    top: 32px;
+  }
+  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+    top: 0;
+  }
+}
 
 .interface-more-menu-dropdown {
   margin-right: -4px;
@@ -1049,7 +1064,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles__block-preview-panel {
   position: relative;
   width: 100%;
-  height: 152px;
   overflow: auto;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
@@ -1832,7 +1846,7 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel {
+.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
   top: auto;
   bottom: 0;
 }
@@ -2200,28 +2214,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   top: 0;
 }
 .edit-site-layout__sidebar > div {
-  overflow-y: auto;
-  min-height: 100%;
-  visibility: hidden;
-  scrollbar-color: #757575 #1e1e1e;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar-track {
-  background-color: #1e1e1e;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar-thumb {
-  background-color: #757575;
-  border-radius: 8px;
-  border: 3px solid transparent;
-  background-clip: padding-box;
-}
-.edit-site-layout__sidebar > div:hover, .edit-site-layout__sidebar > div:focus, .edit-site-layout__sidebar > div > * {
-  visibility: visible;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 .edit-site-layout__sidebar .resizable-editor__drag-handle {
   left: 0;
@@ -2324,6 +2319,67 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-radius: 2px;
 }
 
+.edit-site-layout__actions {
+  z-index: 100000;
+  position: fixed !important;
+  top: -9999em;
+  bottom: auto;
+  right: auto;
+  left: 0;
+  width: 280px;
+  color: #1e1e1e;
+  background: #fff;
+}
+.edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
+  top: 0;
+  bottom: 0;
+}
+@media (min-width: 782px) {
+  .edit-site-layout__actions {
+    border-right: 1px solid #ddd;
+  }
+}
+
+@media (min-width: 600px) {
+  .edit-site-save-panel__modal {
+    width: 600px;
+  }
+}
+
+.edit-site-sidebar__content {
+  flex-grow: 1;
+  overflow-y: auto;
+  visibility: hidden;
+  scrollbar-color: #757575 #1e1e1e;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+.edit-site-sidebar__content::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.edit-site-sidebar__content::-webkit-scrollbar-track {
+  background-color: #1e1e1e;
+}
+.edit-site-sidebar__content::-webkit-scrollbar-thumb {
+  background-color: #757575;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.edit-site-sidebar__content:hover, .edit-site-sidebar__content:focus, .edit-site-sidebar__content > * {
+  visibility: visible;
+}
+
+.edit-site-sidebar__footer {
+  border-top: 1px solid #2f2f2f;
+  flex-shrink: 0;
+  margin: 0 24px;
+  padding: 24px 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .edit-site-sidebar__content.edit-site-sidebar__content {
   overflow-x: unset;
 }
@@ -2425,6 +2481,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-site-hub__edit-button {
   height: 32px;
+  color: #fff;
 }
 
 .edit-site-site-hub__post-type {

package/build-style/style.css

@@ -403,13 +403,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: auto;
   left: auto;
   right: 0;
-  width: 280px;
   color: #1e1e1e;
+  background: #fff;
+  width: 100vw;
+}
+@media (min-width: 782px) {
+  .interface-interface-skeleton__actions {
+    width: 280px;
+  }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: auto;
+  top: 46px;
   bottom: 0;
 }
+@media (min-width: 782px) {
+  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+    border-left: 1px solid #ddd;
+    top: 32px;
+  }
+  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+    top: 0;
+  }
+}
 
 .interface-more-menu-dropdown {
   margin-left: -4px;
@@ -1049,7 +1064,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles__block-preview-panel {
   position: relative;
   width: 100%;
-  height: 152px;
   overflow: auto;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
@@ -1832,7 +1846,7 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel {
+.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
   top: auto;
   bottom: 0;
 }
@@ -2200,28 +2214,9 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   top: 0;
 }
 .edit-site-layout__sidebar > div {
-  overflow-y: auto;
-  min-height: 100%;
-  visibility: hidden;
-  scrollbar-color: #757575 #1e1e1e;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar-track {
-  background-color: #1e1e1e;
-}
-.edit-site-layout__sidebar > div::-webkit-scrollbar-thumb {
-  background-color: #757575;
-  border-radius: 8px;
-  border: 3px solid transparent;
-  background-clip: padding-box;
-}
-.edit-site-layout__sidebar > div:hover, .edit-site-layout__sidebar > div:focus, .edit-site-layout__sidebar > div > * {
-  visibility: visible;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 .edit-site-layout__sidebar .resizable-editor__drag-handle {
   right: 0;
@@ -2324,6 +2319,67 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   border-radius: 2px;
 }
 
+.edit-site-layout__actions {
+  z-index: 100000;
+  position: fixed !important;
+  top: -9999em;
+  bottom: auto;
+  left: auto;
+  right: 0;
+  width: 280px;
+  color: #1e1e1e;
+  background: #fff;
+}
+.edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
+  top: 0;
+  bottom: 0;
+}
+@media (min-width: 782px) {
+  .edit-site-layout__actions {
+    border-left: 1px solid #ddd;
+  }
+}
+
+@media (min-width: 600px) {
+  .edit-site-save-panel__modal {
+    width: 600px;
+  }
+}
+
+.edit-site-sidebar__content {
+  flex-grow: 1;
+  overflow-y: auto;
+  visibility: hidden;
+  scrollbar-color: #757575 #1e1e1e;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+.edit-site-sidebar__content::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.edit-site-sidebar__content::-webkit-scrollbar-track {
+  background-color: #1e1e1e;
+}
+.edit-site-sidebar__content::-webkit-scrollbar-thumb {
+  background-color: #757575;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.edit-site-sidebar__content:hover, .edit-site-sidebar__content:focus, .edit-site-sidebar__content > * {
+  visibility: visible;
+}
+
+.edit-site-sidebar__footer {
+  border-top: 1px solid #2f2f2f;
+  flex-shrink: 0;
+  margin: 0 24px;
+  padding: 24px 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .edit-site-sidebar__content.edit-site-sidebar__content {
   overflow-x: unset;
 }
@@ -2425,6 +2481,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-site-hub__edit-button {
   height: 32px;
+  color: #fff;
 }
 
 .edit-site-site-hub__post-type {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.1",
+	"version": "5.3.2",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,33 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.1",
-		"@wordpress/block-library": "^8.3.1",
+		"@wordpress/block-editor": "^11.3.2",
+		"@wordpress/block-library": "^8.3.2",
 		"@wordpress/blocks": "^12.3.1",
 		"@wordpress/components": "^23.3.1",
 		"@wordpress/compose": "^6.3.1",
 		"@wordpress/core-data": "^6.3.1",
 		"@wordpress/data": "^8.3.1",
 		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.1",
+		"@wordpress/editor": "^13.3.2",
 		"@wordpress/element": "^5.3.1",
 		"@wordpress/experiments": "^0.8.1",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
 		"@wordpress/icons": "^9.17.1",
-		"@wordpress/interface": "^5.3.1",
+		"@wordpress/interface": "^5.3.2",
 		"@wordpress/keyboard-shortcuts": "^4.3.1",
 		"@wordpress/keycodes": "^3.26.1",
 		"@wordpress/media-utils": "^4.17.1",
 		"@wordpress/notices": "^3.26.1",
 		"@wordpress/plugins": "^5.3.1",
 		"@wordpress/preferences": "^3.3.1",
-		"@wordpress/reusable-blocks": "^4.3.1",
+		"@wordpress/reusable-blocks": "^4.3.2",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/url": "^3.27.1",
 		"@wordpress/viewport": "^5.3.1",
-		"@wordpress/widgets": "^3.3.1",
+		"@wordpress/widgets": "^3.3.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
+	"gitHead": "3eb2c536278d5a17f698b9c378fe3db746a89622"
 }

package/src/components/editor/index.js

@@ -3,7 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -16,11 +16,7 @@ import {
 	ComplementaryArea,
 	store as interfaceStore,
 } from '@wordpress/interface';
-import {
-	EditorNotices,
-	EditorSnackbars,
-	EntitiesSavedStates,
-} from '@wordpress/editor';
+import { EditorNotices, EditorSnackbars } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -64,7 +60,6 @@ export default function Editor() {
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
-		isSaveViewOpen,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
@@ -75,7 +70,6 @@ export default function Editor() {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			isSaveViewOpened,
 		} = unlock( select( editSiteStore ) );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
@@ -104,7 +98,6 @@ export default function Editor() {
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
@@ -114,8 +107,7 @@ export default function Editor() {
 			),
 		};
 	}, [] );
-	const { setIsSaveViewOpened, setEditedPostContext } =
-		useDispatch( editSiteStore );
+	const { setEditedPostContext } = useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -211,38 +203,6 @@ export default function Editor() {
 										<ComplementaryArea.Slot scope="core/edit-site" />
 									)
 								}
-								actions={
-									isEditMode && (
-										<>
-											{ isSaveViewOpen ? (
-												<EntitiesSavedStates
-													close={ () =>
-														setIsSaveViewOpened(
-															false
-														)
-													}
-												/>
-											) : (
-												<div className="edit-site-editor__toggle-save-panel">
-													<Button
-														variant="secondary"
-														className="edit-site-editor__toggle-save-panel-button"
-														onClick={ () =>
-															setIsSaveViewOpened(
-																true
-															)
-														}
-														aria-expanded={ false }
-													>
-														{ __(
-															'Open save panel'
-														) }
-													</Button>
-												</div>
-											) }
-										</>
-									)
-								}
 								footer={
 									showBlockBreakcrumb && (
 										<BlockBreadcrumb

package/src/components/editor/style.scss

@@ -7,8 +7,8 @@
 	display: flex;
 	justify-content: center;
 
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
+	.edit-site-layout__actions:focus &,
+	.edit-site-layout__actions:focus-within & {
 		top: auto;
 		bottom: 0;
 	}

package/src/components/global-styles/block-preview-panel.js

@@ -3,14 +3,9 @@
  */
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
-import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
-	const [
-		containerResizeListener,
-		{ width: containerWidth, height: containerHeight },
-	] = useResizeObserver();
 	const blockExample = getBlockType( name )?.example;
 	const blockExampleWithVariation = {
 		...blockExample,
@@ -25,23 +20,24 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 			name,
 			variation ? blockExampleWithVariation : blockExample
 		);
-	const viewportWidth = blockExample?.viewportWidth || containerWidth;
-	const minHeight = containerHeight;
+	const viewportWidth = blockExample?.viewportWidth || null;
+	const previewHeight = '150px';
 
 	return ! blockExample ? null : (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
-			<div className="edit-site-global-styles__block-preview-panel">
-				{ containerResizeListener }
-
+			<div
+				className="edit-site-global-styles__block-preview-panel"
+				style={ { maxHeight: previewHeight, boxSizing: 'initial' } }
+			>
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
-					minHeight={ minHeight }
+					minHeight={ previewHeight }
 					additionalStyles={ [
 						{
 							css: `
 								body{
-									min-height:${ minHeight }px;
+									min-height:${ previewHeight };
 									display:flex;align-items:center;justify-content:center;
 								}
 							`,

package/src/components/global-styles/context-menu.js

@@ -12,6 +12,7 @@ import {
 import {
 	typography,
 	border,
+	shadow,
 	color,
 	layout,
 	chevronLeft,
@@ -32,11 +33,13 @@ import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
+import { useHasShadowControl } from './shadow-panel';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
+	const hasEffectsPanel = useHasShadowControl( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
@@ -85,9 +88,18 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					<NavigationButtonAsItem
 						icon={ border }
 						path={ parentMenu + '/border' }
-						aria-label={ __( 'Border & shadow styles' ) }
+						aria-label={ __( 'Border' ) }
 					>
-						{ __( 'Border & Shadow' ) }
+						{ __( 'Border' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasEffectsPanel && (
+					<NavigationButtonAsItem
+						icon={ shadow }
+						path={ parentMenu + '/effects' }
+						aria-label={ __( 'Shadow' ) }
+					>
+						{ __( 'Shadow' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasLayoutPanel && (

package/src/components/global-styles/screen-border.js

@@ -10,12 +10,10 @@ import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import ShadowPanel, { useHasShadowControl } from './shadow-panel';
 
 function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const variationClassName = getVariationClassName( variation );
-	const hasShadowPanel = useHasShadowControl( name );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border & Shadow' ) } />
@@ -23,9 +21,6 @@ function ScreenBorder( { name, variation = '' } ) {
 			{ hasBorderPanel && (
 				<BorderPanel name={ name } variation={ variation } />
 			) }
-			{ hasShadowPanel && (
-				<ShadowPanel name={ name } variation={ variation } />
-			) }
 		</>
 	);
 }

package/src/components/global-styles/screen-effects.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassName } from './utils';
+import ShadowPanel, { useHasShadowControl } from './shadow-panel';
+
+function ScreenEffects( { name, variation = '' } ) {
+	const variationClassName = getVariationClassName( variation );
+	const hasShadowPanel = useHasShadowControl( name );
+	return (
+		<>
+			<ScreenHeader title={ __( 'Shadow' ) } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasShadowPanel && (
+				<ShadowPanel name={ name } variation={ variation } />
+			) }
+		</>
+	);
+}
+
+export default ScreenEffects;

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

@@ -129,7 +129,7 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 	return (
 		<div className="edit-site-global-styles__shadow-panel">
 			<VStack spacing={ 4 }>
-				<Heading level={ 5 }>{ __( 'Shadows' ) }</Heading>
+				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
 				<ShadowPresets
 					presets={ shadows }
 					activeShadow={ shadow }

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

@@ -1,6 +1,3 @@
-// Variables
-$block-preview-height: 150px;
-
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -130,7 +127,6 @@ $block-preview-height: 150px;
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
-	height: $block-preview-height + 2 * $border-width;
 	overflow: auto;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;

package/src/components/global-styles/ui.js

@@ -38,6 +38,7 @@ import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../experiments';
+import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -228,6 +229,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
+				<ScreenEffects name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

package/src/components/layout/index.js

@@ -39,6 +39,7 @@ import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../experiments';
+import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -267,6 +268,8 @@ export default function Layout() {
 						) }
 					</AnimatePresence>
 
+					<SavePanel />
+
 					{ showCanvas && (
 						<div
 							className={ classnames(