From e103a18cf94a26e6b2864387d6e2ca324e31d240 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 21 Dec 2023 14:30:53 +1100 Subject: [PATCH] Let's fix the pagination to the bottom of the sidebar panel using CSS. (#57294) We can now delete the Slot Container, which is not used elsewhere. --- .../edit-site/src/components/editor/index.js | 2 - .../global-styles/screen-revisions/index.js | 121 +++++++++--------- .../global-styles/screen-revisions/style.scss | 22 ++-- .../sidebar-edit-mode/sidebar-fixed-bottom.js | 36 ------ .../components/sidebar-edit-mode/style.scss | 10 -- 5 files changed, 69 insertions(+), 122 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 6718fc705b50b..afae1b362ee99 100644 --- 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 && ( <> - ) } 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 index 0f52cbda221ee..b1a5cdb3ce93e 100644 --- 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 && ( ) } - <> - { hasRevisions && - ( editorCanvasContainerView === - 'global-styles-revisions:style-book' ? ( - {} } - onClose={ () => { - setEditorCanvasContainerView( - 'global-styles-revisions' - ); - } } - /> - ) : ( - - ) ) } -
- - hasUnsavedChanges - ? setIsLoadingRevisionWithUnsavedChanges( true ) - : restoreRevision( currentlySelectedRevision ) - } + { hasRevisions && + ( editorCanvasContainerView === + 'global-styles-revisions:style-book' ? ( + {} } + onClose={ () => { + setEditorCanvasContainerView( + 'global-styles-revisions' + ); + } } + /> + ) : ( + + ) ) } + + hasUnsavedChanges + ? setIsLoadingRevisionWithUnsavedChanges( true ) + : restoreRevision( currentlySelectedRevision ) + } + /> + { numPages > 1 && ( +
+
- { numPages > 1 && ( - - - - ) } - { isLoadingRevisionWithUnsavedChanges && ( - - restoreRevision( currentlySelectedRevision ) - } - onCancel={ () => - setIsLoadingRevisionWithUnsavedChanges( false ) - } - > - { __( - 'Any unsaved changes will be lost when you apply this revision.' - ) } - - ) } - + ) } + { isLoadingRevisionWithUnsavedChanges && ( + + restoreRevision( currentlySelectedRevision ) + } + onCancel={ () => + setIsLoadingRevisionWithUnsavedChanges( false ) + } + > + { __( + 'Any unsaved changes will be lost when you apply this revision.' + ) } + + ) } ); } 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 index 97d27282f61af..4228f199689cb 100644 --- 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 deleted file mode 100644 index 46f25bf7a1914..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { privateApis as componentsPrivateApis } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { createPrivateSlotFill } = unlock( componentsPrivateApis ); -const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom'; -const { Slot: SidebarFixedBottomSlot, Fill: SidebarFixedBottomFill } = - createPrivateSlotFill( SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME ); - -export default function SidebarFixedBottom( { className, children } ) { - return ( - -
- { children } -
- - ); -} - -export { SidebarFixedBottomSlot }; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss index 1bfb87aafa15c..eeb5dc2d170cd 100644 --- 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; -}