Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Framework: Bundle the BlockTools component within BlockCanvas #56996

Merged
merged 2 commits into from
Dec 13, 2023
Merged

Framework: Bundle the BlockTools component within BlockCanvas #56996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a229bd8
Framework: Bundle the BlockTools component within BlockCanvas
youknowriad Dec 12, 2023
b446ac2
more simplification
youknowriad Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { useState } from 'react';
import {
BlockEditorProvider,
BlockList,
BlockTools,
WritingFlow,
} from '@wordpress/block-editor';

Expand All @@ -32,9 +31,7 @@ function MyEditorComponent() {
onInput={ ( blocks ) => updateBlocks( blocks ) }
onChange={ ( blocks ) => updateBlocks( blocks ) }
>
<BlockTools>
<BlockCanvas height="400px" />
</BlockTools>
<BlockCanvas height="400px" />
</BlockEditorProvider>
);
}
Expand Down
48 changes: 31 additions & 17 deletions packages/block-editor/src/components/block-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
* WordPress dependencies
*/
import { useMergeRefs } from '@wordpress/compose';
import { useRef } from '@wordpress/element';

/**
* Internal dependencies
*/
import BlockList from '../block-list';
import BlockTools from '../block-tools';
import EditorStyles from '../editor-styles';
import Iframe from '../iframe';
import WritingFlow from '../writing-flow';
Expand All @@ -23,11 +25,15 @@ export function ExperimentalBlockCanvas( {
} ) {
const resetTypingRef = useMouseMoveTypingReset();
const clearerRef = useBlockSelectionClearer();
const contentRef = useMergeRefs( [ contentRefProp, clearerRef ] );
const localRef = useRef();
const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );

