Skip to content

Commit

Permalink
Let's fix the pagination to the bottom of the sidebar panel using CSS. (
Browse files Browse the repository at this point in the history 
#57294)

We can now delete the Slot Container, which is not used elsewhere.
  • Loading branch information
@ramonjd
ramonjd authored Dec 21, 2023
1 parent 891c4cf commit e103a18
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 122 deletions.
2 changes: 0 additions & 2 deletions packages/edit-site/src/components/editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -266,7 +265,6 @@ export default function Editor( { isLoading } ) {
isRightSidebarOpen && (
<>
<ComplementaryArea.Slot scope="core/edit-site" />
<SidebarFixedBottomSlot />
</>
)
}
Expand Down
121 changes: 57 additions & 64 deletions packages/edit-site/src/components/global-styles/screen-revisions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
) }
</>
);
}
Expand Down
22 changes: 12 additions & 10 deletions packages/edit-site/src/components/global-styles/screen-revisions/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
36 changes: 0 additions & 36 deletions packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js
View file

This file was deleted.

10 changes: 0 additions & 10 deletions packages/edit-site/src/components/sidebar-edit-mode/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

1 comment on commit e103a18

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in e103a18.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7283654707
📝 Reported issues:

Please sign in to comment.