diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index ac1083e69abd7e..2e464e37c0cd9e 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -17,6 +17,11 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
@@ -46,6 +51,7 @@ function getEditorCanvasContainerTitle( view ) {
 
 function EditorCanvasContainer( {
 	children,
+	className,
 	closeButtonLabel,
 	onClose,
 	enableResizing = false,
@@ -114,7 +120,12 @@ function EditorCanvasContainer( {
 
 	return (
 		<EditorContentSlotFill.Fill>
-			<div className="edit-site-editor-canvas-container">
+			<div
+				className={ clsx(
+					'edit-site-editor-canvas-container',
+					className
+				) }
+			>
 				<ResizableEditor enableResizing={ enableResizing }>
 					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 					<section
@@ -123,15 +134,18 @@ function EditorCanvasContainer( {
 						onKeyDown={ closeOnEscape }
 						aria-label={ title }
 					>
-						{ shouldShowCloseButton && (
-							<Button
-								size="compact"
-								className="edit-site-editor-canvas-container__close-button"
-								icon={ closeSmall }
-								label={ closeButtonLabel || __( 'Close' ) }
-								onClick={ onCloseContainer }
-							/>
-						) }
+						<div className="edit-site-editor-canvas-container__header">
+							<span>{ title }</span>
+							{ shouldShowCloseButton && (
+								<Button
+									size="compact"
+									className="edit-site-editor-canvas-container__close-button"
+									icon={ closeSmall }
+									label={ closeButtonLabel || __( 'Close' ) }
+									onClick={ onCloseContainer }
+								/>
+							) }
+						</div>
 						{ childrenWithProps }
 					</section>
 				</ResizableEditor>
diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
index 0bdbc2bbe32355..490b615d17e8e8 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -12,24 +12,27 @@
 	.edit-site-layout.is-full-canvas & {
 		padding: $grid-unit-30 $grid-unit-30 0;
 	}
-}
 
-.edit-site-editor-canvas-container__section {
-	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-large;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	right: 0;
-	top: 0;
-	transition: all 0.3s; // Match .block-editor-iframe__body transition.
-}
+	&__section {
+		background: $white; // Fallback color, overridden by JavaScript.
+		border-radius: $radius-large;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		position: absolute;
+		right: 0;
+		top: 0;
+		transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	}
 
-.edit-site-editor-canvas-container__close-button {
-	position: absolute;
-	right: $grid-unit-10;
-	top: $grid-unit-10;
-	z-index: 2;
-	background: $white;
+	&__header {
+		display: flex;
+		align-items: center;
+		padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 $grid-unit-20;
+		font-weight: 500;
+	}
+
+	&__close-button {
+		margin-left: auto;
+	}
 }
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 5ce95872e0c9ae..2b5f9f81fc3b15 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -72,6 +72,7 @@ function Revisions( { userConfig, blocks } ) {
 			title={ __( 'Revisions' ) }
 			closeButtonLabel={ __( 'Close revisions' ) }
 			enableResizing
+			className="edit-site-revisions"
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 93bbc6311c6865..f1301b40db8d4a 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -200,6 +200,7 @@ function StyleBook( {
 			onClose={ onClose }
 			enableResizing={ enableResizing }
 			closeButtonLabel={ showCloseButton ? __( 'Close' ) : null }
+			className="edit-site-style-book"
 		>
 			<div
 				className={ clsx( 'edit-site-style-book', {