[WIP] Lighter block DOM: detached controls

WordPress · Nov 27, 2019 · 8e1d5c3 · 8e1d5c3
1 parent 336f183
commit 8e1d5c3
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 134 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -22,7 +22,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
-import { KeyboardShortcuts, withFilters } from '@wordpress/components';
+import { KeyboardShortcuts, withFilters, Popover } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	withDispatch,
@@ -113,9 +113,6 @@ function BlockListBlock( {
 		blockRef( wrapper.current, clientId );
 	}, [] );
 
-	// Reference to the block edit node
-	const blockNodeRef = useRef();
-
 	const breadcrumb = useRef();
 
 	// Keep track of touchstart to disable hover on iOS
@@ -222,10 +219,10 @@ function BlockListBlock( {
 
 		// Find all tabbables within node.
 		const textInputs = focus.tabbable
-			.find( blockNodeRef.current )
+			.find( wrapper.current )
 			.filter( isTextField )
 			// Exclude inner blocks
-			.filter( ( node ) => ! ignoreInnerBlocks || isInsideRootBlock( blockNodeRef.current, node ) );
+			.filter( ( node ) => ! ignoreInnerBlocks || isInsideRootBlock( wrapper.current, node ) );
 
 		// If reversed (e.g. merge via backspace), use the last in the set of
 		// tabbables.
@@ -353,7 +350,7 @@ function BlockListBlock( {
 
 		// Avoid triggering multi-selection if we click toolbars/inspectors
 		// and all elements that are outside the Block Edit DOM tree.
-		} else if ( blockNodeRef.current.contains( event.target ) ) {
+		} else if ( wrapper.current.contains( event.target ) ) {
 			onSelectionStart( clientId );
 
 			// Allow user to escape out of a multi-selection to a singular
@@ -495,8 +492,11 @@ function BlockListBlock( {
 			onMouseOver={ maybeHover }
 			onMouseOverHandled={ hideHoverEffects }
 			onMouseLeave={ hideHoverEffects }
+			onMouseDown={ onPointerDown }
+			onDragStart={ preventDrag }
 			className={ wrapperClassName }
 			data-type={ name }
+			data-block={ clientId }
 			onTouchStart={ onTouchStart }
 			onFocus={ onFocus }
 			onClick={ onTouchStop }
@@ -531,69 +531,74 @@ function BlockListBlock( {
 					moverDirection={ moverDirection }
 				/>
 			) }
-			<div
-				className={ classnames(
-					'editor-block-list__block-edit block-editor-block-list__block-edit',
-					{ 'has-mover-inside': moverDirection === 'horizontal' },
-				) }
-			>
-				{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
-				{ shouldShowBreadcrumb && (
-					<BlockBreadcrumb
-						clientId={ clientId }
-						ref={ breadcrumb }
-					/>
-				) }
-				{ ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
+			{ shouldRenderMovers && (
+				<Popover
+					noArrow
+					position="middle left"
+					anchorHorizontalBuffer={ 24 }
+					focusOnMount={ false }
+					anchorRef={ wrapper.current }
+					className="block-editor-block-list__block__popover"
+				>
+					{ blockMover }
+				</Popover>
+			) }
+			{ shouldShowBreadcrumb && (
+				<BlockBreadcrumb
+					clientId={ clientId }
+					ref={ breadcrumb }
+				/>
+			) }
+			{ ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
+				<Popover
+					noArrow
+					position="top left"
+					focusOnMount={ false }
+					anchorRef={ wrapper.current }
+					anchorVerticalBuffer={ 14 }
+					className="block-editor-block-list__block__popover"
+				>
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
 						focusOnMount={ isForcingContextualToolbar.current }
 					/>
+				</Popover>
+			) }
+			{
+				! isNavigationMode &&
+				! shouldShowContextualToolbar &&
+				isSelected &&
+				! hasFixedToolbar &&
+				! isEmptyDefaultBlock && (
+					<KeyboardShortcuts
+						bindGlobal
+						eventName="keydown"
+						shortcuts={ {
+							'alt+f10': forceFocusedContextualToolbar,
+						} }
+					/>
+				)
+			}
+			<BlockCrashBoundary onError={ onBlockError }>
+				{ isValid && blockEdit }
+				{ isValid && mode === 'html' && (
+					<BlockHtml clientId={ clientId } />
 				) }
-				{
-					! isNavigationMode &&
-					! shouldShowContextualToolbar &&
-					isSelected &&
-					! hasFixedToolbar &&
-					! isEmptyDefaultBlock && (
-						<KeyboardShortcuts
-							bindGlobal
-							eventName="keydown"
-							shortcuts={ {
-								'alt+f10': forceFocusedContextualToolbar,
-							} }
-						/>
-					)
-				}
-				<IgnoreNestedEvents
-					ref={ blockNodeRef }
-					onDragStart={ preventDrag }
-					onMouseDown={ onPointerDown }
-					data-block={ clientId }
-				>
-					<BlockCrashBoundary onError={ onBlockError }>
-						{ isValid && blockEdit }
-						{ isValid && mode === 'html' && (
-							<BlockHtml clientId={ clientId } />
-						) }
-						{ shouldRenderMovers && ( moverDirection === 'horizontal' ) && blockMover }
-						{ ! isValid && [
-							<BlockInvalidWarning
-								key="invalid-warning"
-								clientId={ clientId }
-							/>,
-							<div key="invalid-preview">
-								{ getSaveElement( blockType, attributes ) }
-							</div>,
-						] }
-					</BlockCrashBoundary>
-					{ !! hasError && <BlockCrashWarning /> }
-					{ shouldShowMobileToolbar && (
-						<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
-					) }
-				</IgnoreNestedEvents>
-			</div>
+				{ ! isValid && [
+					<BlockInvalidWarning
+						key="invalid-warning"
+						clientId={ clientId }
+					/>,
+					<div key="invalid-preview">
+						{ getSaveElement( blockType, attributes ) }
+					</div>,
+				] }
+			</BlockCrashBoundary>
+			{ !! hasError && <BlockCrashWarning /> }
+			{ shouldShowMobileToolbar && (
+				<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
+			) }
 			{ showInserterShortcuts && (
 				<div className="editor-block-list__side-inserter block-editor-block-list__side-inserter">
 					<InserterWithShortcuts