List View: Reduce whitespace and always show nested blocks (#28029)

* Forcing nested blocks to always show, but there's gotta be a better way. * Reducing whitespace and simplifying the descenders. * Adjusting the selected state. * Moving the hasHierarchy check into the value of blocks. * This isn't needed. Leftover from some earlier explorations. * Overriding the hover state when selected. * Simplifying the descener-lines component and moving it inside the button. This makes the whole row clickable, regardless of indentation. * Renaming the descender-lines component to indentation.
WordPress · Jan 13, 2021 · f841d34 · f841d34
1 parent 0fa482c
commit f841d34
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 113 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
@@ -15,15 +15,14 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockNavigationLeaf from './leaf';
-import DescenderLines from './descender-lines';
+import Indentation from './indentation';
 import Inserter from '../inserter';
 
 export default function BlockNavigationAppender( {
 	parentBlockClientId,
 	position,
 	level,
 	rowCount,
-	terminatedLevels,
 	path,
 } ) {
 	const isDragging = useSelect(
@@ -63,11 +62,7 @@ export default function BlockNavigationAppender( {
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-appender__container">
-						<DescenderLines
-							level={ level }
-							isLastRow={ position === rowCount }
-							terminatedLevels={ terminatedLevels }
-						/>
+						<Indentation level={ level } />
 						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalIsQuick

diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js
@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import Indentation from './indentation';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 
@@ -70,6 +71,7 @@ function BlockNavigationBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 			>
+				<Indentation level={ level } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				{ blockDisplayName }
 				{ isSelected && (

diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
@@ -25,7 +25,6 @@ import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
 } from '../block-mover/button';
-import DescenderLines from './descender-lines';
 import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useBlockNavigationContext } from './context';
@@ -39,7 +38,6 @@ export default function BlockNavigationBlock( {
 	rowCount,
 	siblingBlockCount,
 	showBlockMovers,
-	terminatedLevels,
 	path,
 } ) {
 	const cellRef = useRef( null );
@@ -108,11 +106,6 @@ export default function BlockNavigationBlock( {
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-block__contents-container">
-						<DescenderLines
-							level={ level }
-							isLastRow={ position === rowCount }
-							terminatedLevels={ terminatedLevels }
-						/>
 						<BlockNavigationBlockContents
 							block={ block }
 							onClick={ () => onClick( block.clientId ) }

diff --git a/...nents/block-navigation/descender-lines.js → ...omponents/block-navigation/indentation.js b/...nents/block-navigation/descender-lines.js → ...omponents/block-navigation/indentation.js
@@ -4,15 +4,11 @@
 import { times } from 'lodash';
 import classnames from 'classnames';
 
-const lineClassName = 'block-editor-block-navigator-descender-line';
+const lineClassName = 'block-editor-block-navigator-indentation';
 
-export default function DescenderLines( {
-	level,
-	isLastRow,
-	terminatedLevels,
-} ) {
+export default function Indentation( { level } ) {
 	return times( level - 1, ( index ) => {
-		// The first 'level' that has a descender line is level 2.
+		// The first 'level' that has an indentation is level 2.
 		// Add 2 to the zero-based index below to reflect that.
 		const currentLevel = index + 2;
 		const hasItem = currentLevel === level;
@@ -22,8 +18,6 @@ export default function DescenderLines( {
 				aria-hidden="true"
 				className={ classnames( lineClassName, {
 					'has-item': hasItem,
-					'is-last-row': isLastRow,
-					'is-terminated': terminatedLevels.includes( currentLevel ),
 				} ) }
 			/>
 		);

diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js
@@ -36,23 +36,14 @@ function BlockNavigation( {
 			<p className="block-editor-block-navigation__label">
 				{ __( 'List view' ) }
 			</p>
-			{ hasHierarchy && (
-				<BlockNavigationTree
-					blocks={ [ rootBlock ] }
-					selectedBlockClientId={ selectedBlockClientId }
-					selectBlock={ selectBlock }
-					__experimentalFeatures={ __experimentalFeatures }
-					showNestedBlocks
-				/>
-			) }
-			{ ! hasHierarchy && (
-				<BlockNavigationTree
-					blocks={ rootBlocks }
-					selectedBlockClientId={ selectedBlockClientId }
-					selectBlock={ selectBlock }
-					__experimentalFeatures={ __experimentalFeatures }
-				/>
-			) }
+
+			<BlockNavigationTree
+				blocks={ hasHierarchy ? [ rootBlock ] : rootBlocks }
+				selectedBlockClientId={ selectedBlockClientId }
+				selectBlock={ selectBlock }
+				__experimentalFeatures={ __experimentalFeatures }
+				showNestedBlocks
+			/>
 		</div>
 	);
 }

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -1,6 +1,3 @@
-$tree-border-width: 2px;
-$tree-item-height: 36px;
-
 .block-editor-block-navigation__label {
 	margin: 0 0 $grid-unit-15;
 	color: $gray-700;
@@ -10,7 +7,7 @@ $tree-item-height: 36px;
 }
 
 .block-editor-block-navigation__container {
-	padding: $grid-unit - $border-width;
+	min-width: 280px;
 }
 
 .block-editor-block-navigation-tree {
@@ -24,6 +21,13 @@ $tree-item-height: 36px;
 	// Use position relative for row animation.
 	position: relative;
 
+	&.is-selected .block-editor-block-navigation-block-contents,
+	&.is-selected:hover .block-editor-block-navigation-block-contents,
+	&.is-selected:focus .block-editor-block-navigation-block-contents {
+		background: $gray-900;
+		color: $white;
+	}
+
 	&.is-dragging {
 		display: none;
 	}
@@ -33,15 +37,21 @@ $tree-item-height: 36px;
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: $grid-unit-15 ($grid-unit-15 / 2);
-		margin-top: auto;
-		margin-bottom: auto;
+		padding: ($grid-unit-15 / 2);
 		text-align: left;
 		color: $gray-900;
 		border-radius: 2px;
 		position: relative;
 		white-space: nowrap;
 
+		&:hover {
+			background: $gray-100;
+		}
+
+		&:focus {
+			z-index: 1;
+		}
+
 		&.is-dropping-before::before {
 			content: "";
 			position: absolute;
@@ -91,14 +101,6 @@ $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 {
@@ -225,64 +227,9 @@ $tree-item-height: 36px;
 	.block-editor-block-navigation-appender__container {
 		display: flex;
 	}
-
-	.block-editor-block-navigation-block__contents-container {
-		min-height: $grid-unit-60;
-	}
-
-	.block-editor-block-navigator-descender-line {
-		position: relative;
-		flex-shrink: 0;
-		width: ( $button-size / 2 ) + 6px;
-
-		&:first-child {
-			width: ( $button-size / 2 );
-		}
-
-		&.has-item {
-			margin-right: 6px;
-		}
-
-		// Draw a vertical line using border-right.
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 1px;
-			bottom: -2px;
-			right: -1px;
-			border-right: 2px solid $gray-600;
-		}
-
-		// If a vertical line has terminated, don't draw it.
-		&.is-terminated::before {
-			border-color: transparent;
-		}
-
-		// Make the last vertical line half-height.
-		&.has-item.is-last-row {
-			height: 26px;
-		}
-
-		// Draw a horizontal line using border-bottom.
-		&.has-item::after {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 26px;
-			left: 100%;
-			width: 5px;
-			border-bottom: 2px solid $gray-600;
-		}
-	}
 }
 
-// Position the horizontal line in the middle of appender's height
-.block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line {
-	&.has-item.is-last-row {
-		height: $grid-unit-20;
-		&::after {
-			top: 100%;
-		}
-	}
+.block-editor-block-navigator-indentation {
+	flex-shrink: 0;
+	width: 18px;
 }