PR 📌 Fix header styles and semantics

WordPress · Apr 26, 2022 · d870378 · d870378
1 parent 1abe799
commit d870378
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
@@ -7,30 +7,33 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { NavigationBackButtonAsItem } from './navigation-button';
-
 function ScreenHeader( { title, description } ) {
 	return (
-		<VStack spacing={ 2 }>
-			<HStack spacing={ 2 }>
-				<View role="list">
-					<NavigationBackButtonAsItem
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						size="small"
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
 				</Spacer>
-			</HStack>
+			</View>
 			{ description && (
 				<p className="edit-site-global-styles-header__description">
 					{ description }