From e4c7537018390edc7251b3ac15730cc7e961240c Mon Sep 17 00:00:00 2001
From: Vrishabhsk <vrishabhsk@gmail.com>
Date: Fri, 25 Oct 2024 14:06:06 +0400
Subject: [PATCH 1/4] Add style to fix scrollbar overlapping with close button

---
 .../src/components/editor-canvas-container/style.scss     | 8 ++++++++
 1 file changed, 8 insertions(+)

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..332c4cd1235ed1 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -32,4 +32,12 @@
 	top: $grid-unit-10;
 	z-index: 2;
 	background: $white;
+
+	// Prevents Scrollbar overlapping the close button when viewing revisions.
+	&[aria-label="Close revisions"] {
+		position: relative;
+		top: 0;
+		margin: 8px 0;
+		left: calc(100% - #{$grid-unit-50});
+	}
 }

From 62f33f599f6eb40524545f690bd3f863999ca998 Mon Sep 17 00:00:00 2001
From: Vrishabhsk <vrishabhsk@gmail.com>
Date: Mon, 28 Oct 2024 17:36:34 +0400
Subject: [PATCH 2/4] Add support for className prop

---
 .../src/components/editor-canvas-container/index.js | 13 ++++++++++++-
 .../edit-site/src/components/revisions/index.js     |  1 +
 .../edit-site/src/components/style-book/index.js    |  1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

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..e4629fcd480750 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
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', {

From 1d9dfc509eb8a28ae53d1cc72ea336d48652ee4c Mon Sep 17 00:00:00 2001
From: Vrishabhsk <vrishabhsk@gmail.com>
Date: Mon, 28 Oct 2024 17:38:22 +0400
Subject: [PATCH 3/4] Update selector for revisions close button

---
 .../src/components/editor-canvas-container/style.scss        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 332c4cd1235ed1..008cec9e1e1ed9 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -32,9 +32,12 @@
 	top: $grid-unit-10;
 	z-index: 2;
 	background: $white;
+}
+
+.edit-site-revisions {
 
 	// Prevents Scrollbar overlapping the close button when viewing revisions.
-	&[aria-label="Close revisions"] {
+	.edit-site-editor-canvas-container__close-button {
 		position: relative;
 		top: 0;
 		margin: 8px 0;

From 045f1a2be2c987b96d6698ed143e7c8250f7b223 Mon Sep 17 00:00:00 2001
From: Vrishabhsk <vrishabhsk@gmail.com>
Date: Fri, 1 Nov 2024 13:59:16 +0400
Subject: [PATCH 4/4] Show type of revision in the title

---
 .../editor-canvas-container/index.js          | 21 +++++----
 .../editor-canvas-container/style.scss        | 46 ++++++++-----------
 2 files changed, 31 insertions(+), 36 deletions(-)

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 e4629fcd480750..2e464e37c0cd9e 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -134,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 008cec9e1e1ed9..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,35 +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.
-}
 
-.edit-site-editor-canvas-container__close-button {
-	position: absolute;
-	right: $grid-unit-10;
-	top: $grid-unit-10;
-	z-index: 2;
-	background: $white;
-}
+	&__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-revisions {
+	&__header {
+		display: flex;
+		align-items: center;
+		padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 $grid-unit-20;
+		font-weight: 500;
+	}
 
-	// Prevents Scrollbar overlapping the close button when viewing revisions.
-	.edit-site-editor-canvas-container__close-button {
-		position: relative;
-		top: 0;
-		margin: 8px 0;
-		left: calc(100% - #{$grid-unit-50});
+	&__close-button {
+		margin-left: auto;
 	}
 }