From 91c8c27f0998c368325bc9aaef638c912fd99859 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Wed, 17 Feb 2021 23:56:45 -0800 Subject: [PATCH 1/3] Modify highlighted block state when hovering canvas block --- .../components/block-list/use-block-props/use-is-hovered.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 332c267aaac9b..98ca3ab1c7cd8 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 @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useEffect, useState } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -33,6 +33,8 @@ export function useIsHovered( ref ) { }; }, [] ); + const { toggleBlockHighlight } = useDispatch( blockEditorStore ); + function addHoverListener( eventType, value ) { function listener( event ) { if ( event.defaultPrevented ) { @@ -40,6 +42,7 @@ export function useIsHovered( ref ) { } event.preventDefault(); + toggleBlockHighlight( ref.current.dataset.block, true ); setHovered( value ); } From 4c6579bb7cd1142c758541b89a0012006027b481 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Wed, 17 Feb 2021 23:57:48 -0800 Subject: [PATCH 2/3] Implement isHighlighted state for list view blocks --- .../block-editor/src/components/block-navigation/block.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 5e07b3f4886f8..ad14b46ab0185 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -46,10 +46,11 @@ export default function BlockNavigationBlock( { const cellRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); const { clientId } = block; - const { isDragging, blockParents } = useSelect( + const { isDragging, isHighlighted, blockParents } = useSelect( ( select ) => { const { isBlockBeingDragged, + isBlockHighlighted, isAncestorBeingDragged, getBlockParents, } = select( blockEditorStore ); @@ -59,6 +60,7 @@ export default function BlockNavigationBlock( { isBlockBeingDragged( clientId ) || isAncestorBeingDragged( clientId ), blockParents: getBlockParents( clientId ), + isHighlighted: isBlockHighlighted( clientId ), }; }, [ clientId ] @@ -104,6 +106,7 @@ export default function BlockNavigationBlock( { className={ classnames( { 'is-selected': isSelected, 'is-dragging': isDragging, + 'is-highlighted': isHighlighted, } ) } onMouseEnter={ onMouseEnter } onMouseLeave={ onMouseLeave } From b0271966dc679027fb5b3796e40cfd4e7ebcc460 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Thu, 18 Feb 2021 00:03:42 -0800 Subject: [PATCH 3/3] Add list view block highlight styling --- .../block-editor/src/components/block-navigation/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 546dab181208e..602a64ffb0147 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -28,6 +28,11 @@ color: $white; } + // TODO: Replicate highlighted state from mocks (this is a temporary placeholder) + &.is-highlighted { + border: 1px solid var(--wp-admin-theme-color); + } + &.is-dragging { display: none; }