diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 56ab5f1bd94d93..6c39b5dcc44b46 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -19,7 +19,6 @@ import { useState } from 'react';
import {
BlockEditorProvider,
BlockList,
- BlockTools,
WritingFlow,
} from '@wordpress/block-editor';
@@ -32,9 +31,7 @@ function MyEditorComponent() {
onInput={ ( blocks ) => updateBlocks( blocks ) }
onChange={ ( blocks ) => updateBlocks( blocks ) }
>
-
-
-
+
);
}
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 97aec461df7d86..7d64897690721c 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -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';
@@ -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 (
- <>
+
{ children }
-
+
);
}
return (
-
+
+
);
}
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index c2e10bca16ec0b..80deb12dfcf74d 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -8,7 +8,6 @@ import { useMemo, createPortal } from '@wordpress/element';
import {
BlockList,
BlockToolbar,
- BlockTools,
BlockInspector,
privateApis as blockEditorPrivateApis,
__unstableBlockSettingsMenuFirstItem,
@@ -120,15 +119,13 @@ export default function SidebarBlockEditor( {
{ ( isFixedToolbarActive || ! isMediumViewport ) && (
) }
-
-
-
-
-
+
+
+
{ createPortal(
// This is a temporary hack to prevent button component inside
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index b929e03bc453a4..fd9b4a6ff8bb6c 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -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';
@@ -59,8 +58,6 @@ export default function VisualEditor( { styles } ) {
paddingBottom = '40vh';
}
- const ref = useRef();
-
styles = useMemo(
() => [
...styles,
@@ -80,21 +77,19 @@ export default function VisualEditor( { styles } ) {
renderingMode === 'template-only';
return (
-
-
+
);
}
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 d7dbf6fb07a7ab..01bc4cdfa2ddfc 100644
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -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 } =
@@ -107,7 +101,6 @@ function EditorCanvas( {
return (
{
const { getEditedPostType, getCanvasMode } = unlock(
select( editSiteStore )
@@ -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;
@@ -66,18 +61,11 @@ export default function SiteEditorCanvas() {
{ editorCanvasView }
) : (
- {
- // Clear selected block when clicking on the gray background.
- if ( event.target === event.currentTarget ) {
- clearSelectedBlock();
- }
- } }
>
{ resizeObserver }
-
+
)
}
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
index 1f74dfd262ff54..cd87db0d4bf5e3 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/editor-canvas/index.js
@@ -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';
@@ -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,
@@ -288,7 +285,6 @@ function EditorCanvas(
const typewriterRef = useTypewriter();
const contentRef = useMergeRefs(
[
- ref,
localRef,
renderingMode === 'post-only' ? typewriterRef : undefined,
].filter( ( r ) => !! r )
@@ -382,4 +378,4 @@ function EditorCanvas(
);
}
-export default forwardRef( EditorCanvas );
+export default EditorCanvas;
diff --git a/platform-docs/docs/basic-concepts/ui.md b/platform-docs/docs/basic-concepts/ui.md
index 8b6e706683d085..0dccef3c239b03 100644
--- a/platform-docs/docs/basic-concepts/ui.md
+++ b/platform-docs/docs/basic-concepts/ui.md
@@ -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
diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js
index 4cb7047b73ec20..3fb3c3b5862c47 100644
--- a/storybook/stories/playground/box/index.js
+++ b/storybook/stories/playground/box/index.js
@@ -7,7 +7,6 @@ import {
BlockEditorProvider,
BlockCanvas,
BlockToolbar,
- BlockTools,
} from '@wordpress/block-editor';
/**
@@ -38,7 +37,6 @@ export default function EditorBox() {
} }
>
-
diff --git a/storybook/stories/playground/fullpage/index.js b/storybook/stories/playground/fullpage/index.js
index 961c15f71f31d0..8b8c037ceb72a3 100644
--- a/storybook/stories/playground/fullpage/index.js
+++ b/storybook/stories/playground/fullpage/index.js
@@ -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';
@@ -46,9 +45,9 @@ export default function EditorFullPage() {
-
+
-
+
);
diff --git a/storybook/stories/playground/with-undo-redo/index.js b/storybook/stories/playground/with-undo-redo/index.js
index 537ea16aade99b..8bef2d184f8c59 100644
--- a/storybook/stories/playground/with-undo-redo/index.js
+++ b/storybook/stories/playground/with-undo-redo/index.js
@@ -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';
@@ -60,7 +59,6 @@ export default function EditorWithUndoRedo() {
label="Redo"
/>
-
diff --git a/test/integration/helpers/integration-test-editor.js b/test/integration/helpers/integration-test-editor.js
index dc83c1bfbe6bd2..1317dec7b9226d 100644
--- a/test/integration/helpers/integration-test-editor.js
+++ b/test/integration/helpers/integration-test-editor.js
@@ -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';
@@ -76,9 +75,7 @@ export function Editor( { testBlocks, settings = {} } ) {
settings={ settings }
>
-
-
-
+
);
}