From 483290027dc0ce45721232273bca6aab4304ceae Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 13 Jan 2020 16:53:24 +0200 Subject: [PATCH 1/3] makes appenders visible only for the current selection --- packages/block-library/src/navigation-link/edit.js | 6 ++---- packages/block-library/src/navigation/edit.js | 2 ++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 8383c561ee2b7..95d84085be653 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -38,7 +38,6 @@ import { Fragment, useState, useEffect } from '@wordpress/element'; function NavigationLinkEdit( { attributes, - hasDescendants, isSelected, isParentOfSelectedBlock, setAttributes, @@ -183,7 +182,7 @@ function NavigationLinkEdit( { @@ -192,12 +191,11 @@ function NavigationLinkEdit( { export default compose( [ withSelect( ( select, ownProps ) => { - const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); + const { hasSelectedInnerBlock } = select( 'core/block-editor' ); const { clientId } = ownProps; return { isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), - hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, }; } ), withDispatch( ( dispatch, ownProps, registry ) => { diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 058d30c5a7c7f..7ac451308a6fc 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -48,6 +48,7 @@ function Navigation( { fontSize, hasExistingNavItems, hasResolvedPages, + isSelected, isRequestingPages, pages, setAttributes, @@ -198,6 +199,7 @@ function Navigation( { allowedBlocks={ [ 'core/navigation-link' ] } templateInsertUpdatesSelection={ false } __experimentalMoverDirection={ 'horizontal' } + renderAppender={ isSelected ? InnerBlocks.ButtonBlockAppender : false } /> From 41c65dec98e99a54618926252da252fca0292ae5 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 14 Jan 2020 16:51:43 +0200 Subject: [PATCH 2/3] adds smaller footprint to appenders in navigation, only shows them if item has descendants --- packages/block-library/src/navigation-link/edit.js | 6 ++++-- packages/block-library/src/navigation/edit.js | 2 -- packages/block-library/src/navigation/editor.scss | 6 ++++++ packages/block-library/src/navigation/style.scss | 1 - 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 95d84085be653..88a3267b5326a 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -38,6 +38,7 @@ import { Fragment, useState, useEffect } from '@wordpress/element'; function NavigationLinkEdit( { attributes, + hasDescendants, isSelected, isParentOfSelectedBlock, setAttributes, @@ -182,7 +183,7 @@ function NavigationLinkEdit( { @@ -191,11 +192,12 @@ function NavigationLinkEdit( { export default compose( [ withSelect( ( select, ownProps ) => { - const { hasSelectedInnerBlock } = select( 'core/block-editor' ); + const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); const { clientId } = ownProps; return { isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), + hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, }; } ), withDispatch( ( dispatch, ownProps, registry ) => { diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 7ac451308a6fc..058d30c5a7c7f 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -48,7 +48,6 @@ function Navigation( { fontSize, hasExistingNavItems, hasResolvedPages, - isSelected, isRequestingPages, pages, setAttributes, @@ -199,7 +198,6 @@ function Navigation( { allowedBlocks={ [ 'core/navigation-link' ] } templateInsertUpdatesSelection={ false } __experimentalMoverDirection={ 'horizontal' } - renderAppender={ isSelected ? InnerBlocks.ButtonBlockAppender : false } /> diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 6bf5ffd292324..b730d44686845 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -61,11 +61,17 @@ // Polish the Appender. .wp-block-navigation .block-list-appender { margin: 0; + width: 28px; + height: 28px; + margin-top: $grid-size/2; .block-editor-button-block-appender { padding: $grid-size; + padding-bottom: $grid-size/2; + padding-top: $grid-size/2; outline: none; background: none; + border-radius: 50%; } } } diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index fc211aacea330..40453f512b1d5 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -1,5 +1,4 @@ .wp-block-navigation { - & > ul { display: block; list-style: none; From 42125e3da10d0defaef861c36d47af7c5fc328f2 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 21 Jan 2020 12:43:38 +0200 Subject: [PATCH 3/3] align appender to level of the menu item, remove useless CSS --- packages/block-library/src/navigation/editor.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index b730d44686845..c6aadcb9e5082 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -63,15 +63,15 @@ margin: 0; width: 28px; height: 28px; - margin-top: $grid-size/2; + margin-top: $grid-size-small; + margin-left: $grid-size + $block-side-ui-clearance; .block-editor-button-block-appender { padding: $grid-size; - padding-bottom: $grid-size/2; - padding-top: $grid-size/2; + padding-bottom: $grid-size-small; + padding-top: $grid-size-small; outline: none; background: none; - border-radius: 50%; } } }