Editor: Remove extra div container and unify the container between po…

…st and site editors (#62016) Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · May 28, 2024 · f174441 · f174441
1 parent d990957
commit f174441
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 114 deletions.
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -1,3 +1,8 @@
+.edit-post-visual-editor {
+	flex: 1 0 auto;
+	height: auto;
+}
+
 .edit-post-layout__metaboxes {
 	flex-shrink: 0;
 	clear: both;

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -100,19 +95,14 @@ export default function VisualEditor( { styles } ) {
 		isEditingTemplate;
 
 	return (
-		<div
-			className={ clsx( 'edit-post-visual-editor', {
-				'has-inline-canvas': ! isToBeIframed,
-			} ) }
-		>
-			<VisualEditorRoot
-				disableIframe={ ! isToBeIframed }
-				styles={ styles }
-				// We should auto-focus the canvas (title) on load.
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={ ! isWelcomeGuideVisible }
-				contentRef={ paddingAppenderRef }
-			/>
-		</div>
+		<VisualEditorRoot
+			className="edit-post-visual-editor"
+			disableIframe={ ! isToBeIframed }
+			styles={ styles }
+			// We should auto-focus the canvas (title) on load.
+			// eslint-disable-next-line jsx-a11y/no-autofocus
+			autoFocus={ ! isWelcomeGuideVisible }
+			contentRef={ paddingAppenderRef }
+		/>
 	);
 }
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -2,7 +2,6 @@
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 
 /**

diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -1,30 +1,11 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
 import useSiteEditorSettings from './use-site-editor-settings';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 export default function SiteEditorCanvas() {
-	const { isViewMode } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-
-		return {
-			isViewMode: getCanvasMode() === 'view',
-		};
-	}, [] );
-
 	const settings = useSiteEditorSettings();
 
 	return (
@@ -35,13 +16,7 @@ export default function SiteEditorCanvas() {
 						{ editorCanvasView }
 					</div>
 				) : (
-					<div
-						className={ clsx( 'edit-site-visual-editor', {
-							'is-view-mode': isViewMode,
-						} ) }
-					>
-						<EditorCanvas settings={ settings } />
-					</div>
+					<EditorCanvas settings={ settings } />
 				)
 			}
 		</EditorCanvasContainer.Slot>

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -13,25 +13,20 @@
 }
 
 .edit-site-visual-editor {
-	position: relative;
 	height: 100%;
-	overflow: hidden;
-	display: block;
 	background-color: $gray-300;
-	// Centralize the editor horizontally (flex-direction is column).
-	align-items: center;
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {
 		display: block;
 		width: 100%;
 		height: 100%;
 	}
+}
 
-	.edit-site-visual-editor__editor-canvas {
-		&.is-focused {
-			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
-		}
+.edit-site-visual-editor__editor-canvas {
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 	}
 }
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
@@ -103,6 +103,7 @@ function VisualEditor( {
 	disableIframe = false,
 	iframeProps,
 	contentRef,
+	className,
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -357,6 +358,8 @@ function VisualEditor( {
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
 		! isZoomOutMode;
+	const shouldIframe =
+		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
 	const iframeStyles = useMemo( () => {
 		return [
@@ -373,9 +376,10 @@ function VisualEditor( {
 
 	return (
 		<div
-			className={ clsx( 'editor-visual-editor', {
+			className={ clsx( 'editor-visual-editor', className, {
 				'has-padding': isFocusedEntity || enableResizing,
 				'is-resizable': enableResizing,
+				'is-iframed': shouldIframe,
 			} ) }
 		>
 			<ResizableEditor
@@ -385,10 +389,7 @@ function VisualEditor( {
 				}
 			>
 				<BlockCanvas
-					shouldIframe={
-						! disableIframe ||
-						[ 'Tablet', 'Mobile' ].includes( deviceType )
-					}
+					shouldIframe={ shouldIframe }
 					contentRef={ contentRef }
 					styles={ iframeStyles }
 					height="100%"

diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
@@ -1,5 +1,11 @@
 .editor-visual-editor {
+	position: relative;
 	height: 100%;
+	display: block;
+	background-color: $gray-300;
+
+	// Centralize the editor horizontally (flex-direction is column).
+	align-items: center;
 
 	&.is-resizable {
 		max-height: 100%;
@@ -8,4 +14,23 @@
 	&.has-padding {
 		padding: $grid-unit-30 $grid-unit-30 0;
 	}
+
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	.is-iframed {
+		overflow: hidden;
+	}
+
+	// The button element easily inherits styles that are meant for the editor style.
+	// These rules enhance the specificity to reduce that inheritance.
+	// This is duplicated in edit-site.
+	& .components-button {
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 12px;
+
+		&.has-icon {
+			padding: 6px;
+		}
+	}
 }