diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index 6ec97bfb38853..525c79be53504 100644 --- 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 index 62a57030f1be1..165cf70d24a71 100644 --- 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 index c1e13d79f2941..43ee2458ceba2 100644 --- 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,12 +40,15 @@ 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(), @@ -47,9 +56,9 @@ export default function VisualEditor( { styles } ) { 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 index 4f5237b7fdf92..383125b1615de 100644 --- 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 index 9a74652b53cab..df63e3fde09aa 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 @@ -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 ( { ( [ editorCanvasView ] ) => editorCanvasView ? ( -
+
{ editorCanvasView }
) : (
- - - { - // Avoid resize listeners when not needed, - // these will trigger unnecessary re-renders - // when animating the iframe width. - enableResizing && resizeObserver - } - - +
) } diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index e3d68109d8b49..801ccc78e396c 100644 --- 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 index 0e9f7c3086ad7..ca5bc3a0b34f4 100644 --- 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 ( - - { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } -
- { shouldShowCloseButton && ( -
- +
+ + { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } +
+ { shouldShowCloseButton && ( +
+ +
); } diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index acc0e0872f0b4..0aca5f8045ce8 100644 --- 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; diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 37f03fc4a1dab..1fd0cb4262831 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -20,7 +20,11 @@ import { useEffect, useRef, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { parse } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; -import { useMergeRefs } from '@wordpress/compose'; +import { + useMergeRefs, + useViewportMatch, + useResizeObserver, +} from '@wordpress/compose'; /** * Internal dependencies @@ -29,7 +33,14 @@ import PostTitle from '../post-title'; import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; import EditTemplateBlocksNotification from './edit-template-blocks-notification'; +import ResizableEditor from '../resizable-editor'; import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block'; +import { + NAVIGATION_POST_TYPE, + PATTERN_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../store/constants'; const { LayoutStyle, @@ -44,10 +55,10 @@ const { * and they don't apply the layout styles. */ const DESIGN_POST_TYPES = [ - 'wp_block', - 'wp_template', - 'wp_navigation', - 'wp_template_part', + PATTERN_POST_TYPE, + TEMPLATE_POST_TYPE, + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, ]; /** @@ -94,8 +105,9 @@ function EditorCanvas( { disableIframe = false, iframeProps, contentRef, - children, } ) { + const [ resizeObserver, sizes ] = useResizeObserver(); + const isMobileViewport = useViewportMatch( 'small', '<' ); const { renderingMode, postContentAttributes, @@ -103,8 +115,10 @@ function EditorCanvas( { wrapperBlockName, wrapperUniqueId, deviceType, - showEditorPadding, + isFocusedEntity, isDesignPostType, + postType, + isPreview, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -120,7 +134,7 @@ function EditorCanvas( { const _renderingMode = getRenderingMode(); let _wrapperBlockName; - if ( postTypeSlug === 'wp_block' ) { + if ( postTypeSlug === PATTERN_POST_TYPE ) { _wrapperBlockName = 'core/block'; } else if ( _renderingMode === 'post-only' ) { _wrapperBlockName = 'core/post-content'; @@ -128,13 +142,13 @@ function EditorCanvas( { const editorSettings = getEditorSettings(); const supportsTemplateMode = editorSettings.supportsTemplateMode; - const postType = getPostType( postTypeSlug ); + const postTypeObject = getPostType( postTypeSlug ); const canEditTemplate = canUser( 'create', 'templates' ); const currentTemplateId = getCurrentTemplateId(); const template = currentTemplateId ? getEditedEntityRecord( 'postType', - 'wp_template', + TEMPLATE_POST_TYPE, currentTemplateId ) : undefined; @@ -146,14 +160,17 @@ function EditorCanvas( { // Post template fetch returns a 404 on classic themes, which // messes with e2e tests, so check it's a block theme first. editedPostTemplate: - postType?.viewable && supportsTemplateMode && canEditTemplate + postTypeObject?.viewable && + supportsTemplateMode && + canEditTemplate ? template : undefined, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - showEditorPadding: - !! editorSettings.onNavigateToPreviousEntityRecord, + isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord, + postType: postTypeSlug, + isPreview: editorSettings.__unstableIsPreviewMode, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -293,7 +310,6 @@ function EditorCanvas( { blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel ? fallbackLayout : blockListLayout; - const observeTypingRef = useTypingObserver(); const titleRef = useRef(); useEffect( () => { @@ -330,102 +346,152 @@ function EditorCanvas( { } : {}; + const forceFullHeight = postType === NAVIGATION_POST_TYPE; + const enableResizing = + [ + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + PATTERN_POST_TYPE, + ].includes( postType ) && + // Disable in previews / view mode. + ! isPreview && + // Disable resizing in mobile viewport. + ! isMobileViewport && + // Dsiable resizing in zoomed-out mode. + ! isZoomOutMode; + + const iframeStyles = useMemo( () => { + return [ + ...styles, + { + 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;' : '' + }}`, + }, + ]; + }, [ styles, enableResizing ] ); + return ( - - { themeSupportsLayout && - ! themeHasDisabledLayoutStyles && - renderingMode === 'post-only' && - ! isDesignPostType && ( - <> - - - { align && } - { postContentLayoutStyles && ( - - ) } - - ) } - { renderingMode === 'post-only' && ! isDesignPostType && ( -
+ - -
- ) } - - + + + { align && } + { postContentLayoutStyles && ( + + ) } + + ) } + { renderingMode === 'post-only' && ! isDesignPostType && ( +
+ +
) } - layout={ blockListLayout } - dropZoneElement={ - // When iframed, pass in the html element of the iframe to - // ensure the drop zone extends to the edges of the iframe. - disableIframe - ? localRef.current - : localRef.current?.parentNode - } - renderAppender={ renderAppender } - __unstableDisableDropZone={ - // In template preview mode, disable drop zones at the root of the template. - renderingMode === 'template-locked' ? true : false + + + { renderingMode === 'template-locked' && ( + + ) } + + { + // Avoid resize listeners when not needed, + // these will trigger unnecessary re-renders + // when animating the iframe width. + enableResizing && resizeObserver } - /> - { renderingMode === 'template-locked' && ( - - ) } - - { children } - + + +
); } diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss new file mode 100644 index 0000000000000..3e9d12cc19024 --- /dev/null +++ b/packages/editor/src/components/editor-canvas/style.scss @@ -0,0 +1,11 @@ +.editor-canvas { + height: 100%; + + &.is-resizable { + max-height: 100%; + } + + &.has-padding { + padding: $grid-unit-30 $grid-unit-30 0; + } +} diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/editor/src/components/resizable-editor/index.js similarity index 88% rename from packages/edit-site/src/components/block-editor/resizable-editor.js rename to packages/editor/src/components/resizable-editor/index.js index eda5848cff206..7d8e26049389a 100644 --- a/packages/edit-site/src/components/block-editor/resizable-editor.js +++ b/packages/editor/src/components/resizable-editor/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + /** * WordPress dependencies */ @@ -22,7 +27,7 @@ const HANDLE_STYLES_OVERRIDE = { left: undefined, }; -function ResizableEditor( { enableResizing, height, children } ) { +function ResizableEditor( { className, enableResizing, height, children } ) { const [ width, setWidth ] = useState( '100%' ); const resizableRef = useRef(); const resizeWidthBy = useCallback( ( deltaPixels ) => { @@ -32,6 +37,9 @@ function ResizableEditor( { enableResizing, height, children } ) { }, [] ); return ( { resizableRef.current = api?.resizable; } } diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js similarity index 87% rename from packages/edit-site/src/components/block-editor/resize-handle.js rename to packages/editor/src/components/resizable-editor/resize-handle.js index 04198b2140fd2..dbba31f6f998b 100644 --- a/packages/edit-site/src/components/block-editor/resize-handle.js +++ b/packages/editor/src/components/resizable-editor/resize-handle.js @@ -11,11 +11,7 @@ import { const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels. -export default function ResizeHandle( { - variation = 'default', - direction, - resizeWidthBy, -} ) { +export default function ResizeHandle( { direction, resizeWidthBy } ) { function handleKeyDown( event ) { const { keyCode } = event; @@ -45,7 +41,7 @@ export default function ResizeHandle( { <>