Skip to content

Commit

Permalink
Framework: Bundle the BlockTools component within BlockCanvas (#56996)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Dec 13, 2023
1 parent 4fb8952 commit 77a8b55
Show file tree
Hide file tree
Showing 12 changed files with 62 additions and 91 deletions.
5 changes: 1 addition & 4 deletions packages/block-editor/README.md
View file
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
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>
);
}

return (
<Iframe
{ ...iframeProps }
ref={ resetTypingRef }
contentRef={ contentRef }
style={ {
width: '100%',
height,
...iframeProps?.style,
} }
name="editor-canvas"
<BlockTools
__unstableContentRef={ localRef }
style={ { height, display: 'flex' } }
>
<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>
);
}

Expand Down
17 changes: 7 additions & 10 deletions packages/customize-widgets/src/components/sidebar-block-editor/index.js
View file
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
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
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
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
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 @@ -382,4 +378,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
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
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
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
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 />
<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
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

1 comment on commit 77a8b55

@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 77a8b55.
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/7193071840
📝 Reported issues:

Please sign in to comment.