Editor: Move the resizing of the editor to the EditorCanvas component (…

…#61896) Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · May 23, 2024 · 19508f9 · 19508f9 · github-actions · May 23, 2024
1 parent 79d79ff
commit 19508f9
Show file tree

Hide file tree

Showing 15 changed files with 313 additions and 308 deletions.
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,8 +4,3 @@ iframe[name="editor-canvas"] {
  display: block;
  background-color: $gray-300;
 }
-
-
-iframe[name="editor-canvas"].has-editor-padding {
- padding: $grid-unit-30 $grid-unit-30 0;
-}
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -1,3 +1,7 @@
+.block-editor-iframe__body {
+ position: relative;
+}
+
 .block-editor-iframe__container {
  width: 100%;
  height: 100%;

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -25,6 +25,12 @@ import { usePaddingAppender } from './use-padding-appender';
 const { EditorCanvas } = unlock( editorPrivateApis );
 
 const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
+const DESIGN_POST_TYPES = [
+ 'wp_template',
+ 'wp_template_part',
+ 'wp_block',
+ 'wp_navigation',
+];
 
 export default function VisualEditor( { styles } ) {
  const {
@@ -34,22 +40,25 @@ export default function VisualEditor( { styles } ) {
  hasV3BlocksOnly,
  isEditingTemplate,
  isZoomedOutView,
+ postType,
  } = useSelect( ( select ) => {
  const { isFeatureActive } = select( editPostStore );
- const { getEditorSettings, getRenderingMode } = select( editorStore );
+ const { getEditorSettings, getRenderingMode, getCurrentPostType } =
+ select( editorStore );
  const { getBlockTypes } = select( blocksStore );
  const { __unstableGetEditorMode } = select( blockEditorStore );
  const editorSettings = getEditorSettings();
+ const _postType = getCurrentPostType();
  return {
  isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
  renderingMode: getRenderingMode(),
  isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
  hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
  return type.apiVersion >= 3;
  } ),
- isEditingTemplate:
- select( editorStore ).getCurrentPostType() === 'wp_template',
+ isEditingTemplate: _postType === 'wp_template',
  isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+ postType: _postType,
  };
  }, [] );
  const hasMetaBoxes = useSelect(
@@ -66,7 +75,8 @@ export default function VisualEditor( { styles } ) {
  if (
  ! isZoomedOutView &&
  ! hasMetaBoxes &&
- renderingMode === 'post-only'
+ renderingMode === 'post-only' &&
+ ! DESIGN_POST_TYPES.includes( postType )
  ) {
  paddingBottom = '40vh';
  }

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -28,7 +28,7 @@ import {
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+function EditorCanvas( { settings, children } ) {
  const {
  hasBlocks,
  isFocusMode,
@@ -109,11 +109,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
  // Forming a "block formatting context" to prevent margin collapsing.
  // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 
- css: `.is-root-container{display:flow-root;${
- // Some themes will have `min-height: 100vh` for the root container,
- // which isn't a requirement in auto resize mode.
- enableResizing ? 'min-height:0!important;' : ''
- }}body{position:relative; ${
+ css: `body{${
  canvasMode === 'view'
  ? `min-height: 100vh; ${
  currentPostIsTrashed ? '' : 'cursor: pointer;'
@@ -122,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
  }}}`,
  },
  ],
- [ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
+ [ settings.styles, canvasMode, currentPostIsTrashed ]
  );
 
  return (
@@ -136,7 +132,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
  className: clsx( 'edit-site-visual-editor__editor-canvas', {
  'is-focused': isFocused && canvasMode === 'view',
  } ),
- ...props,
  ...( canvasMode === 'view' ? viewModeIframeProps : {} ),
  } }
  >

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
@@ -6,98 +6,41 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import ResizableEditor from './resizable-editor';
 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 {
- FOCUSABLE_ENTITIES,
- NAVIGATION_POST_TYPE,
- TEMPLATE_POST_TYPE,
-} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-const { useLocation } = unlock( routerPrivateApis );
 
 export default function SiteEditorCanvas() {
- const location = useLocation();
- const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
- useSelect( ( select ) => {
- const { getEditedPostType, getCanvasMode } = unlock(
- select( editSiteStore )
- );
- const { __unstableGetEditorMode } = select( blockEditorStore );
- const _templateType = getEditedPostType();
+ const { isViewMode } = useSelect( ( select ) => {
+ const { getCanvasMode } = unlock( select( editSiteStore ) );
 
- return {
- templateType: _templateType,
- isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
- isViewMode: getCanvasMode() === 'view',
- isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
- };
- }, [] );
- const isFocusMode = location.params.focusMode || isFocusableEntity;
- const [ resizeObserver, sizes ] = useResizeObserver();
+ return {
+ isViewMode: getCanvasMode() === 'view',
+ };
+ }, [] );
 
  const settings = useSiteEditorSettings();
 
- const isMobileViewport = useViewportMatch( 'small', '<' );
- const enableResizing =
- isFocusMode &&
- ! isViewMode &&
- // Disable resizing in mobile viewport.
- ! isMobileViewport &&
- // Dsiable resizing in zoomed-out mode.
- ! isZoomOutMode &&
- // Disable resizing when editing a template in focus mode.
- templateType !== TEMPLATE_POST_TYPE;
-
- const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
- const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
- const forceFullHeight = isNavigationFocusMode;
-
  return (
  <EditorCanvasContainer.Slot>
  { ( [ editorCanvasView ] ) =>
  editorCanvasView ? (
- <div className="edit-site-visual-editor is-focus-mode">
+ <div className="edit-site-visual-editor">
  { editorCanvasView }
  </div>
  ) : (
  <div
  className={ clsx( 'edit-site-visual-editor', {
- 'is-focus-mode': isFocusMode || !! editorCanvasView,
  'is-view-mode': isViewMode,
  } ) }
  >
- <ResizableEditor
- enableResizing={ enableResizing }
- height={
- sizes.height && ! forceFullHeight
- ? sizes.height
- : '100%'
- }
- >
- <EditorCanvas
- enableResizing={ enableResizing }
- settings={ settings }
- >
- {
- // Avoid resize listeners when not needed,
- // these will trigger unnecessary re-renders
- // when animating the iframe width.
- enableResizing && resizeObserver
- }
- </EditorCanvas>
- </ResizableEditor>
+ <EditorCanvas settings={ settings } />
  </div>
  )
  }

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -40,98 +40,4 @@
  outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
  }
  }
-
-
- &.is-focus-mode {
- .edit-site-layout.is-full-canvas & {
- padding: $grid-unit-30;
- }
-
- .edit-site-visual-editor__editor-canvas {
- max-height: 100%;
- }
-
- // To hide the horizontal scrollbar and show the drag handle on the
- // left and right of the container.
- .components-resizable-box__container {
- overflow: visible;
- }
- }
-
- & > .components-resizable-box__container {
- margin: 0 auto;
- }
-}
-
-.resizable-editor__drag-handle {
- position: absolute;
- top: 0;
- bottom: 0;
- padding: 0;
- margin: auto 0;
- width: $grid-unit-15;
- appearance: none;
- cursor: ew-resize;
- outline: none;
- background: none;
- border-radius: $radius-block-ui;
- border: 0;
-
- &.is-variation-default {
- height: 100px;
- }
-
- &.is-variation-separator {
- height: 100%;
- width: $grid-unit-30;
- right: 0;
-
- &::after {
- width: 2px;
- border-radius: 0;
- background: transparent;
- left: 50%;
- transform: translateX(-1px);
- right: 0;
- transition: all ease 0.2s;
- transition-delay: 0.1s;
- @include reduce-motion;
- }
- }
-
- &::after {
- position: absolute;
- top: $grid-unit-20;
- left: $grid-unit-05;
- right: 0;
- bottom: $grid-unit-20;
- content: "";
- width: $grid-unit-05;
- background-color: rgba($gray-700, 0.4);
- border-radius: $radius-block-ui;
- }
-
- &.is-left {
- // Subtract half of the handle width to properly center.
- left: -$grid-unit-20 - math.div($grid-unit-05, 2);
- }
-
- &.is-right {
- // Subtract half of the handle width to properly center.
- right: -$grid-unit-20 - math.div($grid-unit-05, 2);
- }
-
- &:hover,
- &:focus,
- &:active {
- opacity: 1;
- &::after {
- background-color: var(--wp-admin-theme-color);
- }
- }
-
- &.is-variation-separator:focus::after {
- border-radius: $radius-block-ui;
- box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
- }
 }
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -13,14 +13,18 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+ store as editorStore,
+ privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import ResizableEditor from '../block-editor/resizable-editor';
+
+const { ResizableEditor } = unlock( editorPrivateApis );
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -120,25 +124,27 @@ function EditorCanvasContainer( {
 
  return (
  <EditorCanvasContainerFill>
- <ResizableEditor enableResizing={ enableResizing }>
- { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
- <section
- className="edit-site-editor-canvas-container"
- ref={ shouldShowCloseButton ? focusOnMountRef : null }
- onKeyDown={ closeOnEscape }
- aria-label={ title }
- >
- { shouldShowCloseButton && (
- <Button
- className="edit-site-editor-canvas-container__close-button"
- icon={ closeSmall }
- label={ closeButtonLabel || __( 'Close' ) }
- onClick={ onCloseContainer }
- />
- ) }
- { childrenWithProps }
- </section>
- </ResizableEditor>
+ <div className="edit-site-editor-canvas-container">
+ <ResizableEditor enableResizing={ enableResizing }>
+ { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+ <section
+ className="edit-site-editor-canvas-container__section"
+ ref={ shouldShowCloseButton ? focusOnMountRef : null }
+ onKeyDown={ closeOnEscape }
+ aria-label={ title }
+ >
+ { shouldShowCloseButton && (
+ <Button
+ className="edit-site-editor-canvas-container__close-button"
+ icon={ closeSmall }
+ label={ closeButtonLabel || __( 'Close' ) }
+ onClick={ onCloseContainer }
+ />
+ ) }
+ { childrenWithProps }
+ </section>
+ </ResizableEditor>
+ </div>
  </EditorCanvasContainerFill>
  );
 }

diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -1,4 +1,12 @@
 .edit-site-editor-canvas-container {
+ height: 100%;
+
+ .edit-site-layout.is-full-canvas & {
+ padding: $grid-unit-30 $grid-unit-30 0;
+ }
+}
+
+.edit-site-editor-canvas-container__section {
  background: $white; // Fallback color, overridden by JavaScript.
  border-radius: $radius-block-ui;
  bottom: 0;