From b1aff9af2954f00a4586a8492f8eb541c5091150 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 5 Dec 2023 22:12:26 +1100 Subject: [PATCH 01/13] first commit --- .../global-styles/screen-revisions/index.js | 203 +++++++++--------- .../use-global-styles-revisions.js | 115 ++++++---- .../components/page-patterns/patterns-list.js | 2 +- .../src/components/page-patterns/style.scss | 26 --- .../pagination.js => pagination/index.js} | 8 +- .../src/components/pagination/style.scss | 25 +++ packages/edit-site/src/style.scss | 1 + 7 files changed, 202 insertions(+), 178 deletions(-) rename packages/edit-site/src/components/{page-patterns/pagination.js => pagination/index.js} (92%) create mode 100644 packages/edit-site/src/components/pagination/style.scss 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 048a1e664e1dfb..0f52cbda221ee9 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 @@ -3,13 +3,11 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { - Button, __experimentalUseNavigator as useNavigator, __experimentalConfirmDialog as ConfirmDialog, Spinner, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; import { useContext, useState, useEffect } from '@wordpress/element'; import { privateApis as blockEditorPrivateApis, @@ -27,47 +25,39 @@ import { store as editSiteStore } from '../../../store'; import useGlobalStylesRevisions from './use-global-styles-revisions'; import RevisionsButtons from './revisions-buttons'; import StyleBook from '../../style-book'; +import Pagination from '../../pagination'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); +const PAGE_SIZE = 10; + function ScreenRevisions() { const { goTo } = useNavigator(); const { user: currentEditorGlobalStyles, setUserConfig } = useContext( GlobalStylesContext ); - const { blocks, editorCanvasContainerView, revisionsCount } = useSelect( - ( select ) => { - const { - getEntityRecord, - __experimentalGetCurrentGlobalStylesId, - __experimentalGetDirtyEntityRecords, - } = select( coreStore ); - const isDirty = __experimentalGetDirtyEntityRecords().length > 0; - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStyles = globalStylesId - ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) - : undefined; - let _revisionsCount = - globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0; - // one for the reset item. - _revisionsCount++; - // one for any dirty changes (unsaved). - if ( isDirty ) { - _revisionsCount++; - } - return { - editorCanvasContainerView: unlock( - select( editSiteStore ) - ).getEditorCanvasContainerView(), - blocks: select( blockEditorStore ).getBlocks(), - revisionsCount: _revisionsCount, - }; - }, + const { blocks, editorCanvasContainerView } = useSelect( + ( select ) => ( { + editorCanvasContainerView: unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), + blocks: select( blockEditorStore ).getBlocks(), + } ), [] ); - const { revisions, isLoading, hasUnsavedChanges } = - useGlobalStylesRevisions(); + const [ currentPage, setCurrentPage ] = useState( 1 ); + const [ currentRevisions, setCurrentRevisions ] = useState( [] ); + const { revisions, isLoading, hasUnsavedChanges, revisionsCount } = + useGlobalStylesRevisions( { + query: { + per_page: PAGE_SIZE, + page: currentPage, + }, + } ); + + const numPages = Math.ceil( revisionsCount / PAGE_SIZE ); + const [ currentlySelectedRevision, setCurrentlySelectedRevision ] = useState( currentEditorGlobalStyles ); const [ @@ -114,6 +104,12 @@ function ScreenRevisions() { } }, [ editorCanvasContainerView ] ); + useEffect( () => { + if ( ! isLoading && revisions.length ) { + setCurrentRevisions( revisions ); + } + }, [ revisions, isLoading ] ); + const firstRevision = revisions[ 0 ]; const currentlySelectedRevisionId = currentlySelectedRevision?.id; const shouldSelectFirstItem = @@ -141,8 +137,10 @@ 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; - const shouldShowRevisions = ! isLoading && revisions.length; + !! currentlySelectedRevisionId && + currentlySelectedRevisionId !== 'unsaved' && + ! selectedRevisionMatchesEditorStyles; + const hasRevisions = !! currentRevisions.length; return ( <> @@ -157,83 +155,74 @@ function ScreenRevisions() { ) } onBack={ onCloseRevisions } /> - { isLoading && ( + { ! hasRevisions && ( ) } - { editorCanvasContainerView === - 'global-styles-revisions:style-book' ? ( - {} } - onClose={ () => { - setEditorCanvasContainerView( - 'global-styles-revisions' - ); - } } - /> - ) : ( - - ) } - { shouldShowRevisions && ( - <> -
- + { hasRevisions && + ( editorCanvasContainerView === + 'global-styles-revisions:style-book' ? ( + {} } + onClose={ () => { + setEditorCanvasContainerView( + 'global-styles-revisions' + ); + } } /> - { isLoadButtonEnabled && ( - - - - ) } -
- { isLoadingRevisionWithUnsavedChanges && ( - - restoreRevision( currentlySelectedRevision ) - } - onCancel={ () => - setIsLoadingRevisionWithUnsavedChanges( false ) - } - > - { __( - 'Any unsaved changes will be lost when you apply this revision.' + ) : ( + + ) ) } +
+ + hasUnsavedChanges + ? setIsLoadingRevisionWithUnsavedChanges( true ) + : restoreRevision( currentlySelectedRevision ) + } + /> +
+ { numPages > 1 && ( + + - ) } - - ) } + /> + + ) } + { 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/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js index bacc79a97cb6de..09f9c98ff10417 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js @@ -19,7 +19,9 @@ const SITE_EDITOR_AUTHORS_QUERY = { }; const EMPTY_ARRAY = []; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); -export default function useGlobalStylesRevisions() { +export default function useGlobalStylesRevisions( { + query = { per_page: 100, page: 1 }, +} ) { const { user: userConfig } = useContext( GlobalStylesContext ); const { authors, @@ -27,47 +29,64 @@ export default function useGlobalStylesRevisions() { isDirty, revisions, isLoadingGlobalStylesRevisions, - } = useSelect( ( select ) => { - const { - __experimentalGetDirtyEntityRecords, - getCurrentUser, - getUsers, - getRevisions, - __experimentalGetCurrentGlobalStylesId, - isResolving, - } = select( coreStore ); - const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); - const _currentUser = getCurrentUser(); - const _isDirty = dirtyEntityRecords.length > 0; - const query = { - per_page: 100, - }; - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStylesRevisions = - getRevisions( 'root', 'globalStyles', globalStylesId, query ) || - EMPTY_ARRAY; - const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY; - const _isResolving = isResolving( 'getRevisions', [ - 'root', - 'globalStyles', - globalStylesId, - query, - ] ); - return { - authors: _authors, - currentUser: _currentUser, - isDirty: _isDirty, - revisions: globalStylesRevisions, - isLoadingGlobalStylesRevisions: _isResolving, - }; - }, [] ); + revisionsCount, + } = useSelect( + ( select ) => { + const { + __experimentalGetDirtyEntityRecords, + getCurrentUser, + getUsers, + getRevisions, + __experimentalGetCurrentGlobalStylesId, + getEntityRecord, + isResolving, + } = select( coreStore ); + const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); + const _currentUser = getCurrentUser(); + const _isDirty = dirtyEntityRecords.length > 0; + const globalStylesId = __experimentalGetCurrentGlobalStylesId(); + const globalStyles = globalStylesId + ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) + : undefined; + let _revisionsCount = + globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0; + // one for the reset item. + _revisionsCount++; + // one for any dirty changes (unsaved). + if ( _isDirty ) { + _revisionsCount++; + } + const globalStylesRevisions = + getRevisions( 'root', 'globalStyles', globalStylesId, query ) || + EMPTY_ARRAY; + const _authors = + getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY; + const _isResolving = isResolving( 'getRevisions', [ + 'root', + 'globalStyles', + globalStylesId, + query, + ] ); + return { + authors: _authors, + currentUser: _currentUser, + isDirty: _isDirty, + revisions: globalStylesRevisions, + isLoadingGlobalStylesRevisions: _isResolving, + revisionsCount: _revisionsCount, + }; + }, + [ query ] + ); return useMemo( () => { let _modifiedRevisions = []; + // Add 1 for the "reset to theme defaults" revision we tack onto the last page. if ( ! authors.length || isLoadingGlobalStylesRevisions ) { return { revisions: _modifiedRevisions, hasUnsavedChanges: isDirty, isLoading: true, + revisionsCount: 0, }; } @@ -81,9 +100,14 @@ export default function useGlobalStylesRevisions() { }; } ); - if ( _modifiedRevisions.length ) { + const fetchedRevisionsCount = revisions.length; + + if ( fetchedRevisionsCount ) { // Flags the most current saved revision. - if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) { + if ( + _modifiedRevisions[ 0 ].id !== 'unsaved' && + query.page === 1 + ) { _modifiedRevisions[ 0 ].isLatest = true; } @@ -92,7 +116,8 @@ export default function useGlobalStylesRevisions() { isDirty && userConfig && Object.keys( userConfig ).length > 0 && - currentUser + currentUser && + query.page === 1 ) { const unsavedRevision = { id: 'unsaved', @@ -108,17 +133,21 @@ export default function useGlobalStylesRevisions() { _modifiedRevisions.unshift( unsavedRevision ); } - _modifiedRevisions.push( { - id: 'parent', - styles: {}, - settings: {}, - } ); + if ( query.page === Math.ceil( revisionsCount / query.per_page ) ) { + // Adds an item for the default theme styles. + _modifiedRevisions.push( { + id: 'parent', + styles: {}, + settings: {}, + } ); + } } return { revisions: _modifiedRevisions, hasUnsavedChanges: isDirty, isLoading: false, + revisionsCount, }; }, [ isDirty, diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index 6015fbbf4caf34..0f286ec40070f8 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -31,7 +31,7 @@ import usePatterns from './use-patterns'; import SidebarButton from '../sidebar-button'; import { unlock } from '../../lock-unlock'; import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants'; -import Pagination from './pagination'; +import Pagination from '../pagination'; const { useLocation, useHistory } = unlock( routerPrivateApis ); diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d02b82ff2560d0..5533d14765676d 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -67,32 +67,6 @@ background: $gray-700; color: $gray-100; } - - .edit-site-patterns__grid-pagination { - border-top: 1px solid $gray-800; - background: $gray-900; - padding: $grid-unit-30 $grid-unit-40; - position: sticky; - bottom: 0; - z-index: z-index(".edit-site-patterns__grid-pagination"); - - .components-button.is-tertiary { - width: $button-size-compact; - height: $button-size-compact; - color: $gray-100; - background-color: $gray-800; - justify-content: center; - - &:disabled { - color: $gray-600; - background: none; - } - - &:hover:not(:disabled) { - background-color: $gray-700; - } - } - } } .edit-site-patterns__header { diff --git a/packages/edit-site/src/components/page-patterns/pagination.js b/packages/edit-site/src/components/pagination/index.js similarity index 92% rename from packages/edit-site/src/components/page-patterns/pagination.js rename to packages/edit-site/src/components/pagination/index.js index 702e24cd31b7f0..8581c7dde9f322 100644 --- a/packages/edit-site/src/components/page-patterns/pagination.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -13,13 +18,14 @@ export default function Pagination( { numPages, changePage, totalItems, + className, } ) { return ( { diff --git a/packages/edit-site/src/components/pagination/style.scss b/packages/edit-site/src/components/pagination/style.scss new file mode 100644 index 00000000000000..aee0fb10a1d123 --- /dev/null +++ b/packages/edit-site/src/components/pagination/style.scss @@ -0,0 +1,25 @@ +.edit-site--pagination { + border-top: 1px solid $gray-800; + background: $gray-900; + padding: $grid-unit-30 $grid-unit-40; + position: sticky; + bottom: 0; + z-index: z-index(".edit-site-patterns__grid-pagination"); + + .components-button.is-tertiary { + width: $button-size-compact; + height: $button-size-compact; + color: $gray-100; + background-color: $gray-800; + justify-content: center; + + &:disabled { + color: $gray-600; + background: none; + } + + &:hover:not(:disabled) { + background-color: $gray-700; + } + } +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 9e9cdbc6684b81..53c4f672ed8c23 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -48,6 +48,7 @@ @import "./components/resizable-frame/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; @import "./components/global-styles/font-library-modal/style.scss"; +@import "./components/pagination/style.scss"; body.js #wpadminbar { display: none; From 9eb9220d95004cbac65dda796c6008433de62c7a Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 7 Dec 2023 19:00:16 +1100 Subject: [PATCH 02/13] Testing out lockin pagination to the bottom and giving every item an Apply button --- .../screen-revisions/revisions-buttons.js | 34 ++++++++++++++----- .../use-global-styles-revisions.js | 11 +++--- .../components/page-patterns/patterns-list.js | 1 + .../src/components/page-patterns/style.scss | 13 +++++++ .../src/components/pagination/style.scss | 9 ----- 5 files changed, 45 insertions(+), 23 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 index 9eff635bbc4a6a..8f154823a40659 100644 --- 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 @@ -114,7 +114,8 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange, - canApplyRevision, + canSelectedRevisionBeRestored, + onApplyRevision, } ) { const { currentThemeName, currentUser } = useSelect( ( select ) => { const { getCurrentTheme, getCurrentUser } = select( coreStore ); @@ -148,22 +149,26 @@ function RevisionsButtons( { const revisionAuthor = isUnsaved ? currentUser : author; const authorDisplayName = revisionAuthor?.name || __( 'User' ); const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ]; - const isFirstItem = index === 0; const isSelected = selectedRevisionId ? selectedRevisionId === id - : isFirstItem; - const areStylesEqual = ! canApplyRevision && isSelected; - const isReset = 'parent' === id; + : index === 0; + const areStylesEqual = + ! canSelectedRevisionBeRestored && isSelected; + const isParent = 'parent' === id; const modifiedDate = getDate( modified ); + const formattedModifiedDate = dateI18n( + datetimeAbbreviated, + modifiedDate + ); const displayDate = modified && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS - ? dateI18n( datetimeAbbreviated, modifiedDate ) + ? formattedModifiedDate : humanTimeDiff( modified ); const revisionLabel = getRevisionLabel( id, authorDisplayName, - dateI18n( datetimeAbbreviated, modifiedDate ), + formattedModifiedDate, areStylesEqual ); @@ -174,7 +179,7 @@ function RevisionsButtons( { { 'is-selected': isSelected, 'is-active': areStylesEqual, - 'is-reset': isReset, + 'is-reset': isParent, } ) } key={ id } @@ -187,7 +192,7 @@ function RevisionsButtons( { } } aria-label={ revisionLabel } > - { isReset ? ( + { isParent ? ( { __( 'Default styles' ) } @@ -229,6 +234,17 @@ function RevisionsButtons( { ) } + { isSelected && canSelectedRevisionBeRestored && ( + + ) } ); } ) } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js index 09f9c98ff10417..37da07936697e7 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js @@ -79,11 +79,12 @@ export default function useGlobalStylesRevisions( { [ query ] ); return useMemo( () => { - let _modifiedRevisions = []; - // Add 1 for the "reset to theme defaults" revision we tack onto the last page. - if ( ! authors.length || isLoadingGlobalStylesRevisions ) { + if ( + ! authors.length || + ( isLoadingGlobalStylesRevisions && ! revisions?.length ) + ) { return { - revisions: _modifiedRevisions, + revisions: EMPTY_ARRAY, hasUnsavedChanges: isDirty, isLoading: true, revisionsCount: 0, @@ -91,7 +92,7 @@ export default function useGlobalStylesRevisions( { } // Adds author details to each revision. - _modifiedRevisions = revisions.map( ( revision ) => { + const _modifiedRevisions = revisions.map( ( revision ) => { return { ...revision, author: authors.find( diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index 0f286ec40070f8..91ca083607674d 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -217,6 +217,7 @@ export default function PatternsList( { categoryId, type } ) { { numPages > 1 && ( Date: Mon, 11 Dec 2023 15:38:53 +1100 Subject: [PATCH 03/13] Remove count from heading - it's in the pagination Fudge the button --- .../src/components/global-styles/screen-revisions/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 a127142ac60edb..39a33fb663bea8 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 @@ -95,7 +95,9 @@ .edit-site-global-styles-screen-revisions__button { justify-content: center; - width: 100%; + width: 80%; + margin-left: 10%; + margin-bottom: $grid-unit-10; } .edit-site-global-styles-screen-revisions__description { From 6ca7becd4624a899135829d59571e91eba40e1ae Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 14 Dec 2023 14:25:26 +1100 Subject: [PATCH 04/13] Making the pagination sticky Creating an internal state for revisions to avoid refreshing --- .../screen-revisions/revisions-buttons.js | 34 ++++----------- .../global-styles/screen-revisions/style.scss | 42 ++++++++++++++++++- .../use-global-styles-revisions.js | 2 +- .../src/components/pagination/index.js | 13 +++--- .../src/components/pagination/style.scss | 24 +++++------ 5 files changed, 70 insertions(+), 45 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 index 8f154823a40659..9eff635bbc4a6a 100644 --- 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 @@ -114,8 +114,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange, - canSelectedRevisionBeRestored, - onApplyRevision, + canApplyRevision, } ) { const { currentThemeName, currentUser } = useSelect( ( select ) => { const { getCurrentTheme, getCurrentUser } = select( coreStore ); @@ -149,26 +148,22 @@ function RevisionsButtons( { const revisionAuthor = isUnsaved ? currentUser : author; const authorDisplayName = revisionAuthor?.name || __( 'User' ); const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ]; + const isFirstItem = index === 0; const isSelected = selectedRevisionId ? selectedRevisionId === id - : index === 0; - const areStylesEqual = - ! canSelectedRevisionBeRestored && isSelected; - const isParent = 'parent' === id; + : isFirstItem; + const areStylesEqual = ! canApplyRevision && isSelected; + const isReset = 'parent' === id; const modifiedDate = getDate( modified ); - const formattedModifiedDate = dateI18n( - datetimeAbbreviated, - modifiedDate - ); const displayDate = modified && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS - ? formattedModifiedDate + ? dateI18n( datetimeAbbreviated, modifiedDate ) : humanTimeDiff( modified ); const revisionLabel = getRevisionLabel( id, authorDisplayName, - formattedModifiedDate, + dateI18n( datetimeAbbreviated, modifiedDate ), areStylesEqual ); @@ -179,7 +174,7 @@ function RevisionsButtons( { { 'is-selected': isSelected, 'is-active': areStylesEqual, - 'is-reset': isParent, + 'is-reset': isReset, } ) } key={ id } @@ -192,7 +187,7 @@ function RevisionsButtons( { } } aria-label={ revisionLabel } > - { isParent ? ( + { isReset ? ( { __( 'Default styles' ) } @@ -234,17 +229,6 @@ function RevisionsButtons( { ) } - { isSelected && canSelectedRevisionBeRestored && ( - - ) } ); } ) } 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 39a33fb663bea8..af78126b28f6df 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,6 +1,6 @@ .edit-site-global-styles-screen-revisions { - margin: $grid-unit-20; + margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20; } .edit-site-global-styles-screen-revisions__revisions-list { @@ -11,6 +11,10 @@ } } +.edit-site-global-styles-header__description { + margin-bottom: 0; +} + .edit-site-global-styles-screen-revisions__revision-item { position: relative; cursor: pointer; @@ -139,3 +143,39 @@ line-height: $default-line-height; } +.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination { + justify-content: space-between; + gap: 2px; + padding: $grid-unit-20 $grid-unit-20 $grid-unit-15 $grid-unit-20; + position: sticky; + top: 0; + background: $white; + z-index: 10; + border-bottom: 1px solid $gray-400; + + .edit-site-pagination__total { + font-weight: 600; + font-color: $gray-900; + } + + .components-text { + font-size: 12px; + } + .components-button.is-tertiary { + 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/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js index 37da07936697e7..d532d367ea43ae 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js @@ -87,7 +87,7 @@ export default function useGlobalStylesRevisions( { revisions: EMPTY_ARRAY, hasUnsavedChanges: isDirty, isLoading: true, - revisionsCount: 0, + revisionsCount, }; } diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js index 8581c7dde9f322..795324b532e09d 100644 --- a/packages/edit-site/src/components/pagination/index.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -19,15 +19,16 @@ export default function Pagination( { changePage, totalItems, className, + disabled = false, } ) { return ( - + { // translators: %s: Total number of patterns. sprintf( @@ -41,7 +42,7 @@ export default function Pagination( { + { canApplyRevision && isSelected && ( + + ) } ); } ) } 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 aeab634f7c2b6c..b0e34306509628 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 @@ -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/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js index d532d367ea43ae..b51ac149f19fee 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js +++ b/packages/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 index b815fc536c4acf..8995a0d25c96cf 100644 --- 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 index 795324b532e09d..e7e40366fd7d30 100644 --- 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 ( ) } 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 4eebe93d1db3e0..313d6cc1f9cfd1 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 @@ -95,15 +95,10 @@ } } -.edit-site-global-styles-screen-revisions__apply-button.is-secondary { - justify-content: center; - 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__apply-button.is-primary { + align-self: flex-start; + // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button. + margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50; } .edit-site-global-styles-screen-revisions__description { @@ -146,15 +141,6 @@ line-height: $default-line-height; } -.edit-site-global-styles-screen-revisions__footer { - padding: $grid-unit-20 $grid-unit-20 $grid-unit-15 $grid-unit-20; - position: sticky; - bottom: 0; - background: $white; - z-index: 10; - border-top: 1px solid $gray-400; -} - .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination { justify-content: space-between; gap: 2px; @@ -172,6 +158,15 @@ .components-button.is-tertiary { width: $button-size-small; height: $button-size-small; - outline: 1px solid; + font-size: 28px; + font-weight: 200; + color: $gray-900; + margin-bottom: $grid-unit-05; + } + .components-button.is-tertiary:disabled { + color: $gray-600; + } + .components-button.is-tertiary:hover { + background: transparent; } } diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js index e7e40366fd7d30..0d556c5d250181 100644 --- a/packages/edit-site/src/components/pagination/index.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -25,6 +25,8 @@ export default function Pagination( { return ( Date: Tue, 19 Dec 2023 13:35:38 +1100 Subject: [PATCH 09/13] refactored e2e tests to have an open revision method added pagination tests --- .../src/components/pagination/index.js | 3 +- .../user-global-styles-revisions.spec.js | 68 +++++++++++++++---- 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js index 0d556c5d250181..fa347d2caaad34 100644 --- a/packages/edit-site/src/components/pagination/index.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -21,12 +21,13 @@ export default function Pagination( { className, disabled = false, buttonVariant = 'tertiary', + label = __( 'Pagination Navigation' ), } ) { return ( { - await use( new UserGlobalStylesRevisions( { page, requestUtils } ) ); + userGlobalStylesRevisions: async ( + { editor, page, requestUtils }, + use + ) => { + await use( + new UserGlobalStylesRevisions( { editor, page, requestUtils } ) + ); }, } ); test.describe( 'Global styles revisions', () => { + let stylesPostId; test.beforeAll( async ( { requestUtils } ) => { await Promise.all( [ requestUtils.activateTheme( 'emptytheme' ), requestUtils.deleteAllTemplates( 'wp_template' ), requestUtils.deleteAllTemplates( 'wp_template_part' ), ] ); + stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId(); } ); test.afterAll( async ( { requestUtils } ) => { @@ -34,20 +41,12 @@ test.describe( 'Global styles revisions', () => { await editor.canvas.locator( 'body' ).click(); const currentRevisions = await userGlobalStylesRevisions.getGlobalStylesRevisions(); + // Create a revision: change a style and save it. + await userGlobalStylesRevisions.saveRevision( stylesPostId, { + color: { background: 'blue' }, + } ); await userGlobalStylesRevisions.openStylesPanel(); - // Change a style and save it. - await page.getByRole( 'button', { name: 'Colors styles' } ).click(); - - await page - .getByRole( 'button', { name: 'Color Background styles' } ) - .click(); - await page - .getByRole( 'option', { name: 'Color: Cyan bluish gray' } ) - .click( { force: true } ); - - await editor.saveSiteEditorEntities(); - // Now there should be enough revisions to show the revisions UI. await page.getByRole( 'button', { name: 'Revisions' } ).click(); @@ -189,11 +188,34 @@ test.describe( 'Global styles revisions', () => { page.getByLabel( 'Global styles revisions list' ) ).toBeHidden(); } ); + + test( 'should paginate', async ( { + page, + editor, + userGlobalStylesRevisions, + } ) => { + await editor.canvas.locator( 'body' ).click(); + // Create > 10 revisions to display pagination navigation component. + for ( let i = 9; i < 21; i++ ) { + await userGlobalStylesRevisions.saveRevision( stylesPostId, { + typography: { fontSize: `${ i }px` }, + } ); + } + await userGlobalStylesRevisions.openStylesPanel(); + await page.getByRole( 'button', { name: 'Revisions' } ).click(); + const pagination = page.getByLabel( + 'Global Styles pagination navigation' + ); + await expect( pagination ).toContainText( '1 of 2' ); + await pagination.getByRole( 'button', { name: 'Next page' } ).click(); + await expect( pagination ).toContainText( '2 of 2' ); + } ); } ); class UserGlobalStylesRevisions { - constructor( { page, requestUtils } ) { + constructor( { editor, page, requestUtils } ) { this.page = page; + this.editor = editor; this.requestUtils = requestUtils; } @@ -214,4 +236,20 @@ class UserGlobalStylesRevisions { .getByRole( 'button', { name: 'Styles' } ) .click(); } + + async saveRevision( stylesPostId, styles = {}, settings = {} ) { + await this.page.evaluate( + async ( [ _stylesPostId, _styles, _settings ] ) => { + window.wp.data + .dispatch( 'core' ) + .editEntityRecord( 'root', 'globalStyles', _stylesPostId, { + id: _stylesPostId, + settings: _settings, + styles: _styles, + } ); + }, + [ stylesPostId, styles, settings ] + ); + await this.editor.saveSiteEditorEntities(); + } } From 7200df530f26145a01cd17a37bb82a8b36d0e877 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 19 Dec 2023 14:02:32 +1100 Subject: [PATCH 10/13] Added unit tests --- .../test/use-global-styles-revisions.js | 67 +++++++++++++++++++ .../use-global-styles-revisions.js | 40 +++++------ 2 files changed, 83 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js index 4b03e38fe34d27..0262086e58b2ad 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js @@ -50,6 +50,7 @@ describe( 'useGlobalStylesRevisions', () => { }, ], isLoadingGlobalStylesRevisions: false, + revisionsCount: 1, }; it( 'returns loaded revisions with no unsaved changes', () => { @@ -158,4 +159,70 @@ describe( 'useGlobalStylesRevisions', () => { expect( hasUnsavedChanges ).toBe( false ); expect( revisions ).toEqual( [] ); } ); + + it( 'should prepend unsaved changes item and append reset item to paginated results', () => { + useSelect.mockImplementation( () => ( { + ...selectValue, + revisionsCount: 2, + isDirty: true, + } ) ); + + // Prepend unsaved changes item to paginated results. + const { result: resultPrepend } = renderHook( () => + useGlobalStylesRevisions( { + query: { + per_page: 1, + page: 1, + }, + } ) + ); + expect( resultPrepend.current.revisions ).toEqual( [ + { + author: { + avatar_urls: {}, + name: 'fred', + }, + id: 'unsaved', + modified: resultPrepend.current.revisions[ 0 ].modified, + settings: 'cake', + styles: 'ice-cream', + }, + { + author: { + id: 4, + name: 'sam', + }, + id: 1, + isLatest: true, + settings: {}, + styles: {}, + }, + ] ); + + // Append reset item to paginated results. + const { result: resultAppend } = renderHook( () => + useGlobalStylesRevisions( { + query: { + per_page: 1, + page: 2, + }, + } ) + ); + expect( resultAppend.current.revisions ).toEqual( [ + { + author: { + id: 4, + name: 'sam', + }, + id: 1, + settings: {}, + styles: {}, + }, + { + id: 'parent', + settings: {}, + styles: {}, + }, + ] ); + } ); } ); diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js index b51ac149f19fee..2cd0b3b7bdea60 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js @@ -17,12 +17,12 @@ const SITE_EDITOR_AUTHORS_QUERY = { context: 'view', capabilities: [ 'edit_theme_options' ], }; +const DEFAULT_QUERY = { per_page: 100, page: 1 }; const EMPTY_ARRAY = []; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); -export default function useGlobalStylesRevisions( { - query = { per_page: 100, page: 1 }, -} ) { +export default function useGlobalStylesRevisions( { query } = {} ) { const { user: userConfig } = useContext( GlobalStylesContext ); + const _query = { ...DEFAULT_QUERY, ...query }; const { authors, currentUser, @@ -50,27 +50,20 @@ export default function useGlobalStylesRevisions( { : undefined; const _revisionsCount = globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0; - // 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; + getRevisions( + 'root', + 'globalStyles', + globalStylesId, + _query + ) || EMPTY_ARRAY; const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY; const _isResolving = isResolving( 'getRevisions', [ 'root', 'globalStyles', globalStylesId, - query, + _query, ] ); return { authors: _authors, @@ -84,10 +77,7 @@ export default function useGlobalStylesRevisions( { [ query ] ); return useMemo( () => { - if ( - ! authors.length || - ( isLoadingGlobalStylesRevisions && ! revisions?.length ) - ) { + if ( ! authors.length || isLoadingGlobalStylesRevisions ) { return { revisions: EMPTY_ARRAY, hasUnsavedChanges: isDirty, @@ -112,7 +102,7 @@ export default function useGlobalStylesRevisions( { // Flags the most current saved revision. if ( _modifiedRevisions[ 0 ].id !== 'unsaved' && - query.page === 1 + _query.page === 1 ) { _modifiedRevisions[ 0 ].isLatest = true; } @@ -123,7 +113,7 @@ export default function useGlobalStylesRevisions( { userConfig && Object.keys( userConfig ).length > 0 && currentUser && - query.page === 1 + _query.page === 1 ) { const unsavedRevision = { id: 'unsaved', @@ -139,7 +129,9 @@ export default function useGlobalStylesRevisions( { _modifiedRevisions.unshift( unsavedRevision ); } - if ( query.page === Math.ceil( revisionsCount / query.per_page ) ) { + if ( + _query.page === Math.ceil( revisionsCount / _query.per_page ) + ) { // Adds an item for the default theme styles. _modifiedRevisions.push( { id: 'parent', From 42eb5178f2b820fd0b06d34a3216661bbbbbebce Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 19 Dec 2023 15:42:28 +1100 Subject: [PATCH 11/13] Display text if a revision can't be applied. --- .../screen-revisions/revisions-buttons.js | 30 ++++++++++++------- .../global-styles/screen-revisions/style.scss | 9 +++++- 2 files changed, 27 insertions(+), 12 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 index 413fd90987c9d1..db7a6877fef10e 100644 --- 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 @@ -231,17 +231,25 @@ function RevisionsButtons( { ) } - { canApplyRevision && isSelected && ( - - ) } + { isSelected && + ( areStylesEqual ? ( +

+ { __( + 'These styles are already applied to your site.' + ) } +

+ ) : ( + + ) ) } ); } ) } 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 313d6cc1f9cfd1..26f056a1e87a78 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 @@ -95,12 +95,19 @@ } } -.edit-site-global-styles-screen-revisions__apply-button.is-primary { +.edit-site-global-styles-screen-revisions__apply-button.is-primary, +.edit-site-global-styles-screen-revisions__applied-text { align-self: flex-start; // Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button. margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50; } +.edit-site-global-styles-screen-revisions__applied-text { + color: $gray-600; + font-size: 12px; + font-style: italic; +} + .edit-site-global-styles-screen-revisions__description { display: flex; flex-direction: column; From 6bc135087f1bfa18444449845cd4d070fc95f570 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Dec 2023 10:07:29 +1100 Subject: [PATCH 12/13] Fix Safari rendering. --- .../src/components/global-styles/screen-revisions/style.scss | 4 ++++ 1 file changed, 4 insertions(+) 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 26f056a1e87a78..b2b39f658014cf 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 @@ -161,6 +161,9 @@ .components-text { font-size: 12px; + // `will-change` is required because something about flex props prevents + // Safari from rendering the page / total text. + will-change: opacity; } .components-button.is-tertiary { width: $button-size-small; @@ -177,3 +180,4 @@ background: transparent; } } + From cc20a3168431c5757f0455c62179b69e393b570c Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Dec 2023 11:58:07 +1100 Subject: [PATCH 13/13] Prevent x scrolling on Safari and Firefox. --- .../global-styles/screen-revisions/style.scss | 4 ++++ .../sidebar-edit-mode/sidebar-fixed-bottom.js | 14 ++++++++++++-- .../src/components/sidebar-edit-mode/style.scss | 3 ++- 3 files changed, 18 insertions(+), 3 deletions(-) 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 b2b39f658014cf..97d27282f61afa 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,6 +1,7 @@ .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 { @@ -181,3 +182,6 @@ } } +.edit-site-global-styles-screen-revisions__footer { + height: $grid-unit-60; +} 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 index 56e205bd330286..46f25bf7a19146 100644 --- 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 @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -13,10 +18,15 @@ const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom'; const { Slot: SidebarFixedBottomSlot, Fill: SidebarFixedBottomFill } = createPrivateSlotFill( SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME ); -export default function SidebarFixedBottom( { children } ) { +export default function SidebarFixedBottom( { className, children } ) { return ( -
+
{ children }
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 623741d1123d71..1bfb87aafa15c5 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss @@ -101,7 +101,8 @@ } .edit-site-sidebar-fixed-bottom-slot { - position: sticky; + position: absolute; + min-width: 100%; bottom: 0; background: $white; padding: $grid-unit-15;