BlockCanvas: Fix the height prop and width of the block editor (#65977)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: ajlende <[email protected]>
WordPress · Oct 17, 2024 · 96bfc0a · 96bfc0a
1 parent 0ed5f36
commit 96bfc0a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -37,7 +37,7 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockCanvas height="100%" styles={ editorStyles } />
+				<BlockCanvas height="500px" styles={ editorStyles } />
 			</BlockEditorProvider>
 		</div>
 	);