Render the footer conditionally in the global styles sidebar componen…

…t so that any side effects from the footer wrapper are not rendered, e.g., styles and what not Ensure that the precise bottom margin persists if the footer isn't rendered
WordPress · Aug 1, 2023 · a747337 · a747337
1 parent f69f489
commit a747337
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 39 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -108,30 +108,10 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
-	const { revisions, isLoading } = useGlobalStylesRevisions();
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
-
-	const hasRevisions = revisionsCount >= 2;
-	const modified = revisions?.[ 0 ]?.modified;
-
-	if ( ! hasRevisions || isLoading || ! modified ) {
-		return null;
-	}
-
+function SidebarNavigationScreenGlobalStylesFooter( {
+	modifiedDateTime,
+	onClickRevisions,
+} ) {
 	return (
 		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
 			<SidebarNavigationItem
@@ -150,8 +130,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 						{ __( 'Last modified' ) }
 					</span>
 					<span>
-						<time dateTime={ modified }>
-							{ humanTimeDiff( modified ) }
+						<time dateTime={ modifiedDateTime }>
+							{ humanTimeDiff( modifiedDateTime ) }
 						</time>
 					</span>
 					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
@@ -162,6 +142,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
+	const { revisions, isLoading: isLoadingRevisions } =
+		useGlobalStylesRevisions();
 	const { openGeneralSidebar, setIsListViewOpened } =
 		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -171,15 +153,28 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const { get: getPreference } = useSelect( preferencesStore );
-	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
-		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			isViewMode: 'view' === getCanvasMode(),
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
-		};
-	}, [] );
+	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
+		( select ) => {
+			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return {
+				isViewMode: 'view' === getCanvasMode(),
+				isStyleBookOpened:
+					'style-book' === getEditorCanvasContainerView(),
+				revisionsCount:
+					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
+					0,
+			};
+		},
+		[]
+	);
 
 	const turnOffDistractionFreeMode = useCallback( () => {
 		const isDistractionFree = getPreference(
@@ -226,6 +221,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
+	// If there are no revisions, do not render a footer.
+	const hasRevisions = revisionsCount >= 2;
+	const modifiedDateTime = revisions?.[ 0 ]?.modified;
+	const shouldShowGlobalStylesFooter =
+		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -235,9 +236,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				) }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
-					<SidebarNavigationScreenGlobalStylesFooter
-						onClickRevisions={ openRevisions }
-					/>
+					shouldShowGlobalStylesFooter && (
+						<SidebarNavigationScreenGlobalStylesFooter
+							modifiedDateTime={ modifiedDateTime }
+							onClickRevisions={ openRevisions }
+						/>
+					)
 				}
 				actions={
 					<>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -51,7 +56,12 @@ export default function SidebarNavigationScreen( {
 	return (
 		<>
 			<VStack
-				className="edit-site-sidebar-navigation-screen__main"
+				className={ classnames(
+					'edit-site-sidebar-navigation-screen__main',
+					{
+						'has-footer': !! footer,
+					}
+				) }
 				spacing={ 0 }
 				justify="flex-start"
 			>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -9,6 +9,10 @@
 	// Ensure the sidebar is always at least as tall as the viewport.
 	// This allows the footer section to be sticky at the bottom of the viewport.
 	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content {