Try/sub nav editing appender (#22165)

* Remove appender from non-selected navigation blocks * Display appender when childless immediate descendant is selected * Display appender when childless immediate descendant is selected
WordPress · May 11, 2020 · 91cd6d0 · 91cd6d0
1 parent 4450195
commit 91cd6d0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -44,6 +44,7 @@ function NavigationLinkEdit( {
 	attributes,
 	hasDescendants,
 	isSelected,
+	isImmediateParentOfSelectedBlock,
 	isParentOfSelectedBlock,
 	setAttributes,
 	showSubmenuIcon,
@@ -53,6 +54,7 @@ function NavigationLinkEdit( {
 	rgbTextColor,
 	rgbBackgroundColor,
 	saveEntityRecord,
+	selectedBlockHasDescendants,
 	userCanCreatePages = false,
 } ) {
 	const { label, opensInNewTab, url, nofollow, description } = attributes;
@@ -287,8 +289,9 @@ function NavigationLinkEdit( {
 				<InnerBlocks
 					allowedBlocks={ [ 'core/navigation-link' ] }
 					renderAppender={
-						( hasDescendants && isSelected ) ||
-						isParentOfSelectedBlock
+						( isSelected && hasDescendants ) ||
+						( isImmediateParentOfSelectedBlock &&
+							! selectedBlockHasDescendants )
 							? InnerBlocks.DefaultAppender
 							: false
 					}
@@ -336,6 +339,7 @@ export default compose( [
 			getClientIdsOfDescendants,
 			hasSelectedInnerBlock,
 			getBlockParentsByBlockName,
+			getSelectedBlockClientId,
 			getSettings,
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
@@ -349,6 +353,14 @@ export default compose( [
 		const showSubmenuIcon =
 			!! navigationBlockAttributes.showSubmenuIcon && hasDescendants;
 		const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
+		const isImmediateParentOfSelectedBlock = hasSelectedInnerBlock(
+			clientId,
+			false
+		);
+		const selectedBlockId = getSelectedBlockClientId();
+		const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
+			selectedBlockId,
+		] )?.length;
 
 		const userCanCreatePages = select( 'core' ).canUser(
 			'create',
@@ -357,7 +369,9 @@ export default compose( [
 
 		return {
 			isParentOfSelectedBlock,
+			isImmediateParentOfSelectedBlock,
 			hasDescendants,
+			selectedBlockHasDescendants,
 			showSubmenuIcon,
 			textColor: navigationBlockAttributes.textColor,
 			backgroundColor: navigationBlockAttributes.backgroundColor,

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -42,12 +42,15 @@ import BlockColorsStyleSelector from './block-colors-selector';
 import * as navIcons from './icons';
 
 function Navigation( {
+	selectedBlockHasDescendants,
 	attributes,
 	clientId,
 	fontSize,
 	hasExistingNavItems,
 	hasResolvedPages,
+	isImmediateParentOfSelectedBlock,
 	isRequestingPages,
+	isSelected,
 	pages,
 	setAttributes,
 	setFontSize,
@@ -263,6 +266,13 @@ function Navigation( {
 						<InnerBlocks
 							ref={ ref }
 							allowedBlocks={ [ 'core/navigation-link' ] }
+							renderAppender={
+								( isImmediateParentOfSelectedBlock &&
+									! selectedBlockHasDescendants ) ||
+								isSelected
+									? InnerBlocks.DefaultAppender
+									: false
+							}
 							templateInsertUpdatesSelection={ false }
 							__experimentalMoverDirection={
 								attributes.orientation || 'horizontal'
@@ -289,6 +299,11 @@ export default compose( [
 	withFontSizes( 'fontSize' ),
 	withSelect( ( select, { clientId } ) => {
 		const innerBlocks = select( 'core/block-editor' ).getBlocks( clientId );
+		const {
+			getClientIdsOfDescendants,
+			hasSelectedInnerBlock,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
 
 		const filterDefaultPages = {
 			parent: 0,
@@ -302,7 +317,18 @@ export default compose( [
 			[ 'postType', 'page', filterDefaultPages ],
 		];
 
+		const isImmediateParentOfSelectedBlock = hasSelectedInnerBlock(
+			clientId,
+			false
+		);
+		const selectedBlockId = getSelectedBlockClientId();
+		const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
+			selectedBlockId,
+		] )?.length;
+
 		return {
+			isImmediateParentOfSelectedBlock,
+			selectedBlockHasDescendants,
 			hasExistingNavItems: !! innerBlocks.length,
 			pages: select( 'core' ).getEntityRecords(
 				'postType',