From b670f4b728b394e642b575ac726f15d0d0d37fb0 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Wed, 26 Aug 2020 16:36:44 -0700 Subject: [PATCH 1/4] Hide trailing inserter if siblings in the block list are not selected Blocks, like the group or template part block, render what are called inner blocks. These inner blocks use block list blocks to display ordered content. The trailing inserter is included as the last item in block lists. When blocks with inner blocks are nested in other inner blocks, the trailing inserter is rendered multiple times. For example, if a template part block is rendered within a group block, each renders its own inner blocks, which subsequently render two trailing inserters. One potential solution is to display a single trailing inserter at any given time. We determine which inserter to show by evaluating the currently selected block and ensuring that the trailing inserter is a sibling (that way we're certain they're children of the same inner block) --- .../src/components/block-list-appender/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index 3075f0da1f8aff..7c13127d0dfcec 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -27,9 +27,14 @@ function BlockListAppender( { isLocked, renderAppender: CustomAppender, className, + selectedBlockClientId, tagName: TagName = 'div', } ) { - if ( isLocked || CustomAppender === false ) { + const hasSiblingsSelected = + selectedBlockClientId && + blockClientIds.includes( selectedBlockClientId ); + + if ( isLocked || CustomAppender === false || ! hasSiblingsSelected ) { return null; } @@ -79,9 +84,12 @@ function BlockListAppender( { } export default withSelect( ( select, { rootClientId } ) => { - const { getBlockOrder, canInsertBlockType, getTemplateLock } = select( - 'core/block-editor' - ); + const { + getBlockOrder, + canInsertBlockType, + getTemplateLock, + getSelectedBlockClientId, + } = select( 'core/block-editor' ); return { isLocked: !! getTemplateLock( rootClientId ), @@ -90,5 +98,6 @@ export default withSelect( ( select, { rootClientId } ) => { getDefaultBlockName(), rootClientId ), + selectedBlockClientId: getSelectedBlockClientId(), }; } )( BlockListAppender ); From 97d9cea207189dc0a20697ef73258f453ee8627e Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Thu, 27 Aug 2020 12:38:04 -0700 Subject: [PATCH 2/4] Display trailing appender when the page is empty --- .../src/components/block-list-appender/index.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index 7c13127d0dfcec..f95a8dcdd4f5c2 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -30,11 +30,7 @@ function BlockListAppender( { selectedBlockClientId, tagName: TagName = 'div', } ) { - const hasSiblingsSelected = - selectedBlockClientId && - blockClientIds.includes( selectedBlockClientId ); - - if ( isLocked || CustomAppender === false || ! hasSiblingsSelected ) { + if ( isLocked || CustomAppender === false ) { return null; } @@ -45,6 +41,14 @@ function BlockListAppender( { } else if ( canInsertDefaultBlock ) { // Render the default block appender when renderAppender has not been // provided and the context supports use of the default appender. + const isDocumentAppender = ! rootClientId; + const isAnotherDefaultAppenderAlreadyDisplayed = + selectedBlockClientId && + ! blockClientIds.includes( selectedBlockClientId ); + + if ( ! isDocumentAppender && isAnotherDefaultAppenderAlreadyDisplayed ) + return null; + appender = ( Date: Fri, 28 Aug 2020 15:42:10 -0700 Subject: [PATCH 3/4] Display trailing inserter when parent block is selected --- .../src/components/block-list-appender/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index f95a8dcdd4f5c2..b5a7f075df98db 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -42,12 +42,18 @@ function BlockListAppender( { // Render the default block appender when renderAppender has not been // provided and the context supports use of the default appender. const isDocumentAppender = ! rootClientId; + const isParentSelected = selectedBlockClientId !== rootClientId; const isAnotherDefaultAppenderAlreadyDisplayed = selectedBlockClientId && ! blockClientIds.includes( selectedBlockClientId ); - if ( ! isDocumentAppender && isAnotherDefaultAppenderAlreadyDisplayed ) + if ( + ! isDocumentAppender && + ! isParentSelected && + isAnotherDefaultAppenderAlreadyDisplayed + ) { return null; + } appender = ( Date: Mon, 31 Aug 2020 00:50:04 -0700 Subject: [PATCH 4/4] Fix isParentSelected conditional Co-authored-by: Addison Stavlo --- .../block-editor/src/components/block-list-appender/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index b5a7f075df98db..dda72ea6b22d19 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -42,7 +42,7 @@ function BlockListAppender( { // Render the default block appender when renderAppender has not been // provided and the context supports use of the default appender. const isDocumentAppender = ! rootClientId; - const isParentSelected = selectedBlockClientId !== rootClientId; + const isParentSelected = selectedBlockClientId === rootClientId; const isAnotherDefaultAppenderAlreadyDisplayed = selectedBlockClientId && ! blockClientIds.includes( selectedBlockClientId );