Navigation: Try always showing appender even when child is selected. (#…

…37637) * Navigation: Try always showing appender even when child is selected. * Remove broken custom appender logic. Co-authored-by: tellthemachines <[email protected]>
WordPress · Feb 4, 2022 · 87d7e17 · 87d7e17
1 parent 60df02e
commit 87d7e17
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -107,7 +107,6 @@ function Navigation( {
 	hasSubmenuIndicatorSetting = true,
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
-	customAppender: CustomAppender = null,
 } ) {
 	const {
 		openSubmenusOnClick,
@@ -696,7 +695,6 @@ function Navigation( {
 								<NavigationInnerBlocks
 									isVisible={ ! isPlaceholderShown }
 									clientId={ clientId }
-									appender={ CustomAppender }
 									hasCustomPlaceholder={
 										!! CustomPlaceholder
 									}

diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -4,6 +4,7 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	useInnerBlocksProps,
+	InnerBlocks,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -39,7 +40,6 @@ const LAYOUT = {
 export default function NavigationInnerBlocks( {
 	isVisible,
 	clientId,
-	appender: CustomAppender,
 	hasCustomPlaceholder,
 	orientation,
 } ) {
@@ -95,7 +95,6 @@ export default function NavigationInnerBlocks( {
 	const parentOrChildHasSelection =
 		isSelected ||
 		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
-	const appender = isVisible && parentOrChildHasSelection ? undefined : false;
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
@@ -111,7 +110,21 @@ export default function NavigationInnerBlocks( {
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,
-			renderAppender: CustomAppender || appender,
+
+			// As an exception to other blocks which feature nesting, show
+			// the block appender even when a child block is selected.
+			// This should be a temporary fix, to be replaced by improvements to
+			// the sibling inserter.
+			// See https://github.com/WordPress/gutenberg/issues/37572.
+			renderAppender:
+				isSelected ||
+				( isImmediateParentOfSelectedBlock &&
+					! selectedBlockHasDescendants ) ||
+				// Show the appender while dragging to allow inserting element between item and the appender.
+				parentOrChildHasSelection
+					? InnerBlocks.ButtonBlockAppender
+					: false,
+
 			// Template lock set to false here so that the Nav
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -199,8 +199,25 @@ $color-control-label-height: 20px;
 	}
 }
 
+// Override inner padding on default appender.
+// This should be a temporary fix, to be replaced by improvements to
+// the sibling inserter.
+// See https://github.com/WordPress/gutenberg/issues/37572.
 .wp-block-navigation .block-editor-button-block-appender {
-	justify-content: flex-start;
+	background-color: $gray-900;
+	color: $white;
+
+	// This needs specificity to override an inherited padding.
+	// That source padding in turn has high specificity to protect
+	// from theme CSS bleed.
+	&.block-editor-button-block-appender.block-editor-button-block-appender {
+		padding: 0;
+	}
+}
+
+.wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
+	background-color: transparent;
+	color: $gray-900;
 }