Move wordcount to the top of the outline (#46648)

* Move wordcount to the top of the outline * Fix box-sizing issue.
WordPress · Dec 21, 2022 · a03158d · a03158d · github-actions · Dec 21, 2022
1 parent 79f6e5f
commit a03158d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
@@ -65,18 +65,6 @@ export default function ListViewOutline() {
 	}, [] );
 	return (
 		<>
-			{ headingCount > 0 ? (
-				<DocumentOutline />
-			) : (
-				<div className="edit-post-editor__list-view-empty-headings">
-					<EmptyOutlineIllustration />
-					<p>
-						{ __(
-							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
-						) }
-					</p>
-				</div>
-			) }
 			<div className="edit-post-editor__list-view-overview">
 				<div>
 					<Text>{ __( 'Characters:' ) }</Text>
@@ -93,6 +81,18 @@ export default function ListViewOutline() {
 					<TimeToRead />
 				</div>
 			</div>
+			{ headingCount > 0 ? (
+				<DocumentOutline />
+			) : (
+				<div className="edit-post-editor__list-view-empty-headings">
+					<EmptyOutlineIllustration />
+					<p>
+						{ __(
+							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+						) }
+					</p>
+				</div>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -76,24 +76,23 @@
 }
 
 .edit-post-editor__list-view-overview {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
+	padding: $grid-unit-20;
+
 	& > div > span:first-child {
 		// Width of the text information fields.
 		width: 90px;
 		display: inline-block;
 	}
-	border-top: $border-width solid $gray-300;
-	width: calc(100% - #{ $grid-unit-40 });
-	padding: $grid-unit-20;
-	& > div {
-		padding: 0 0 $grid-unit-10;
-		& > span {
-			font-size: $helptext-font-size;
-			line-height: $default-line-height;
-			color: $gray-700;
-		}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
 	}
-	// Height of the overview container.
-	height: 72px;
 }
 
 .edit-post-editor__list-view-container {