adds smaller footprint to appenders in navigation, only shows them if…

… item has descendants
WordPress · Jan 14, 2020 · 41c65de · 41c65de
1 parent 4832900
commit 41c65de
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git 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( {
 				</div>
 				<InnerBlocks
 					allowedBlocks={ [ 'core/navigation-link' ] }
-					renderAppender={ isSelected ? InnerBlocks.ButtonBlockAppender : false }
+					renderAppender={ ( hasDescendants && isSelected ) ? InnerBlocks.DefaultAppender : false }
 				/>
 			</div>
 		</Fragment>
@@ -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
@@ -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 }
 					/>
 
 				</div>

diff --git 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
@@ -1,5 +1,4 @@
 .wp-block-navigation {
-
 	& > ul {
 		display: block;
 		list-style: none;