Removed <header> <main> and <footer> elements, replaced them with <di…

…v> elements and assigned new class names to leverage existing styles (#58221) Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
WordPress · Jan 25, 2024 · 1e62218 · 1e62218
1 parent 44eaeac
commit 1e62218
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -26,11 +26,11 @@
 
 .font-library-modal__tabpanel-layout {
 
-	main {
+	.font-library-modal__tabpanel-layout__main {
 		padding-bottom: $grid-unit-80;
 	}
 
-	footer {
+	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
 		padding: $grid-unit-20 $grid-unit-40;

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
@@ -22,32 +22,36 @@ function TabPanelLayout( {
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
-				<header>
-					<VStack spacing={ 2 }>
-						<HStack justify="flex-start">
-							{ !! handleBack && (
-								<Button
-									variant="tertiary"
-									onClick={ handleBack }
-									icon={ chevronLeft }
-									size="small"
-								/>
-							) }
-							{ title && (
-								<Heading
-									level={ 2 }
-									size={ 13 }
-									className="edit-site-global-styles-header"
-								>
-									{ title }
-								</Heading>
-							) }
-						</HStack>
-						{ description && <Text>{ description }</Text> }
-					</VStack>
-				</header>
-				<main>{ children }</main>
-				{ footer && <footer>{ footer }</footer> }
+				<VStack spacing={ 2 }>
+					<HStack justify="flex-start">
+						{ !! handleBack && (
+							<Button
+								variant="tertiary"
+								onClick={ handleBack }
+								icon={ chevronLeft }
+								size="small"
+							/>
+						) }
+						{ title && (
+							<Heading
+								level={ 2 }
+								size={ 13 }
+								className="edit-site-global-styles-header"
+							>
+								{ title }
+							</Heading>
+						) }
+					</HStack>
+					{ description && <Text>{ description }</Text> }
+				</VStack>
+				<div className="font-library-modal__tabpanel-layout__main">
+					{ children }
+				</div>
+				{ footer && (
+					<div className="font-library-modal__tabpanel-layout__footer">
+						{ footer }
+					</div>
+				) }
 			</VStack>
 		</div>
 	);