Block: remove outline related store selecting (#61139)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Apr 26, 2024 · 95f2714 · 95f2714
1 parent e8878c1
commit 95f2714
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -534,7 +534,6 @@ function BlockListBlockProvider( props ) {
 				hasSelectedInnerBlock,
 
 				getBlockIndex,
-				isTyping,
 				isBlockMultiSelected,
 				isBlockSubtreeDisabled,
 				isBlockHighlighted,
@@ -566,11 +565,8 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
-			const {
-				outlineMode,
-				supportsLayout,
-				__unstableIsPreviewMode: isPreviewMode,
-			} = getSettings();
+			const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } =
+				getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
 				isPreviewMode,
@@ -606,7 +602,6 @@ function BlockListBlockProvider( props ) {
 				clientId,
 				checkDeep
 			);
-			const typing = isTyping();
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
@@ -639,7 +634,6 @@ function BlockListBlockProvider( props ) {
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
-				isOutlineEnabled: outlineMode,
 				hasOverlay:
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
@@ -657,7 +651,6 @@ function BlockListBlockProvider( props ) {
 					! __unstableSelectionHasUnmergeableBlock(),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
-				removeOutline: _isSelected && outlineMode && typing,
 				isBlockMovingMode: !! movingClientId,
 				canInsertMovingBlock:
 					movingClientId &&
@@ -697,7 +690,6 @@ function BlockListBlockProvider( props ) {
 		blockApiVersion,
 		blockTitle,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		isHighlighted,
@@ -706,7 +698,6 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		templateLock,
@@ -743,7 +734,6 @@ function BlockListBlockProvider( props ) {
 		blockTitle,
 		isSelected,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
@@ -753,7 +743,6 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		templateLock,

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -270,7 +270,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
+.is-outline-mode .block-editor-block-list__block {
 	&.is-hovered {
 		cursor: default;
 

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -56,10 +56,11 @@ function Root( { className, ...settings } ) {
 			getSettings,
 			__unstableGetEditorMode,
 			getTemporarilyEditingAsBlocks,
+			isTyping,
 		} = unlock( select( blockEditorStore ) );
 		const { outlineMode, focusMode } = getSettings();
 		return {
-			isOutlineMode: outlineMode,
+			isOutlineMode: outlineMode && ! isTyping(),
 			isFocusMode: focusMode,
 			editorMode: __unstableGetEditorMode(),
 			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -86,7 +86,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		blockTitle,
 		isSelected,
 		isSubtreeDisabled,
-		isOutlineEnabled,
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
@@ -96,7 +95,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
@@ -116,7 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered( { isEnabled: isOutlineEnabled } ),
+		useIsHovered(),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
@@ -179,7 +177,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'remove-outline': removeOutline,
 				'is-block-moving-mode': isBlockMovingMode,
 				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
@@ -18,22 +18,17 @@ function listener( event ) {
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered( { isEnabled } ) {
-	return useRefEffect(
-		( node ) => {
-			if ( isEnabled ) {
-				node.addEventListener( 'mouseout', listener );
-				node.addEventListener( 'mouseover', listener );
+export function useIsHovered() {
+	return useRefEffect( ( node ) => {
+		node.addEventListener( 'mouseout', listener );
+		node.addEventListener( 'mouseover', listener );
 
-				return () => {
-					node.removeEventListener( 'mouseout', listener );
-					node.removeEventListener( 'mouseover', listener );
+		return () => {
+			node.removeEventListener( 'mouseout', listener );
+			node.removeEventListener( 'mouseover', listener );
 
-					// Remove class in case it lingers.
-					node.classList.remove( 'is-hovered' );
-				};
-			}
-		},
-		[ isEnabled ]
-	);
+			// Remove class in case it lingers.
+			node.classList.remove( 'is-hovered' );
+		};
+	}, [] );
 }