From 55c90522ffea9cebae04a67d29d56db669b06497 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 9 Oct 2024 18:00:11 +0200
Subject: [PATCH] BlockCanvas: Fix the height prop and width of the block
 editor (#65977)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
---
 .../src/components/iframe/content.scss        | 19 -------------------
 .../src/components/iframe/index.js            |  1 +
 .../src/components/iframe/style.scss          | 16 ++++++++++++++++
 packages/block-editor/src/style.scss          |  1 +
 storybook/stories/playground/box/index.js     |  2 +-
 5 files changed, 19 insertions(+), 20 deletions(-)
 create mode 100644 packages/block-editor/src/components/iframe/style.scss

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 0e7ee7e59d5fe9..7e532235fcc899 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -3,25 +3,6 @@
 	border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}
-
 .block-editor-iframe__html {
 	border: 0 solid $gray-300;
 	transform-origin: top center;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3e022cf95ae556..fa7ce26526f410 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -380,6 +380,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
new file mode 100644
index 00000000000000..e460df3ab3e0a9
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -0,0 +1,16 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+	width: $prev-container-width;
+	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index e6ec77b55a0ec5..512169351fe1fb 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -30,6 +30,7 @@
 @import "./components/global-styles/style.scss";
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
+@import "./components/iframe/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js
index 3fb3c3b5862c47..cca522a90c1441 100644
--- a/storybook/stories/playground/box/index.js
+++ b/storybook/stories/playground/box/index.js
@@ -37,7 +37,7 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockCanvas height="100%" styles={ editorStyles } />
+				<BlockCanvas height="500px" styles={ editorStyles } />
 			</BlockEditorProvider>
 		</div>
 	);