List View: Visual and design improvements (#29769)

* General modal polish.

* Vertically align tree view icons with heading in modal

* Increase indentation.

* Compress the height of icons, without reducing the mover control hit area.

* Tweak indentation.

packages/base-styles/_variables.scss

@@ -63,7 +63,7 @@ $spinner-size: 18px;
  */
 
 $shadow-popover: 0 2px 6px rgba($black, 0.05);
-$shadow-modal: 0 3px 30px rgba($black, 0.2);
+$shadow-modal: 0 10px 10px rgba($black, 0.25);
 
 
 /**

packages/block-editor/src/components/block-navigation/style.scss

@@ -15,6 +15,12 @@
 	border-collapse: collapse;
 	padding: 0;
 	margin: 0;
+
+	// Move upwards when in modal.
+	.components-modal__content & {
+		margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
+		width: calc(100% + #{ $grid-unit-15 });
+	}
 }
 
 .block-editor-block-navigation-leaf {
@@ -116,7 +122,11 @@
 		vertical-align: top;
 		@include reduce-motion("transition");
 
+		// Show on hover, visible, and show above to keep the hit area size.
+		&:hover,
 		&.is-visible {
+			position: relative;
+			z-index: 1;
 			opacity: 1;
 			@include edit-post__fade-in-animation;
 		}
@@ -140,29 +150,31 @@
 		align-items: center;
 	}
 
-	// Keep the tap target large but the focus target small
+	// Keep the tap target large but the focus target small.
 	.block-editor-block-mover-button {
 		position: relative;
 		width: $button-size;
 		height: $button-size-small;
 
-		// Position the icon
+		// Position the icon.
 		svg {
 			position: relative;
 			height: $button-size-small;
 		}
 
 		&.is-up-button {
+			margin-top: -$grid-unit-15 / 2;
 			align-items: flex-end;
 			svg {
-				bottom: -4px;
+				bottom: -$grid-unit-05;
 			}
 		}
 
 		&.is-down-button {
+			margin-bottom: -$grid-unit-15 / 2;
 			align-items: flex-start;
 			svg {
-				top: -4px;
+				top: -$grid-unit-05;
 			}
 		}
 
@@ -231,5 +243,5 @@
 
 .block-editor-block-navigator-indentation {
 	flex-shrink: 0;
-	width: 18px;
+	width: $grid-unit-30 + $grid-unit-05; // Indent a full icon size, plus 4px which optically aligns child icons to the text label above.
 }

packages/block-library/src/navigation/use-block-navigator.js

@@ -17,15 +17,15 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 	const navigatorToolbarButton = (
 		<ToolbarButton
 			className="components-toolbar__control"
-			label={ __( 'Open block navigator' ) }
+			label={ __( 'Open block navigation' ) }
 			onClick={ () => setIsNavigationListOpen( true ) }
 			icon={ listView }
 		/>
 	);
 
 	const navigatorModal = isNavigationListOpen && (
 		<Modal
-			title={ __( 'Block Navigator' ) }
+			title={ __( 'Navigation' ) }
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ () => {
 				setIsNavigationListOpen( false );

packages/components/src/modal/header.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -40,7 +40,11 @@ const ModalHeader = ( {
 				) }
 			</div>
 			{ isDismissible && (
-				<Button onClick={ onClose } icon={ close } label={ label } />
+				<Button
+					onClick={ onClose }
+					icon={ closeSmall }
+					label={ label }
+				/>
 			) }
 		</div>
 	);

packages/components/src/modal/style.scss

@@ -23,9 +23,9 @@
 	left: 0;
 	box-sizing: border-box;
 	margin: 0;
-	border: $border-width solid $gray-300;
 	background: $white;
 	box-shadow: $shadow-modal;
+	border-radius: $radius-block-ui;
 	overflow: auto;
 
 	// Show a centered modal on bigger screens.
@@ -61,7 +61,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid $gray-300;
-	padding: 0 $grid-unit-30;
+	padding: 0 $grid-unit-40;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -75,7 +75,7 @@
 	position: relative;
 	position: sticky;
 	top: 0;
-	margin: 0 -#{$grid-unit-30} $grid-unit-30;
+	margin: 0 -#{$grid-unit-40} $grid-unit-30;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// Edge has bugs around position: sticky;, so it needs a separate top rule.
@@ -123,7 +123,7 @@
 .components-modal__content {
 	box-sizing: border-box;
 	height: 100%;
-	padding: 0 $grid-unit-30 $grid-unit-30;
+	padding: 0 $grid-unit-40 $grid-unit-30;
 
 	// Rules inside this query are only run by Microsoft Edge.
 	// This is a companion top padding to the fixed rule in line 77.

packages/edit-post/src/components/manage-blocks-modal/style.scss

@@ -121,9 +121,9 @@
 .edit-post-manage-blocks-modal__results {
 	height: 100%;
 	overflow: auto;
-	margin-left: -$grid-unit-30;
-	margin-right: -$grid-unit-30;
-	padding-left: $grid-unit-30;
-	padding-right: $grid-unit-30;
+	margin-left: -$grid-unit-40;
+	margin-right: -$grid-unit-40;
+	padding-left: $grid-unit-40;
+	padding-right: $grid-unit-40;
 	border-top: $border-width solid $gray-300;
 }