Skip to content

Commit

Permalink
Editor: Move the BlockCanvas component within the EditorCanvas compon…
Browse files Browse the repository at this point in the history 
…ent (#56850)
  • Loading branch information
@youknowriad
youknowriad authored Dec 7, 2023
1 parent f76dcf3 commit d295da8
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 69 deletions.
32 changes: 7 additions & 25 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,11 @@ import {
} from '@wordpress/editor';
import {
BlockTools,
__unstableUseTypewriter as useTypewriter,
__experimentalUseResizeCanvas as useResizeCanvas,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { useRef, useMemo } from '@wordpress/element';
import { __unstableMotion as motion } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useMergeRefs } from '@wordpress/compose';
import { store as blocksStore } from '@wordpress/blocks';

/**
Expand All @@ -28,9 +25,6 @@ import { store as blocksStore } from '@wordpress/blocks';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';

const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
blockEditorPrivateApis
);
const { EditorCanvas } = unlock( editorPrivateApis );

const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
Expand Down Expand Up @@ -104,7 +98,6 @@ export default function VisualEditor( { styles } ) {
}

const ref = useRef();
const contentRef = useMergeRefs( [ ref, useTypewriter() ] );

styles = useMemo(
() => [
Expand Down Expand Up @@ -146,25 +139,14 @@ export default function VisualEditor( { styles } ) {
initial={ desktopCanvasStyles }
className={ previewMode }
>
<BlockCanvas
shouldIframe={ isToBeIframed }
contentRef={ contentRef }
<EditorCanvas
ref={ ref }
disableIframe={ ! isToBeIframed }
styles={ styles }
height="100%"
>
<EditorCanvas
dropZoneElement={
// When iframed, pass in the html element of the iframe to
// ensure the drop zone extends to the edges of the iframe.
isToBeIframed
? ref.current?.parentNode
: ref.current
}
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
/>
</BlockCanvas>
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
/>
</motion.div>
</motion.div>
</BlockTools>
Expand Down
60 changes: 30 additions & 30 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import classnames from 'classnames';
*/
import {
__experimentalUseResizeCanvas as useResizeCanvas,
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { useState, useEffect } from '@wordpress/element';
import { useState, useEffect, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { privateApis as editorPrivateApis } from '@wordpress/editor';

Expand All @@ -27,9 +26,6 @@ import {
NAVIGATION_POST_TYPE,
} from '../../utils/constants';

const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
blockEditorPrivateApis
);
const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );

function EditorCanvas( {
Expand Down Expand Up @@ -101,9 +97,35 @@ function EditorCanvas( {
? false
: undefined;

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: `.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; ${
canvasMode === 'view'
? 'cursor: pointer; min-height: 100vh;'
: ''
}}}`,
},
],
[ settings.styles, enableResizing, canvasMode ]
);

return (
<BlockCanvas
height="100%"
<EditorCanvasRoot
ref={ contentRef }
className={ classnames( 'edit-site-editor-canvas__block-list', {
'is-navigation-block': isTemplateTypeNavigation,
} ) }
renderAppender={ showBlockAppender }
styles={ styles }
iframeProps={ {
expand: isZoomOutMode,
scale: isZoomOutMode ? 0.45 : undefined,
Expand All @@ -118,31 +140,9 @@ function EditorCanvas( {
...props,
...( canvasMode === 'view' ? viewModeProps : {} ),
} }
styles={ settings.styles }
contentRef={ contentRef }
>
<style>{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
`.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; ${
canvasMode === 'view'
? 'cursor: pointer; min-height: 100vh;'
: ''
}}}`
}</style>
<EditorCanvasRoot
dropZoneElement={ contentRef.current?.parentNode }
className={ classnames( 'edit-site-editor-canvas__block-list', {
'is-navigation-block': isTemplateTypeNavigation,
} ) }
renderAppender={ showBlockAppender }
/>
{ children }
</BlockCanvas>
</EditorCanvasRoot>
);
}

Expand Down
64 changes: 50 additions & 14 deletions packages/editor/src/components/editor-canvas/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,17 @@ import classnames from 'classnames';
import {
BlockList,
store as blockEditorStore,
__unstableUseTypewriter as useTypewriter,
__unstableUseTypingObserver as useTypingObserver,
useSettings,
__experimentalRecursionProvider as RecursionProvider,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { useEffect, useRef, useMemo } from '@wordpress/element';
import { useEffect, useRef, useMemo, forwardRef } 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';

/**
* Internal dependencies
Expand All @@ -26,9 +28,12 @@ import PostTitle from '../post-title';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';

const { LayoutStyle, useLayoutClasses, useLayoutStyles } = unlock(
blockEditorPrivateApis
);
const {
LayoutStyle,
useLayoutClasses,
useLayoutStyles,
ExperimentalBlockCanvas: BlockCanvas,
} = unlock( blockEditorPrivateApis );

/**
* Given an array of nested blocks, find the first Post Content
Expand Down Expand Up @@ -65,13 +70,19 @@ function checkForPostContentAtRootLevel( blocks ) {
return false;
}

export default function EditorCanvas( {
// Ideally as we unify post and site editors, we won't need these props.
autoFocus,
dropZoneElement,
className,
renderAppender,
} ) {
function EditorCanvas(
{
// Ideally as we unify post and site editors, we won't need these props.
autoFocus,
className,
renderAppender,
styles,
disableIframe = false,
iframeProps,
children,
},
ref
) {
const {
renderingMode,
postContentAttributes,
Expand Down Expand Up @@ -268,8 +279,24 @@ export default function EditorCanvas( {
.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;

const localRef = useRef();
const typewriterRef = useTypewriter();
const contentRef = useMergeRefs(
[
ref,
localRef,
renderingMode === 'post-only' ? typewriterRef : undefined,
].filter( ( r ) => !! r )
);

return (
<>
<BlockCanvas
shouldIframe={ ! disableIframe }
contentRef={ contentRef }
styles={ styles }
height="100%"
iframeProps={ iframeProps }
>
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
renderingMode === 'post-only' && (
Expand Down Expand Up @@ -325,10 +352,19 @@ export default function EditorCanvas( {
: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
) }
layout={ blockListLayout }
dropZoneElement={ dropZoneElement }
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 }
/>
</RecursionProvider>
</>
{ children }
</BlockCanvas>
);
}

export default forwardRef( EditorCanvas );

1 comment on commit d295da8

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in d295da8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7127552428
📝 Reported issues:

Please sign in to comment.