@wordpress/edit-site 5.3.0 → 5.3.2

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.0",
+	"version": "5.3.2",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,35 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.26.0",
-		"@wordpress/api-fetch": "^6.23.0",
-		"@wordpress/block-editor": "^11.3.0",
-		"@wordpress/block-library": "^8.3.0",
-		"@wordpress/blocks": "^12.3.0",
-		"@wordpress/components": "^23.3.0",
-		"@wordpress/compose": "^6.3.0",
-		"@wordpress/core-data": "^6.3.0",
-		"@wordpress/data": "^8.3.0",
-		"@wordpress/deprecated": "^3.26.0",
-		"@wordpress/editor": "^13.3.0",
-		"@wordpress/element": "^5.3.0",
-		"@wordpress/experiments": "^0.8.0",
-		"@wordpress/hooks": "^3.26.0",
-		"@wordpress/html-entities": "^3.26.0",
-		"@wordpress/i18n": "^4.26.0",
-		"@wordpress/icons": "^9.17.0",
-		"@wordpress/interface": "^5.3.0",
-		"@wordpress/keyboard-shortcuts": "^4.3.0",
-		"@wordpress/keycodes": "^3.26.0",
-		"@wordpress/media-utils": "^4.17.0",
-		"@wordpress/notices": "^3.26.0",
-		"@wordpress/plugins": "^5.3.0",
-		"@wordpress/preferences": "^3.3.0",
-		"@wordpress/reusable-blocks": "^4.3.0",
-		"@wordpress/style-engine": "^1.9.0",
-		"@wordpress/url": "^3.27.0",
-		"@wordpress/viewport": "^5.3.0",
-		"@wordpress/widgets": "^3.3.0",
+		"@wordpress/a11y": "^3.26.1",
+		"@wordpress/api-fetch": "^6.23.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.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.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.2",
+		"@wordpress/style-engine": "^1.9.1",
+		"@wordpress/url": "^3.27.1",
+		"@wordpress/viewport": "^5.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": "cab6ebe2b4c5dbacfd753dcae4a2406559c4813c"
+	"gitHead": "3eb2c536278d5a17f698b9c378fe3db746a89622"
 }

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

@@ -20,6 +20,7 @@ import {
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
+import { unlock } from '../../experiments';
 
 export default function NewTemplatePart( {
 	postType,
@@ -30,7 +31,7 @@ export default function NewTemplatePart( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
@@ -63,7 +64,7 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
 			history.push( {

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

@@ -48,6 +48,7 @@ import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../experiments';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
@@ -98,8 +99,9 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, __unstableSetCanvasMode } =
-		useDispatch( editSiteStore );
+	const { setTemplate, setCanvasMode } = unlock(
+		useDispatch( editSiteStore )
+	);
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -140,7 +142,7 @@ export default function NewTemplate( {
 			setTemplate( newTemplate.id, newTemplate.slug );
 
 			// Switch to edit mode.
-			__unstableSetCanvasMode( 'edit' );
+			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {

package/src/components/block-editor/editor-canvas.js

@@ -8,24 +8,27 @@ import {
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../experiments';
 import { store as editSiteStore } from '../../store';
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { deviceType, isZoomOutMode } = useSelect(
+	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
 				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
 		} ),
 		[]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	return (
@@ -57,6 +60,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
 			{ ...props }
+			role={ canvasMode === 'view' ? 'button' : undefined }
+			onClick={
+				canvasMode === 'view'
+					? () => setCanvasMode( 'edit' )
+					: undefined
+			}
+			readonly={ canvasMode === 'view' }
 		>
 			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
 			{ settings.svgFilters }

package/src/components/block-editor/index.js

@@ -51,13 +51,14 @@ export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
-				select( editSiteStore );
+			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
 			return {
 				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
-				canvasMode: __unstableGetCanvasMode(),
+				canvasMode: getCanvasMode(),
 			};
 		},
 		[ setIsInserterOpened ]

package/src/components/block-editor/style.scss

@@ -158,3 +158,4 @@
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 }
+

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';
 
 /**
@@ -38,6 +34,7 @@ import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
+import { unlock } from '../../experiments';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -63,7 +60,6 @@ export default function Editor() {
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
-		isSaveViewOpen,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
@@ -71,11 +67,10 @@ export default function Editor() {
 			getEditedPostId,
 			getEditedPostContext,
 			getEditorMode,
-			__unstableGetCanvasMode,
+			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			isSaveViewOpened,
-		} = select( editSiteStore );
+		} = unlock( select( editSiteStore ) );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -99,11 +94,10 @@ export default function Editor() {
 				  ] )
 				: false,
 			editorMode: getEditorMode(),
-			canvasMode: __unstableGetCanvasMode(),
+			canvasMode: getCanvasMode(),
 			blockEditorMode: __unstableGetEditorMode(),
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
@@ -113,8 +107,7 @@ export default function Editor() {
 			),
 		};
 	}, [] );
-	const { setIsSaveViewOpened, setEditedPostContext } =
-		useDispatch( editSiteStore );
+	const { setEditedPostContext } = useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -210,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;