WordPress · jorgefilipecosta · Aug 26, 2020 · Aug 18, 2020 · Aug 18, 2020 · Aug 13, 2020
@@ -12,7 +12,15 @@ import BlockNavigationBlockSelectButton from './block-select-button';
 
 const BlockNavigationBlockContents = forwardRef(
 	(
-		{ onClick, block, isSelected, position, siblingCount, level, ...props },
+		{
+			onClick,
+			block,
+			isSelected,
+			position,
+			siblingBlockCount,
+			level,
+			...props
+		},
 		ref
 	) => {
 		const {
@@ -27,7 +35,7 @@ const BlockNavigationBlockContents = forwardRef(
 				onClick={ onClick }
 				isSelected={ isSelected }
 				position={ position }
-				siblingCount={ siblingCount }
+				siblingBlockCount={ siblingBlockCount }
 				level={ level }
 				{ ...props }
 			/>
@@ -39,7 +47,7 @@ const BlockNavigationBlockContents = forwardRef(
 				onClick={ onClick }
 				isSelected={ isSelected }
 				position={ position }
-				siblingCount={ siblingCount }
+				siblingBlockCount={ siblingBlockCount }
 				level={ level }
 				{ ...props }
 			/>

@@ -28,7 +28,7 @@ function BlockNavigationBlockSelectButton(
 		isSelected,
 		onClick,
 		position,
-		siblingCount,
+		siblingBlockCount,
 		level,
 		tabIndex,
 		onFocus,
@@ -43,7 +43,7 @@ function BlockNavigationBlockSelectButton(
 	const descriptionId = `block-navigation-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
-		siblingCount,
+		siblingBlockCount,
 		level
 	);
 

@@ -48,7 +48,7 @@ function BlockNavigationBlockSlot( props, ref ) {
 					block,
 					isSelected,
 					position,
-					siblingCount,
+					siblingBlockCount,
 					level,
 					tabIndex,
 					onFocus,
@@ -59,7 +59,7 @@ function BlockNavigationBlockSlot( props, ref ) {
 				const descriptionId = `block-navigation-block-slot__${ instanceId }`;
 				const blockPositionDescription = getBlockPositionDescription(
 					position,
-					siblingCount,
+					siblingBlockCount,
 					level
 				);
 

@@ -37,6 +37,7 @@ export default function BlockNavigationBlock( {
 	position,
 	level,
 	rowCount,
+	siblingBlockCount,
 	showBlockMovers,
 	terminatedLevels,
 	path,
@@ -49,9 +50,7 @@ export default function BlockNavigationBlock( {
 	);
 	const { clientId } = block;
 
-	// Subtract 1 from rowCount, as it includes the block appender.
-	const siblingCount = rowCount - 1;
-	const hasSiblings = siblingCount > 1;
+	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const hasVisibleMovers = isHovered || isFocused;
 	const moverCellClassName = classnames(
@@ -102,7 +101,7 @@ export default function BlockNavigationBlock( {
 							onClick={ () => onClick( block.clientId ) }
 							isSelected={ isSelected }
 							position={ position }
-							siblingCount={ siblingCount }
+							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
 							tabIndex={ tabIndex }

@@ -36,9 +36,8 @@ export default function BlockNavigationBranch( props ) {
 		selectedBlockClientId === parentClientId;
 	const hasAppender = itemHasAppender( parentBlockClientId );
 	// Add +1 to the rowCount to take the block appender into account.
-	const rowCount = hasAppender
-		? filteredBlocks.length + 1
-		: filteredBlocks.length;
+	const blockCount = filteredBlocks.length;
+	const rowCount = hasAppender ? blockCount + 1 : blockCount;
 	const appenderPosition = rowCount;
 
 	return (
@@ -64,6 +63,7 @@ export default function BlockNavigationBranch( props ) {
 							level={ level }
 							position={ position }
 							rowCount={ rowCount }
+							siblingBlockCount={ blockCount }
 							showBlockMovers={ showBlockMovers }
 							terminatedLevels={ terminatedLevels }
 							path={ updatedPath }

@@ -56,6 +56,14 @@ $tree-item-height: 36px;
 		margin-right: 6px;
 	}
 
+	&.is-selected .block-editor-block-icon svg,
+	&.is-selected:focus .block-editor-block-icon svg {
+		color: $white;
+		background: $gray-900;
+		box-shadow: 0 0 0 $border-width $gray-900;
+		border-radius: $border-width;
+	}
+
 	.block-editor-block-navigation-block__menu-cell,
 	.block-editor-block-navigation-block__mover-cell,
 	.block-editor-block-navigation-block__contents-cell {

@@ -51,14 +51,17 @@ export default function useResizeCanvas( deviceType ) {
 	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
 
 	const contentInlineStyles = ( device ) => {
+		const height = device === 'Mobile' ? '768px' : '1024px';
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
 					width: getCanvasWidth( device ),
 					margin: marginValue() + 'px auto',
 					flexGrow: 0,
-					maxHeight: device === 'Mobile' ? '768px' : '1024px',
+					height,
+					minHeight: height,
+					maxHeight: height,
 					overflowY: 'auto',
 				};
 			default:

@@ -47,7 +47,7 @@ $blocks-button__height: 56px;
 	border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link,
+.is-style-outline .wp-block-button__link,
 .wp-block-button__link.is-style-outline {
 	color: $dark-gray-700;
 	background-color: transparent;

@@ -76,6 +76,7 @@ export default function QueryControls( {
 				label={ __( 'Category' ) }
 				noOptionLabel={ __( 'All' ) }
 				selectedCategoryId={ selectedCategoryId }
+				onChange={ onCategoryChange }
 			/>
 		),
 		categorySuggestions && onCategoryChange && (

diff --git a/packages/edit-navigation/src/components/navigation-editor/style.scss b/packages/edit-navigation/src/components/navigation-editor/style.scss
@@ -56,6 +56,13 @@
 	> :first-child button {
 		padding-left: 0;
 	}
+
+	&.is-selected .block-editor-block-icon svg,
+	&.is-selected:focus .block-editor-block-icon svg {
+		color: $dark-gray-600;
+		background: transparent;
+		box-shadow: none;
+	}
 }
 
 .edit-navigation-editor__navigation-structure-panel {