Site Editor: Update to use the EditorCanvas component from the editor…

… package

packages/edit-post/src/components/layout/index.js

@@ -11,6 +11,7 @@ import {
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
 	EditorKeyboardShortcutsRegister,
+	EditorSnackbars,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
@@ -294,6 +295,7 @@ function Layout( { initialPost } ) {
 			) }
 			<PostEditorMoreMenu />
 			<BackButton initialPost={ initialPost } />
+			<EditorSnackbars />
 			<EditorInterface
 				className={ className }
 				styles={ styles }

packages/edit-post/src/components/layout/style.scss

@@ -9,25 +9,12 @@
 }
 
 // Adjust the position of the notices
-.edit-post-layout .components-editor-notices__snackbar {
+.components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.is-distraction-free {
-	.components-editor-notices__snackbar {
-		bottom: 16px;
-	}
-}
-
-// Adjust the position of the notices when breadcrumbs are present
-.has-block-breadcrumbs {
-	.components-editor-notices__snackbar {
-		bottom: 40px;
-	}
+	bottom: 24px;
+	padding-left: 24px;
+	padding-right: 24px;
 }
 
 @include editor-left(".edit-post-layout .components-editor-notices__snackbar");

packages/edit-site/src/components/block-editor/style.scss

@@ -1,29 +1,3 @@
-// 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 visual-editor.
-.edit-site-block-editor__editor-styles-wrapper  .components-button {
-	font-family: $default-font;
-	font-size: $default-font-size;
-	padding: 6px 12px;
-
-	&.is-tertiary,
-	&.has-icon {
-		padding: 6px;
-	}
-}
-
-.edit-site-visual-editor {
-	height: 100%;
-	background-color: $gray-300;
-
-	// 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);

packages/edit-site/src/components/block-editor/editor-canvas.js → packages/edit-site/src/components/block-editor/use-editor-iframe-props.js

@@ -8,22 +8,17 @@ import clsx from 'clsx';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-const { VisualEditor } = unlock( editorPrivateApis );
-
-function EditorCanvas( { settings } ) {
+export default function useEditorIframeProps() {
 	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getCanvasMode } = unlock( select( editSiteStore ) );
 
@@ -75,36 +70,10 @@ function EditorCanvas( { settings } ) {
 		readonly: true,
 	};
 
-	const styles = useMemo(
-		() => [
-			...settings.styles,
-			{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-
-				css: `body{${
-					canvasMode === 'view'
-						? `min-height: 100vh; ${
-								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }`
-						: ''
-				}}}`,
-			},
-		],
-		[ settings.styles, canvasMode, currentPostIsTrashed ]
-	);
-
-	return (
-		<VisualEditor
-			styles={ styles }
-			iframeProps={ {
-				className: clsx( 'edit-site-visual-editor__editor-canvas', {
-					'is-focused': isFocused && canvasMode === 'view',
-				} ),
-				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
-			} }
-		/>
-	);
+	return {
+		className: clsx( 'edit-site-visual-editor__editor-canvas', {
+			'is-focused': isFocused && canvasMode === 'view',
+		} ),
+		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+	};
 }
-
-export default EditorCanvas;

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -4,7 +4,6 @@
 import { Children, cloneElement, useState } from '@wordpress/element';
 import {
 	Button,
-	privateApis as componentsPrivateApis,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -24,7 +23,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-const { ResizableEditor } = unlock( editorPrivateApis );
+const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -45,15 +44,6 @@ function getEditorCanvasContainerTitle( view ) {
 	}
 }
 
-// Creates a private slot fill.
-const { createPrivateSlotFill } = unlock( componentsPrivateApis );
-const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
-const {
-	privateKey,
-	Slot: EditorCanvasContainerSlot,
-	Fill: EditorCanvasContainerFill,
-} = createPrivateSlotFill( SLOT_FILL_NAME );
-
 function EditorCanvasContainer( {
 	children,
 	closeButtonLabel,
@@ -123,7 +113,7 @@ function EditorCanvasContainer( {
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
-		<EditorCanvasContainerFill>
+		<EditorContentSlotFill.Fill>
 			<div className="edit-site-editor-canvas-container">
 				<ResizableEditor enableResizing={ enableResizing }>
 					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
@@ -145,14 +135,13 @@ function EditorCanvasContainer( {
 					</section>
 				</ResizableEditor>
 			</div>
-		</EditorCanvasContainerFill>
+		</EditorContentSlotFill.Fill>
 	);
 }
 function useHasEditorCanvasContainer() {
-	const fills = useSlotFills( privateKey );
+	const fills = useSlotFills( EditorContentSlotFill.privateKey );
 	return !! fills?.length;
 }
 
-EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
 export default EditorCanvasContainer;
 export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

packages/edit-site/src/components/editor-canvas-container/style.scss

@@ -1,5 +1,13 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
+	background-color: $gray-300;
+
+	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
 
 	.edit-site-layout.is-full-canvas & {
 		padding: $grid-unit-30 $grid-unit-30 0;