From aebae771b5d4954d829742ae3d9466780cd2f666 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 17 Mar 2021 11:21:48 +0800 Subject: [PATCH 1/5] Only show inserter version of insertion point if there is a next block --- .../components/block-list/insertion-point.js | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 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 f2842aa5b11d50..e43458c1d71139 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -200,6 +200,18 @@ function InsertionPointPopover( { } } + // Only show the inserter when there's a `nextElement`. At the end of the + // block list the trailing appender should serve the purpose of inserting + // blocks. + const showInsertionPointInserter = + ! isHidden && nextElement && ( isInserterShown || isInserterForced ); + + // Show the indicator if the insertion point inserter is visible, or if + // the `showInsertionPoint` state is `true`. The latter is generally true + // when hovering blocks for insertion in the block library. + const showInsertionPointIndicator = + ! isHidden && ( showInsertionPointInserter || showInsertionPoint ); + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ // While ideally it would be enough to capture the // bubbling focus event from the Inserter, due to the @@ -224,13 +236,10 @@ function InsertionPointPopover( { className={ className } style={ style } > - { ! isHidden && - ( showInsertionPoint || - isInserterShown || - isInserterForced ) && ( -
- ) } - { ! isHidden && ( isInserterShown || isInserterForced ) && ( + { showInsertionPointIndicator && ( +
+ ) } + { showInsertionPointInserter && ( Date: Wed, 17 Mar 2021 11:29:07 +0800 Subject: [PATCH 2/5] Clarify comment --- .../src/components/block-list/insertion-point.js | 6 +++--- 1 file changed, 3 insertions(+), 3 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 e43458c1d71139..f44955ec25b8e5 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -200,9 +200,9 @@ function InsertionPointPopover( { } } - // Only show the inserter when there's a `nextElement`. At the end of the - // block list the trailing appender should serve the purpose of inserting - // blocks. + // Only show the inserter when there's a `nextElement` (a block after the + // insertion point). At the end of the block list the trailing appender + // should serve the purpose of inserting blocks. const showInsertionPointInserter = ! isHidden && nextElement && ( isInserterShown || isInserterForced ); From 4aebf8dc76062f5a5d50562ad83acbefc3cb4510 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 18 Mar 2021 18:01:38 +0800 Subject: [PATCH 3/5] Improve boolean logic --- .../block-editor/src/components/block-list/insertion-point.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f44955ec25b8e5..d759d568efd3e9 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -210,7 +210,7 @@ function InsertionPointPopover( { // the `showInsertionPoint` state is `true`. The latter is generally true // when hovering blocks for insertion in the block library. const showInsertionPointIndicator = - ! isHidden && ( showInsertionPointInserter || showInsertionPoint ); + showInsertionPointInserter || ( ! isHidden && showInsertionPoint ); /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ // While ideally it would be enough to capture the From 195541294d46390752ad5ac9d9de8369c9a58750 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 19 Mar 2021 11:55:22 +0800 Subject: [PATCH 4/5] Update e2e test --- .../specs/experiments/multi-entity-saving.test.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index c0c035ccd0894d..680ad6419d1f7a 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -7,7 +7,6 @@ import { publishPost, trashAllPosts, activateTheme, - canvas, } from '@wordpress/e2e-test-utils'; /** @@ -189,9 +188,13 @@ describe( 'Multi-entity save flow', () => { await navigationPanel.clickItemByText( 'Index' ); await navigationPanel.close(); - // Click the first block so that the template part inserts in the right place. - const firstBlock = await canvas().$( '.wp-block' ); - await firstBlock.click(); + // Select the first template part via list view. + await page.click( 'button[aria-label="List View"]' ); + const headerTemplatePartListViewButton = await page.waitForXPath( + '//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]' + ); + headerTemplatePartListViewButton.click(); + await page.click( 'button[aria-label="Close list view sidebar"]' ); // Insert something to dirty the editor. await insertBlock( 'Paragraph' ); From 0d8c064e9d1240f65e08ae69f86557d8e0bd28f5 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 19 Mar 2021 12:52:23 +0800 Subject: [PATCH 5/5] Update tests --- .../experiments/document-settings.test.js | 18 ++++++++++-------- .../experiments/multi-entity-saving.test.js | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/document-settings.test.js b/packages/e2e-tests/specs/experiments/document-settings.test.js index eb59dc2a3f82c2..8d7092d18c6592 100644 --- a/packages/e2e-tests/specs/experiments/document-settings.test.js +++ b/packages/e2e-tests/specs/experiments/document-settings.test.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -import { - canvas, - trashAllPosts, - activateTheme, -} from '@wordpress/e2e-test-utils'; +import { trashAllPosts, activateTheme } from '@wordpress/e2e-test-utils'; /** * Internal dependencies @@ -58,9 +54,15 @@ describe( 'Document Settings', () => { describe( 'and a template part is clicked in the template', () => { it( "should display the selected template part's name in the document header", async () => { - // Click on a template part in the template - const header = await canvas().$( '.site-header' ); - await header.click(); + // Select the header template part via list view. + await page.click( 'button[aria-label="List View"]' ); + const headerTemplatePartListViewButton = await page.waitForXPath( + '//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]' + ); + headerTemplatePartListViewButton.click(); + await page.click( + 'button[aria-label="Close list view sidebar"]' + ); // Evaluate the document settings secondary title const actual = await getDocumentSettingsSecondaryTitle(); diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index 680ad6419d1f7a..65e94a80711d7c 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -188,7 +188,7 @@ describe( 'Multi-entity save flow', () => { await navigationPanel.clickItemByText( 'Index' ); await navigationPanel.close(); - // Select the first template part via list view. + // Select the header template part via list view. await page.click( 'button[aria-label="List View"]' ); const headerTemplatePartListViewButton = await page.waitForXPath( '//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'