Block Navigation: use CSS for indentation with known max indent inste…

…ad of spacer divs (#32063)
WordPress · May 31, 2021 · aac0263 · aac0263
1 parent 652adb1
commit aac0263
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 32 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
@@ -15,7 +15,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockNavigationLeaf from './leaf';
-import Indentation from './indentation';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 
@@ -63,7 +62,6 @@ export default function BlockNavigationAppender( {
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-appender__container">
-						<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
@@ -15,7 +15,6 @@ 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';
 import BlockTitle from '../block-title';
@@ -62,7 +61,6 @@ function BlockNavigationBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 			>
-				<Indentation level={ level } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<BlockTitle clientId={ clientId } />
 				{ blockInformation?.anchor && (

diff --git a/packages/block-editor/src/components/block-navigation/indentation.js b/packages/block-editor/src/components/block-navigation/indentation.js
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -274,7 +274,15 @@
 	}
 }
 
-.block-editor-block-navigator-indentation {
-	flex-shrink: 0;
-	width: $grid-unit-30 + $grid-unit-05; // Indent a full icon size, plus 4px which optically aligns child icons to the text label above.
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+.block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon {
+	margin-left: ( $grid-unit-30 + $grid-unit-05 ) * $block-navigation-max-indent;
 }
+@for $i from 0 through $block-navigation-max-indent {
+	.block-editor-block-navigation-leaf[aria-level="#{ $i + 1 }"] .block-editor-block-icon {
+		margin-left: ( $grid-unit-30 + $grid-unit-05 ) * $i;
+	}
+}
+