Swapping order of author name and changes block

Moving everything into the button so it's clickable.
WordPress · Dec 11, 2023 · 559cd3e · 559cd3e
1 parent fde41c8
commit 559cd3e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
@@ -48,7 +48,7 @@ function ChangedSummary( { revision, previousRevision, blockNames } ) {
 	return (
 		<span
 			data-testid="global-styles-revision-changes"
-			className="edit-site-global-styles-screen-revision__changes"
+			className="edit-site-global-styles-screen-revisions__changes"
 		>
 			{ changes.join( ', ' ) }
 		</span>
@@ -208,6 +208,17 @@ function RevisionsButtons( {
 											{ displayDate }
 										</time>
 									) }
+									{ isSelected && (
+										<ChangedSummary
+											blockNames={ blockNames }
+											revision={ revision }
+											previousRevision={
+												index < userRevisions.length
+													? userRevisions[ index + 1 ]
+													: {}
+											}
+										/>
+									) }
 									<span className="edit-site-global-styles-screen-revisions__meta">
 										<img
 											alt={ authorDisplayName }
@@ -218,17 +229,6 @@ function RevisionsButtons( {
 								</span>
 							) }
 						</Button>
-						{ isSelected && (
-							<ChangedSummary
-								blockNames={ blockNames }
-								revision={ revision }
-								previousRevision={
-									index < userRevisions.length
-										? userRevisions[ index + 1 ]
-										: {}
-								}
-							/>
-						) }
 					</li>
 				);
 			} ) }

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -17,10 +17,6 @@
 	overflow: hidden;
 	cursor: pointer;
 
-	&.is-active {
-		box-shadow: inset 5px 0 $black;
-	}
-
 	&:hover {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		.edit-site-global-styles-screen-revisions__date {
@@ -70,7 +66,7 @@
 		width: 100%;
 		height: auto;
 		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-30;
 		&:focus,
 		&:active {
 			outline: 0;
@@ -107,14 +103,14 @@
 	}
 }
 
+.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
 	color: $gray-600;
 	display: flex;
 	justify-content: start;
 	width: 100%;
 	align-items: center;
 	font-size: 12px;
-
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -127,11 +123,10 @@
 	margin: $grid-unit-30 auto !important;
 }
 
-.edit-site-global-styles-screen-revision__changes {
-	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-30;
+.edit-site-global-styles-screen-revisions__changes {
+	margin-bottom: $grid-unit-05;
+	text-align: left;
 	color: $gray-900;
-	display: block;
-	&::first-letter {
-		text-transform: uppercase;
-	}
+	line-height: $default-line-height;
 }
+