move remove-outline to use-block-class-names

WordPress · Jun 10, 2021 · 71d7488 · 71d7488
1 parent a005470
commit 71d7488
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -15,12 +15,7 @@ import {
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import {
-	withDispatch,
-	withSelect,
-	useDispatch,
-	useSelect,
-} from '@wordpress/data';
+import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
 import { compose, pure, ifCondition } from '@wordpress/compose';
 
 /**
@@ -88,15 +83,6 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
-	const removeBlockOutline = useSelect(
-		( select ) => {
-			const { isTyping, getSettings } = select( blockEditorStore );
-			const isOutlineMode = getSettings().outlineMode;
-			return isOutlineMode && isSelected && isTyping();
-		},
-		[ clientId, isSelected ]
-	);
-
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
 	// (InspectorControls, etc.) which are inside `BlockEdit` but not
@@ -173,9 +159,7 @@ function BlockListBlock( {
 
 	const value = {
 		clientId,
-		className: removeBlockOutline
-			? classnames( className, 'remove-outline' )
-			: className,
+		className,
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 		isAligned,
 	};

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
@@ -32,10 +32,12 @@ export function useBlockClassNames( clientId ) {
 				getBlockName,
 				getSettings,
 				hasSelectedInnerBlock,
+				isTyping,
 				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
 			const {
 				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
+				outlineMode,
 			} = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
@@ -59,6 +61,7 @@ export function useBlockClassNames( clientId ) {
 				'has-active-entity': activeEntityBlockId,
 				// Determine if there is an active entity area to spotlight.
 				'is-active-entity': activeEntityBlockId === clientId,
+				'remove-outline': isSelected && outlineMode && isTyping(),
 			} );
 		},
 		[ clientId ]