allow sticking footer to the bottom on GS sidebar

WordPress · Jun 20, 2022 · 6d4870a · 6d4870a
1 parent 166c3bf
commit 6d4870a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 57 deletions.
diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.js
@@ -39,6 +39,7 @@ export const Footer = css`
 
 export const Content = css`
 	height: 100%;
+	display: flex;
 `;
 
 export const Body = css`

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -13,6 +13,7 @@ import {
 	CardFooter,
 	CardMedia,
 	FlexItem,
+	Flex,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, reusableBlock } from '@wordpress/icons';
@@ -41,20 +42,56 @@ function ScreenRoot() {
 
 	return (
 		<Card size="small">
-			<CardBody>
-				<VStack spacing={ 4 }>
-					<Card>
-						<CardMedia>
-							<StylesPreview />
-						</CardMedia>
-					</Card>
-					{ !! variations?.length && (
+			<Flex direction="column">
+				<FlexItem>
+					<CardBody>
+						<VStack spacing={ 4 }>
+							<Card>
+								<CardMedia>
+									<StylesPreview />
+								</CardMedia>
+							</Card>
+							{ !! variations?.length && (
+								<ItemGroup>
+									<NavigationButtonAsItem path="/variations">
+										<HStack justify="space-between">
+											<FlexItem>
+												{ __( 'Browse styles' ) }
+											</FlexItem>
+											<IconWithCurrentColor
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</NavigationButtonAsItem>
+								</ItemGroup>
+							) }
+							<ContextMenu />
+						</VStack>
+					</CardBody>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							/*
+							 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
+							 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+							 */
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Customize the appearance of specific blocks for the whole site.'
+							) }
+						</Spacer>
 						<ItemGroup>
-							<NavigationButtonAsItem path="/variations">
+							<NavigationButtonAsItem path="/blocks">
 								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Browse styles' ) }
-									</FlexItem>
+									<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 									<IconWithCurrentColor
 										icon={
 											isRTL() ? chevronLeft : chevronRight
@@ -63,52 +100,19 @@ function ScreenRoot() {
 								</HStack>
 							</NavigationButtonAsItem>
 						</ItemGroup>
-					) }
-					<ContextMenu />
-				</VStack>
-			</CardBody>
-
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					/*
-					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
-					 */
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Customize the appearance of specific blocks for the whole site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/blocks"
-						aria-label={ __( 'Blocks styles' ) }
+					</CardBody>
+					<CardDivider />
+				</FlexItem>
+				<CardFooter>
+					<Button
+						icon={ reusableBlock }
+						label={ __( 'Randomize colors' ) }
+						onClick={ randomizeTheme }
 					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
-
-			<CardFooter>
-				<Button
-					icon={ reusableBlock }
-					label={ __( 'Randomize colors' ) }
-					onClick={ randomizeTheme }
-				>
-					{ __( 'Randomize' ) }
-				</Button>
-			</CardFooter>
+						{ __( 'Randomize' ) }
+					</Button>
+				</CardFooter>
+			</Flex>
 		</Card>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -61,6 +61,7 @@
 	margin-right: $grid-unit-20;
 	margin-left: $grid-unit-20;
 	width: unset;
+
 	.components-toggle-group-control {
 		min-height: $grid-unit-40;
 	}
@@ -102,3 +103,8 @@
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
 }
+
+.edit-site-global-styles-sidebar__navigator-screen {
+	display: flex;
+}
+