Styling pagination buttons

Shifting "Apply" button to the single item so that we don't have to deal with it being next to the pagination row.
WordPress · Dec 15, 2023 · 5556a41 · 5556a41
1 parent 2556550
commit 5556a41
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 73 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -21,7 +21,6 @@ import {
 import ScreenHeader from '../header';
 import { unlock } from '../../../lock-unlock';
 import Revisions from '../../revisions';
-import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
 import { store as editSiteStore } from '../../../store';
 import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
@@ -134,7 +133,9 @@ function ScreenRevisions() {
 	// Only display load button if there is a revision to load,
 	// and it is different from the current editor styles.
 	const isLoadButtonEnabled =
-		!! currentlySelectedRevisionId && ! selectedRevisionMatchesEditorStyles;
+		!! currentlySelectedRevisionId &&
+		currentlySelectedRevisionId !== 'unsaved' &&
+		! selectedRevisionMatchesEditorStyles;
 	const hasRevisions = !! currentRevisions.length;
 
 	return (
@@ -167,35 +168,15 @@ function ScreenRevisions() {
 						selectedRevisionId={ currentlySelectedRevisionId }
 						userRevisions={ currentRevisions }
 						canApplyRevision={ isLoadButtonEnabled }
+						onApplyRevision={ () =>
+							hasUnsavedChanges
+								? setIsLoadingRevisionWithUnsavedChanges( true )
+								: restoreRevision( currentlySelectedRevision )
+						}
 					/>
 				</div>
 				{ hasRevisions && (
 					<div className="edit-site-global-styles-screen-revisions__footer">
-						{ isLoadButtonEnabled && (
-							<Button
-								variant="primary"
-								className="edit-site-global-styles-screen-revisions__button"
-								disabled={
-									! currentlySelectedRevisionId ||
-									currentlySelectedRevisionId === 'unsaved'
-								}
-								onClick={ () => {
-									if ( hasUnsavedChanges ) {
-										setIsLoadingRevisionWithUnsavedChanges(
-											true
-										);
-									} else {
-										restoreRevision(
-											currentlySelectedRevision
-										);
-									}
-								} }
-							>
-								{ currentlySelectedRevisionId === 'parent'
-									? __( 'Reset to defaults' )
-									: __( 'Apply selected' ) }
-							</Button>
-						) }
 						{ numPages > 1 && (
 							<Pagination
 								className="edit-site-global-styles-screen-revisions__pagination"

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
@@ -115,6 +115,7 @@ function RevisionsButtons( {
 	selectedRevisionId,
 	onChange,
 	canApplyRevision,
+	onApplyRevision,
 } ) {
 	const { currentThemeName, currentUser } = useSelect( ( select ) => {
 		const { getCurrentTheme, getCurrentUser } = select( coreStore );
@@ -208,6 +209,13 @@ function RevisionsButtons( {
 											{ displayDate }
 										</time>
 									) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										<img
+											alt={ authorDisplayName }
+											src={ authorAvatar }
+										/>
+										{ authorDisplayName }
+									</span>
 									{ isSelected && (
 										<ChangesSummary
 											blockNames={ blockNames }
@@ -219,16 +227,20 @@ function RevisionsButtons( {
 											}
 										/>
 									) }
-									<span className="edit-site-global-styles-screen-revisions__meta">
-										<img
-											alt={ authorDisplayName }
-											src={ authorAvatar }
-										/>
-										{ authorDisplayName }
-									</span>
 								</span>
 							) }
 						</Button>
+						{ canApplyRevision && isSelected && (
+							<Button
+								variant="secondary"
+								className="edit-site-global-styles-screen-revisions__apply-button"
+								onClick={ onApplyRevision }
+							>
+								{ isReset
+									? __( 'Reset to defaults' )
+									: __( 'Apply changes' ) }
+							</Button>
+						) }
 					</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
@@ -93,10 +93,15 @@
 	}
 }
 
-.edit-site-global-styles-screen-revisions__button {
+.edit-site-global-styles-screen-revisions__apply-button.is-secondary {
 	justify-content: center;
-	width: 100%;
-	margin-bottom: $grid-unit-20;
+	height: $button-size-small;
+	background: $white;
+	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-30;
+	padding: $grid-unit-15 $grid-unit-20;
+	&:hover:not(:disabled) {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -117,8 +122,9 @@
 	display: flex;
 	justify-content: start;
 	width: 100%;
-	align-items: center;
+	align-items: flex-start;
 	font-size: 12px;
+	text-align: left;
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -165,14 +171,5 @@
 		width: $button-size-small;
 		height: $button-size-small;
 		outline: 1px solid;
-
-		&:disabled {
-			color: $gray-600;
-			background: none;
-		}
-
-		&:hover:not(:disabled) {
-			background-color: $gray-700;
-		}
 	}
 }
diff --git a/...es/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/...es/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -48,14 +48,19 @@ export default function useGlobalStylesRevisions( {
 			const globalStyles = globalStylesId
 				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
 				: undefined;
-			let _revisionsCount =
+			const _revisionsCount =
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-			// one for the reset item.
-			_revisionsCount++;
-			// one for any dirty changes (unsaved).
-			if ( _isDirty ) {
-				_revisionsCount++;
-			}
+			// Commenting out for now as we need to ensure
+			// that the right revisionsCount is use to calculate numPages.
+			// E.g., there might be a single, trailing 'reset' item, tricking the
+			// pagination into thinking there's an extra page,
+			// but there are no more revisions in the database.
+			// // one for the reset item.
+			// _revisionsCount++;
+			// // one for any dirty changes (unsaved).
+			// if ( _isDirty ) {
+			// 	_revisionsCount++;
+			// }
 			const globalStylesRevisions =
 				getRevisions( 'root', 'globalStyles', globalStylesId, query ) ||
 				EMPTY_ARRAY;

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -211,5 +211,15 @@
 	z-index: z-index(".edit-site-patterns__grid-pagination");
 	.components-button.is-tertiary {
 		background-color: $gray-800;
+		color: $gray-100;
+
+		&:disabled {
+			color: $gray-600;
+			background: none;
+		}
+
+		&:hover:not(:disabled) {
+			background-color: $gray-700;
+		}
 	}
 }
diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
@@ -20,6 +20,7 @@ export default function Pagination( {
 	totalItems,
 	className,
 	disabled = false,
+	buttonVariant = 'tertiary',
 } ) {
 	return (
 		<HStack
@@ -40,15 +41,15 @@ export default function Pagination( {
 			</Text>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
-					variant="tertiary"
+					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'First page' ) }
 				>
 					«
 				</Button>
 				<Button
-					variant="tertiary"
+					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'Previous page' ) }
@@ -66,15 +67,15 @@ export default function Pagination( {
 			</Text>
 			<HStack expanded={ false } spacing={ 1 }>
 				<Button
-					variant="tertiary"
+					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Next page' ) }
 				>
 					›
 				</Button>
 				<Button
-					variant="tertiary"
+					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Last page' ) }

diff --git a/packages/edit-site/src/components/pagination/style.scss b/packages/edit-site/src/components/pagination/style.scss
@@ -1,16 +1,5 @@
-.edit-site-pagination {
-	.components-button.is-tertiary {
-		width: $button-size-compact;
-		height: $button-size-compact;
-		justify-content: center;
-
-		&:disabled {
-			color: $gray-600;
-			background: none;
-		}
-
-		&:hover:not(:disabled) {
-			background-color: $gray-700;
-		}
-	}
+.edit-site-pagination .components-button.is-tertiary {
+	width: $button-size-compact;
+	height: $button-size-compact;
+	justify-content: center;
 }