From 8da3a6a0f90a0e8acb1ab332fdd705709d37642b Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 23 Mar 2021 15:19:25 -0400 Subject: [PATCH 1/5] clickthrough for template part --- .../components/block-list/insertion-point.js | 6 ++- packages/block-editor/src/store/actions.js | 12 ++++++ packages/block-editor/src/store/reducer.js | 11 ++++++ packages/block-editor/src/store/selectors.js | 4 ++ .../src/template-part/edit/index.js | 12 +++++- .../src/template-part/edit/inner-blocks.js | 38 ++++++++++++++++--- .../src/template-part/editor.scss | 10 +++++ 7 files changed, 85 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index d759d568efd3e..d71e80373c765 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -262,6 +262,7 @@ export default function useInsertionPoint( ref ) { selectedClientId, selectedRootClientId, getBlockListSettings, + isInsertionPointDisabled, } = useSelect( ( select ) => { const { isMultiSelecting: _isMultiSelecting, @@ -269,6 +270,7 @@ export default function useInsertionPoint( ref ) { getBlockInsertionPoint, getBlockOrder, getBlockListSettings: _getBlockListSettings, + __experimentalIsInsertionPointDisabled, } = select( blockEditorStore ); const insertionPoint = getBlockInsertionPoint(); @@ -280,6 +282,7 @@ export default function useInsertionPoint( ref ) { isInserterVisible: isBlockInsertionPointVisible(), selectedClientId: order[ insertionPoint.index - 1 ], selectedRootClientId: insertionPoint.rootClientId, + isInsertionPointDisabled: __experimentalIsInsertionPointDisabled(), }; }, [] ); @@ -388,7 +391,8 @@ export default function useInsertionPoint( ref ) { return ( ! isMultiSelecting && - isVisible && ( + isVisible && + ! isInsertionPointDisabled && ( { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); - const { getBlocks } = select( blockEditorStore ); + const { + getBlocks, + isBlockSelected, + hasSelectedInnerBlock, + } = select( blockEditorStore ); const getEntityArgs = [ 'postType', @@ -69,6 +73,9 @@ export default function TemplatePartEdit( { isResolved: hasResolvedEntity, isMissing: hasResolvedEntity && ! entityRecord, area: entityRecord?.area, + isSelected: + isBlockSelected( clientId ) || + hasSelectedInnerBlock( clientId, true ), }; }, [ templatePartId, clientId ] @@ -157,6 +164,7 @@ export default function TemplatePartEdit( { ) } { isEntityAvailable && ( { - const { getSettings } = select( blockEditorStore ); - return getSettings()?.supportsLayout; + const { themeSupportsLayout } = useSelect( ( select ) => { + const { getSettings, getBlockInsertionPoint } = select( + blockEditorStore + ); + return { + themeSupportsLayout: getSettings()?.supportsLayout, + insertionPoint: getBlockInsertionPoint(), + }; }, [] ); const defaultLayout = useEditorFeature( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; @@ -46,5 +53,26 @@ export default function TemplatePartInnerBlocks( { alignments: themeSupportsLayout ? alignments : undefined, }, } ); - return ; + + const [ isHovered, setIsHovered ] = useState( false ); + const { disableInsertionPoint, enableInsertionPoint } = useDispatch( + blockEditorStore + ); + + useEffect( () => { + if ( isHovered && ! isSelected ) { + disableInsertionPoint(); + } else { + enableInsertionPoint(); + } + }, [ isSelected, isHovered ] ); + + return ( +
setIsHovered( true ) } + onMouseLeave={ () => setIsHovered( false ) } + > + +
+ ); } diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index c61e0651ae725..a34b5ed9bab4a 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -76,4 +76,14 @@ } } } + + &:not(.has-child-selected):not(.is-selected):not(.is-placeholder) { + * { + pointer-events: none; + } + &:hover { + background-color: $alert-green; + cursor: pointer; + } + } } From 6cbfb213fb167368f70908540cac6b66a7a3657d Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 23 Mar 2021 17:04:32 -0400 Subject: [PATCH 2/5] make store names more consistent and accurate --- .../src/components/block-list/insertion-point.js | 8 ++++---- packages/block-editor/src/store/actions.js | 8 ++++---- packages/block-editor/src/store/reducer.js | 8 ++++---- packages/block-editor/src/store/selectors.js | 4 ++-- .../src/template-part/edit/inner-blocks.js | 11 ++++++----- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index d71e80373c765..fb1f1f340b1fd 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -262,7 +262,7 @@ export default function useInsertionPoint( ref ) { selectedClientId, selectedRootClientId, getBlockListSettings, - isInsertionPointDisabled, + isPopoverHidden, } = useSelect( ( select ) => { const { isMultiSelecting: _isMultiSelecting, @@ -270,7 +270,7 @@ export default function useInsertionPoint( ref ) { getBlockInsertionPoint, getBlockOrder, getBlockListSettings: _getBlockListSettings, - __experimentalIsInsertionPointDisabled, + isInsertionPointPopoverHidden, } = select( blockEditorStore ); const insertionPoint = getBlockInsertionPoint(); @@ -282,7 +282,7 @@ export default function useInsertionPoint( ref ) { isInserterVisible: isBlockInsertionPointVisible(), selectedClientId: order[ insertionPoint.index - 1 ], selectedRootClientId: insertionPoint.rootClientId, - isInsertionPointDisabled: __experimentalIsInsertionPointDisabled(), + isPopoverHidden: isInsertionPointPopoverHidden(), }; }, [] ); @@ -392,7 +392,7 @@ export default function useInsertionPoint( ref ) { return ( ! isMultiSelecting && isVisible && - ! isInsertionPointDisabled && ( + ! isPopoverHidden && ( { if ( isHovered && ! isSelected ) { - disableInsertionPoint(); + hideInsertionPointPopover(); } else { - enableInsertionPoint(); + showInsertionPointPopover(); } }, [ isSelected, isHovered ] ); From 89f6cb82ffa8f9a2275f9d789cd77fd637da0ec4 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 23 Mar 2021 17:07:43 -0400 Subject: [PATCH 3/5] remove unnecessary selector change --- .../src/template-part/edit/inner-blocks.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index 4b905379bd9de..272f5e33a0cc8 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -19,14 +19,9 @@ export default function TemplatePartInnerBlocks( { blockProps, isSelected, } ) { - const { themeSupportsLayout } = useSelect( ( select ) => { - const { getSettings, getBlockInsertionPoint } = select( - blockEditorStore - ); - return { - themeSupportsLayout: getSettings()?.supportsLayout, - insertionPoint: getBlockInsertionPoint(), - }; + const themeSupportsLayout = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return getSettings()?.supportsLayout; }, [] ); const defaultLayout = useEditorFeature( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; From 9b685c0e20eebea883d4eda2de777ac787b81069 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 24 Mar 2021 11:27:27 -0400 Subject: [PATCH 4/5] move color from hover to selected, add opacity value --- packages/block-library/src/template-part/editor.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index a34b5ed9bab4a..09b436578f1c8 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -82,8 +82,11 @@ pointer-events: none; } &:hover { - background-color: $alert-green; cursor: pointer; } } + + &.is-selected:not(.is-placeholder) { + background: rgba($alert-green, 0.1); + } } From 51b0a9fdb61209a72eed62351fe26153725100c5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 8 Apr 2021 09:50:22 +0100 Subject: [PATCH 5/5] Add hover overlay --- packages/block-library/src/template-part/editor.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 09b436578f1c8..62492385df7be 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -80,13 +80,15 @@ &:not(.has-child-selected):not(.is-selected):not(.is-placeholder) { * { pointer-events: none; - } - &:hover { - cursor: pointer; + user-select: none; // Stops text being inadvertently highlighted when selecting a template part } } &.is-selected:not(.is-placeholder) { - background: rgba($alert-green, 0.1); + background: rgba(#007cba, 0.1); // todo: use var + } + + &.is-hovered:not(.is-selected) { + background: rgba($gray-900, 0.05); } }