From a229bd88788264111a26adbf4fc92f776e0dc533 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 13 Dec 2023 00:01:39 +0100 Subject: [PATCH 1/2] Framework: Bundle the BlockTools component within BlockCanvas --- packages/block-editor/README.md | 5 +- .../src/components/block-canvas/index.js | 48 ++++++++++++------- .../components/sidebar-block-editor/index.js | 17 +++---- .../src/components/visual-editor/index.js | 11 ++--- .../block-editor/site-editor-canvas.js | 16 ++----- platform-docs/docs/basic-concepts/ui.md | 2 +- storybook/stories/playground/box/index.js | 2 - .../stories/playground/fullpage/index.js | 5 +- .../playground/with-undo-redo/index.js | 2 - .../helpers/integration-test-editor.js | 5 +- 10 files changed, 49 insertions(+), 64 deletions(-) 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/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js index 944dbab3f96f08..fdb8801a3b7c5d 100644 --- 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 } ) : ( - { - // Clear selected block when clicking on the gray background. - if ( event.target === event.currentTarget ) { - clearSelectedBlock(); - } - } } > - + ) } 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 } > - - - + ); } From b446ac241cd58ada68acb69dcb80da532dd28b9f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 13 Dec 2023 00:21:26 +0100 Subject: [PATCH 2/2] more simplification --- .../components/block-editor/editor-canvas.js | 9 +----- .../block-editor/site-editor-canvas.js | 3 -- .../src/components/editor-canvas/index.js | 28 ++++++++----------- 3 files changed, 13 insertions(+), 27 deletions(-) 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 ( { resizeObserver } diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 921f3ce23c0ee4..ff51774ed25613 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 ) @@ -379,4 +375,4 @@ function EditorCanvas( ); } -export default forwardRef( EditorCanvas ); +export default EditorCanvas;