From 202d122be0dd944ed4f19de488a790a463569a56 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Wed, 16 Sep 2020 12:36:14 -0700
Subject: [PATCH] Add CSS transition

---
 .../header/document-actions/index.js          | 35 +++++++++++--------
 .../header/document-actions/style.scss        | 23 +++++++++++-
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
index 979bac0d6329a..744a886ff34e1 100644
--- a/packages/edit-site/src/components/header/document-actions/index.js
+++ b/packages/edit-site/src/components/header/document-actions/index.js
@@ -18,6 +18,7 @@ function useSecondaryText() {
 		return select( 'core/block-editor' ).getSelectedBlock();
 	} );
 
+	// TODO: Handle if parent is template part too.
 	const selectedBlockLabel =
 		selectedBlock?.name === 'core/template-part'
 			? getBlockLabel(
@@ -41,11 +42,16 @@ export default function DocumentActions( { documentTitle } ) {
 	// item is inactive.
 	const isTitleActive = ! label?.length || ! isActive;
 	return (
-		<div className="edit-site-document-actions">
+		<div
+			className={ classnames( 'edit-site-document-actions', {
+				'has-secondary-label': !! label,
+			} ) }
+		>
 			{ documentTitle ? (
 				<>
-					<span
+					<div
 						className={ classnames(
+							'edit-site-document-actions__label',
 							'edit-site-document-actions__title',
 							{
 								'is-active': isTitleActive,
@@ -53,19 +59,18 @@ export default function DocumentActions( { documentTitle } ) {
 						) }
 					>
 						{ documentTitle }
-					</span>
-					{ label && (
-						<span
-							className={ classnames(
-								'edit-site-document-actions__secondary-item',
-								{
-									'is-active': isActive,
-								}
-							) }
-						>
-							{ label }
-						</span>
-					) }
+					</div>
+					<div
+						className={ classnames(
+							'edit-site-document-actions__label',
+							'edit-site-document-actions__secondary-item',
+							{
+								'is-active': isActive,
+							}
+						) }
+					>
+						{ label ?? '' }
+					</div>
 				</>
 			) : (
 				__( 'Loading…' )
diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss
index e9f5de748646c..e17ca10910ea4 100644
--- a/packages/edit-site/src/components/header/document-actions/style.scss
+++ b/packages/edit-site/src/components/header/document-actions/style.scss
@@ -4,10 +4,31 @@
 	align-items: center;
 	justify-content: space-evenly;
 
-	span {
+	.edit-site-document-actions__label {
 		color: $gray-700;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: height 0.25s;
+
 		&.is-active {
 			color: inherit;
 		}
+
+		&.edit-site-document-actions__title {
+			height: 100%;
+			// Otherwise, the secondary item still takes up space with height 0:
+			flex-grow: 1;
+		}
+
+		&.edit-site-document-actions__secondary-item {
+			height: 0;
+		}
+	}
+
+	&.has-secondary-label {
+		.edit-site-document-actions__label {
+			height: 50%;
+		}
 	}
 }