Framework: Bundle the BlockTools component within BlockCanvas

WordPress · Dec 12, 2023 · a229bd8 · a229bd8
1 parent 9a46ad1
commit a229bd8
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 64 deletions.
diff --git 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 ) }
 		>
-			<BlockTools>
-				<BlockCanvas height="400px" />
-			</BlockTools>
+			<BlockCanvas height="400px" />
 		</BlockEditorProvider>
 	);
 }

diff --git 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 (
-			<>
+			<BlockTools
+				__unstableContentRef={ localRef }
+				style={ { height, display: 'flex' } }
+			>
 				<EditorStyles
 					styles={ styles }
 					scope=".editor-styles-wrapper"
@@ -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>
 	);
 }
 

diff --git 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 ) && (
 					<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>

diff --git 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 (
-		<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>
 	);
 }
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
@@ -5,9 +5,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
-import { BlockTools, store as blockEditorStore } from '@wordpress/block-editor';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 
 /**
@@ -26,8 +25,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 )
@@ -66,18 +63,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
@@ -96,7 +86,7 @@ export default function SiteEditorCanvas() {
 								{ resizeObserver }
 							</EditorCanvas>
 						</ResizableEditor>
-					</BlockTools>
+					</div>
 				)
 			}
 		</EditorCanvasContainer.Slot>

diff --git 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
@@ -7,7 +7,6 @@ import {
 	BlockEditorProvider,
 	BlockCanvas,
 	BlockToolbar,
-	BlockTools,
 } from '@wordpress/block-editor';
 
 /**
@@ -38,7 +37,6 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockTools />
 				<BlockCanvas height="100%" styles={ editorStyles } />
 			</BlockEditorProvider>
 		</div>

diff --git 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() {
 				<div className="playground__sidebar">
 					<BlockInspector />
 				</div>
-				<BlockTools className="playground__content">
+				<div className="playground__content">
 					<BlockCanvas height="100%" styles={ editorStyles } />
-				</BlockTools>
+				</div>
 			</BlockEditorProvider>
 		</div>
 	);

diff --git 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"
 					/>
 					<BlockToolbar hideDragHandle />
-					<BlockTools />
 				</div>
 				<BlockCanvas height="100%" styles={ editorStyles } />
 			</BlockEditorProvider>

diff --git 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 }
 		>
 			<BlockInspector />
-			<BlockTools>
-				<BlockCanvas height="100%" shouldIframe={ false } />
-			</BlockTools>
+			<BlockCanvas height="100%" shouldIframe={ false } />
 		</BlockEditorProvider>
 	);
 }