diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index b53b75bb5ec70..bb0ce2e38732e 100644
--- 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
index f6686b5977dd4..24a50cb7ba69a 100644
--- 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 (
-
-
-
+
);
}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
deleted file mode 100644
index 8ad587d4e5a58..0000000000000
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.edit-post-visual-editor {
- position: relative;
- display: flex;
- flex-flow: column;
- // 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.
- &:not(.has-inline-canvas) {
- overflow: hidden;
- }
-
- // Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
- // interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
- // when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
- background-color: $gray-300;
-
- // 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;
- }
- }
-
- // The following flex rule is important for the canvas layout, please be careful when refactoring,
- // as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
- // The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
- // We set the canvas to be allowed to grow (vertically), but not shrink.
- flex: 1 0 auto;
-
- // Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
- // as align-items: stretch is inherited by default.Additionally due to older browser's flex height
- // interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
- // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
-}
-
-.edit-post-visual-editor__content-area {
- width: 100%;
- height: 100%;
- position: relative;
- box-sizing: border-box;
- display: flex;
-
- // This is necessary for older browsers due to their flex height interpretation.
- // These browsers (including Safari 13) ignore the percentage value entirely.
- // By setting flex-grow, the element stretches to fill the parent.
- // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
- flex-grow: 1;
-}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index ef05d688c4d34..7a935f198660a 100644
--- 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
index df63e3fde09aa..03d11dcf8237e 100644
--- 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 }
) : (
-
-
-
+
)
}
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 2d2409a84a7a1..14f2074130d11 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -13,13 +13,8 @@
}
.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 {
@@ -27,11 +22,11 @@
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
index 6007cd8f33e45..52bc953eff329 100644
--- 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 (