if ( ! shouldIframe ) {
return (
<>
<BlockTools
__unstableContentRef={ localRef }
style={ { height, display: 'flex' } }
>
<EditorStyles
styles={ styles }
scope=".editor-styles-wrapper"
Expand All @@ -36,29 +42,37 @@ export function ExperimentalBlockCanvas( {
ref={ contentRef }
className="editor-styles-wrapper"
tabIndex={ -1 }
style={ { height } }
style={ {
height: '100%',
width: '100%',
} }
>
{ children }
</WritingFlow>
</>
</BlockTools>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Only downside here is that we'll have two divs (BlockTools div and WritingFlow div), we could potentially merge the two later.

Copy link
Member

Choose a reason for hiding this comment

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

For non iframe, maybe, but I don't think it's that important. For iframe writing flow already does not produce a div.

);
}

return (
<Iframe
{ ...iframeProps }
ref={ resetTypingRef }
contentRef={ contentRef }
style={ {
width: '100%',
height,
...iframeProps?.style,
} }
name="editor-canvas"
<BlockTools
__unstableContentRef={ localRef }
style={ { height, display: 'flex' } }
Copy link
Member

Choose a reason for hiding this comment

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

Why did you decide to add flex here? This is strange

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can't really tell at this point 😬

>
<EditorStyles styles={ styles } />
{ children }
</Iframe>
<Iframe
{ ...iframeProps }
ref={ resetTypingRef }
contentRef={ contentRef }
style={ {
width: '100%',
height: '100%',
...iframeProps?.style,
} }
name="editor-canvas"
>
<EditorStyles styles={ styles } />
{ children }
</Iframe>
</BlockTools>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The BlockTools div could be optional maybe, its behavior could be automatically added to the Iframe wrapper or something.

);
}

Expand Down
17 changes: 7 additions & 10 deletions packages/customize-widgets/src/components/sidebar-block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { useMemo, createPortal } from '@wordpress/element';
import {
BlockList,
BlockToolbar,
BlockTools,
BlockInspector,
privateApis as blockEditorPrivateApis,
__unstableBlockSettingsMenuFirstItem,
Expand Down Expand Up @@ -120,15 +119,13 @@ export default function SidebarBlockEditor( {
{ ( isFixedToolbarActive || ! isMediumViewport ) && (
<BlockToolbar hideDragHandle />
) }
<BlockTools>
<BlockCanvas
shouldIframe={ false }
styles={ settings.defaultEditorStyles }
height="100%"
>
<BlockList renderAppender={ BlockAppender } />
</BlockCanvas>
</BlockTools>
<BlockCanvas
shouldIframe={ false }
styles={ settings.defaultEditorStyles }
height="100%"
>
<BlockList renderAppender={ BlockAppender } />
</BlockCanvas>

{ createPortal(
// This is a temporary hack to prevent button component inside <BlockInspector>
Expand Down
11 changes: 3 additions & 8 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { BlockTools } from '@wordpress/block-editor';
import { useRef, useMemo } from '@wordpress/element';
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as blocksStore } from '@wordpress/blocks';

Expand Down Expand Up @@ -59,8 +58,6 @@ export default function VisualEditor( { styles } ) {
paddingBottom = '40vh';
}

const ref = useRef();

styles = useMemo(
() => [
...styles,
Expand All @@ -80,21 +77,19 @@ export default function VisualEditor( { styles } ) {
renderingMode === 'template-only';

return (
<BlockTools
__unstableContentRef={ ref }
<div
className={ classnames( 'edit-post-visual-editor', {
'is-template-mode': renderingMode === 'template-only',
'has-inline-canvas': ! isToBeIframed,
} ) }
>
<EditorCanvas
ref={ ref }
disableIframe={ ! isToBeIframed }
styles={ styles }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
/>
</BlockTools>
</div>
);
}
9 changes: 1 addition & 8 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,7 @@ import {

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

function EditorCanvas( {
enableResizing,
settings,
children,
contentRef,
...props
} ) {
function EditorCanvas( { enableResizing, settings, children, ...props } ) {
const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
useSelect( ( select ) => {
const { getBlockCount, __unstableGetEditorMode } =
Expand Down Expand Up @@ -107,7 +101,6 @@ function EditorCanvas( {

return (
<EditorCanvasRoot
ref={ contentRef }
className={ classnames( 'edit-site-editor-canvas__block-list', {
'is-navigation-block': isTemplateTypeNavigation,
} ) }
Expand Down
19 changes: 3 additions & 16 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { BlockTools, store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useViewportMatch, useResizeObserver } from '@wordpress/compose';

/**
Expand All @@ -26,8 +24,6 @@ import {
import { unlock } from '../../lock-unlock';

export default function SiteEditorCanvas() {
const { clearSelectedBlock } = useDispatch( blockEditorStore );

const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => {
const { getEditedPostType, getCanvasMode } = unlock(
select( editSiteStore )
Expand All @@ -53,7 +49,6 @@ export default function SiteEditorCanvas() {
// Disable resizing in mobile viewport.
! isMobileViewport;

const contentRef = useRef();
const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
const forceFullHeight = isNavigationFocusMode;
Expand All @@ -66,18 +61,11 @@ export default function SiteEditorCanvas() {
{ editorCanvasView }
</div>
) : (
<BlockTools
<div
className={ classnames( 'edit-site-visual-editor', {
'is-focus-mode': isFocusMode || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
__unstableContentRef={ contentRef }
onClick={ ( event ) => {
// Clear selected block when clicking on the gray background.
if ( event.target === event.currentTarget ) {
clearSelectedBlock();
}
} }
>
<BackButton />
<ResizableEditor
Expand All @@ -91,12 +79,11 @@ export default function SiteEditorCanvas() {
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
contentRef={ contentRef }
>
{ resizeObserver }
</EditorCanvas>
</ResizableEditor>
</BlockTools>
</div>
)
}
</EditorCanvasContainer.Slot>
Expand Down
28 changes: 12 additions & 16 deletions packages/editor/src/components/editor-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
privateApis as blockEditorPrivateApis,
__experimentalUseResizeCanvas as useResizeCanvas,
} from '@wordpress/block-editor';
import { useEffect, useRef, useMemo, forwardRef } from '@wordpress/element';
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';
Expand Down Expand Up @@ -72,19 +72,16 @@ function checkForPostContentAtRootLevel( blocks ) {
return false;
}

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
) {
function EditorCanvas( {
// Ideally as we unify post and site editors, we won't need these props.
autoFocus,
className,
renderAppender,
styles,
disableIframe = false,
iframeProps,
children,
} ) {
const {
renderingMode,
postContentAttributes,
Expand Down Expand Up @@ -288,7 +285,6 @@ function EditorCanvas(
const typewriterRef = useTypewriter();
const contentRef = useMergeRefs(
[
ref,
localRef,
renderingMode === 'post-only' ? typewriterRef : undefined,
].filter( ( r ) => !! r )
Expand Down Expand Up @@ -379,4 +375,4 @@ function EditorCanvas(
);
}

export default forwardRef( EditorCanvas );
export default EditorCanvas;
2 changes: 1 addition & 1 deletion platform-docs/docs/basic-concepts/ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The Gutenberg platform allows you to render these pieces separately and lay them

## The Block Toolbar

Wrapping your `BlockCanvas` component within the `BlockTools` wrapper allows the editor to render a block toolbar adjacent to the selected block.
The block toolbar is rendered automatically next to the selected block by default. But if you set the flag `hasFixedToolbar` to true in your `BlockEditorProvider` settings, you will be able to use the `BlockToolbar` component to render the block toolbar in your place of choice.

## The Block Inspector

Expand Down
2 changes: 0 additions & 2 deletions storybook/stories/playground/box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
BlockEditorProvider,
BlockCanvas,
BlockToolbar,
BlockTools,
} from '@wordpress/block-editor';

/**
Expand Down Expand Up @@ -38,7 +37,6 @@ export default function EditorBox() {
} }
>
<BlockToolbar hideDragHandle />
<BlockTools />
<BlockCanvas height="100%" styles={ editorStyles } />
</BlockEditorProvider>
</div>
Expand Down
5 changes: 2 additions & 3 deletions storybook/stories/playground/fullpage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useEffect, useState } from '@wordpress/element';
import {
BlockCanvas,
BlockEditorProvider,
BlockTools,
BlockInspector,
} from '@wordpress/block-editor';
import { registerCoreBlocks } from '@wordpress/block-library';
Expand Down Expand Up @@ -46,9 +45,9 @@ export default function EditorFullPage() {
<div className="playground__sidebar">
<BlockInspector />
</div>
<BlockTools className="playground__content">
<div className="playground__content">
<BlockCanvas height="100%" styles={ editorStyles } />
</BlockTools>
</div>
</BlockEditorProvider>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions storybook/stories/playground/with-undo-redo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
BlockEditorProvider,
BlockCanvas,
BlockToolbar,
BlockTools,
} from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
Expand Down Expand Up @@ -60,7 +59,6 @@ export default function EditorWithUndoRedo() {
label="Redo"
/>
<BlockToolbar hideDragHandle />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I noticed that hideDragHandle is always passed to this component. It's only left as false in the case of the "popover toolbar" which is rendered by the framework, this means that we should probably change the default value of this prop to "true".

Copy link
Contributor

Choose a reason for hiding this comment

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

Agreed.

<BlockTools />
</div>
<BlockCanvas height="100%" styles={ editorStyles } />
</BlockEditorProvider>
Expand Down
5 changes: 1 addition & 4 deletions test/integration/helpers/integration-test-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import userEvent from '@testing-library/user-event';
import { useState, useEffect } from '@wordpress/element';
import {
BlockEditorProvider,
BlockTools,
BlockInspector,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -76,9 +75,7 @@ export function Editor( { testBlocks, settings = {} } ) {
settings={ settings }
>
<BlockInspector />
<BlockTools>
<BlockCanvas height="100%" shouldIframe={ false } />
</BlockTools>
<BlockCanvas height="100%" shouldIframe={ false } />
</BlockEditorProvider>
);
}
Expand Down
Loading