Let's fix the pagination to the bottom of the sidebar panel using CSS.

We can now delete the Slot Container, which is not used elsewhere.
WordPress · Dec 21, 2023 · a0fa769 · a0fa769
1 parent 0167c53
commit a0fa769
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 122 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -52,7 +52,6 @@ import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
@@ -266,7 +265,6 @@ export default function Editor( { isLoading } ) {
 							isRightSidebarOpen && (
 								<>
 									<ComplementaryArea.Slot scope="core/edit-site" />
-									<SidebarFixedBottomSlot />
 								</>
 							)
 						}

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
@@ -20,7 +20,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';
@@ -158,71 +157,65 @@ function ScreenRevisions() {
 			{ ! hasRevisions && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
-			<>
-				{ hasRevisions &&
-					( editorCanvasContainerView ===
-					'global-styles-revisions:style-book' ? (
-						<StyleBook
-							userConfig={ currentlySelectedRevision }
-							isSelected={ () => {} }
-							onClose={ () => {
-								setEditorCanvasContainerView(
-									'global-styles-revisions'
-								);
-							} }
-						/>
-					) : (
-						<Revisions
-							blocks={ blocks }
-							userConfig={ currentlySelectedRevision }
-							closeButtonLabel={ __( 'Close revisions' ) }
-						/>
-					) ) }
-				<div className="edit-site-global-styles-screen-revisions">
-					<RevisionsButtons
-						onChange={ selectRevision }
-						selectedRevisionId={ currentlySelectedRevisionId }
-						userRevisions={ currentRevisions }
-						canApplyRevision={ isLoadButtonEnabled }
-						onApplyRevision={ () =>
-							hasUnsavedChanges
-								? setIsLoadingRevisionWithUnsavedChanges( true )
-								: restoreRevision( currentlySelectedRevision )
-						}
+			{ hasRevisions &&
+				( editorCanvasContainerView ===
+				'global-styles-revisions:style-book' ? (
+					<StyleBook
+						userConfig={ currentlySelectedRevision }
+						isSelected={ () => {} }
+						onClose={ () => {
+							setEditorCanvasContainerView(
+								'global-styles-revisions'
+							);
+						} }
+					/>
+				) : (
+					<Revisions
+						blocks={ blocks }
+						userConfig={ currentlySelectedRevision }
+						closeButtonLabel={ __( 'Close revisions' ) }
+					/>
+				) ) }
+			<RevisionsButtons
+				onChange={ selectRevision }
+				selectedRevisionId={ currentlySelectedRevisionId }
+				userRevisions={ currentRevisions }
+				canApplyRevision={ isLoadButtonEnabled }
+				onApplyRevision={ () =>
+					hasUnsavedChanges
+						? setIsLoadingRevisionWithUnsavedChanges( true )
+						: restoreRevision( currentlySelectedRevision )
+				}
+			/>
+			{ numPages > 1 && (
+				<div className="edit-site-global-styles-screen-revisions__footer">
+					<Pagination
+						className="edit-site-global-styles-screen-revisions__pagination"
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ setCurrentPage }
+						totalItems={ revisionsCount }
+						disabled={ isLoading }
+						label={ __( 'Global Styles pagination navigation' ) }
 					/>
 				</div>
-				{ numPages > 1 && (
-					<SidebarFixedBottom className="edit-site-global-styles-screen-revisions__footer">
-						<Pagination
-							className="edit-site-global-styles-screen-revisions__pagination"
-							currentPage={ currentPage }
-							numPages={ numPages }
-							changePage={ setCurrentPage }
-							totalItems={ revisionsCount }
-							disabled={ isLoading }
-							label={ __(
-								'Global Styles pagination navigation'
-							) }
-						/>
-					</SidebarFixedBottom>
-				) }
-				{ isLoadingRevisionWithUnsavedChanges && (
-					<ConfirmDialog
-						isOpen={ isLoadingRevisionWithUnsavedChanges }
-						confirmButtonText={ __( 'Apply' ) }
-						onConfirm={ () =>
-							restoreRevision( currentlySelectedRevision )
-						}
-						onCancel={ () =>
-							setIsLoadingRevisionWithUnsavedChanges( false )
-						}
-					>
-						{ __(
-							'Any unsaved changes will be lost when you apply this revision.'
-						) }
-					</ConfirmDialog>
-				) }
-			</>
+			) }
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( 'Apply' ) }
+					onConfirm={ () =>
+						restoreRevision( currentlySelectedRevision )
+					}
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+				>
+					{ __(
+						'Any unsaved changes will be lost when you apply this revision.'
+					) }
+				</ConfirmDialog>
+			) }
 		</>
 	);
 }

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
@@ -1,12 +1,8 @@
-
-.edit-site-global-styles-screen-revisions {
-	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
-	padding-bottom: $grid-unit-60;
-}
-
 .edit-site-global-styles-screen-revisions__revisions-list {
 	list-style: none;
-	margin: 0;
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+	// Forces subsequent flex items to the bottom.
+	flex-grow: 1;
 	li {
 		margin-bottom: 0;
 	}
@@ -167,12 +163,11 @@
 		will-change: opacity;
 	}
 	.components-button.is-tertiary {
-		width: $button-size-small;
-		height: $button-size-small;
 		font-size: 28px;
 		font-weight: 200;
 		color: $gray-900;
 		margin-bottom: $grid-unit-05;
+		line-height: 1.2;
 	}
 	.components-button.is-tertiary:disabled {
 		color: $gray-600;
@@ -183,5 +178,12 @@
 }
 
 .edit-site-global-styles-screen-revisions__footer {
-	height: $grid-unit-60;
+	height: $grid-unit-70;
+	z-index: 1;
+	position: sticky;
+	min-width: 100%;
+	bottom: 0;
+	background: $white;
+	padding: $grid-unit-15;
+	border-top: $border-width solid $gray-300;
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
@@ -99,13 +99,3 @@
 		}
 	}
 }
-
-.edit-site-sidebar-fixed-bottom-slot {
-	position: absolute;
-	min-width: 100%;
-	bottom: 0;
-	background: $white;
-	padding: $grid-unit-15;
-	border-top: $border-width solid $gray-300;
-	box-sizing: content-box;
-}