diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 290d2f0541482..1a1b77f7cd514 100644 --- 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 index 3971df611c277..6e65b38310b67 100644 --- 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 index 1faffef6ba394..ea9208b562c3a 100644 --- 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 index b91b9d32f52ac..ebd36bbc2e970 100644 --- 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 index 08c42eb1fdb08..518ed583933ac 100644 --- 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' ); + }; + }, [] ); }