Add CSS transition

WordPress · Sep 17, 2020 · f4927d4 · f4927d4
1 parent 1ed89a1
commit f4927d4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 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
@@ -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,31 +42,35 @@ 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,
 							}
 						) }
 					>
 						{ 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
@@ -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%;
+		}
 	}
 }