Editor Sidebar: Improve screen title UI

WordPress · Apr 27, 2024 · e5b999e · e5b999e
1 parent 352a397
commit e5b999e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 30 deletions.
diff --git a/src/editor-sidebar/create-panel.js b/src/editor-sidebar/create-panel.js
@@ -19,7 +19,9 @@ import {
 	TextControl,
 	TextareaControl,
 } from '@wordpress/components';
-import { chevronLeft, addCard, copy } from '@wordpress/icons';
+import { addCard, copy } from '@wordpress/icons';
+
+import ScreenHeader from './screen-header';
 
 export const CreateThemePanel = ( { createType } ) => {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -148,12 +150,9 @@ export const CreateThemePanel = ( { createType } ) => {
 
 	return (
 		<PanelBody>
-			<Heading>
-				<NavigatorToParentButton icon={ chevronLeft }>
-					{ __( 'Create Theme', 'create-block-theme' ) }
-				</NavigatorToParentButton>
-			</Heading>
-
+			<ScreenHeader
+				title={ __( 'Create Theme', 'create-block-theme' ) }
+			/>
 			<VStack>
 				<TextControl
 					label={ __( 'Theme name', 'create-block-theme' ) }

diff --git a/src/editor-sidebar/create-variation-panel.js b/src/editor-sidebar/create-variation-panel.js
@@ -15,9 +15,11 @@ import {
 	Button,
 	TextControl,
 } from '@wordpress/components';
-import { chevronLeft, copy } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 import { postCreateThemeVariation } from '../resolvers';
 
+import ScreenHeader from './screen-header';
+
 export const CreateVariationPanel = () => {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -50,12 +52,9 @@ export const CreateVariationPanel = () => {
 
 	return (
 		<PanelBody>
-			<Heading>
-				<NavigatorToParentButton icon={ chevronLeft }>
-					{ __( 'Create Variation', 'create-block-theme' ) }
-				</NavigatorToParentButton>
-			</Heading>
-
+			<ScreenHeader
+				title={ __( 'Create Variation', 'create-block-theme' ) }
+			/>
 			<VStack>
 				<Text>
 					{ __(

diff --git a/src/editor-sidebar/save-panel.js b/src/editor-sidebar/save-panel.js
@@ -14,7 +14,9 @@ import {
 	Button,
 	CheckboxControl,
 } from '@wordpress/components';
-import { chevronLeft, archive } from '@wordpress/icons';
+import { archive } from '@wordpress/icons';
+
+import ScreenHeader from './screen-header';
 
 export const SaveThemePanel = () => {
 	const [ saveOptions, setSaveOptions ] = useState( {
@@ -61,12 +63,9 @@ export const SaveThemePanel = () => {
 
 	return (
 		<PanelBody>
-			<Heading>
-				<NavigatorToParentButton icon={ chevronLeft }>
-					{ __( 'Save Changes', 'create-block-theme' ) }
-				</NavigatorToParentButton>
-			</Heading>
-
+			<ScreenHeader
+				title={ __( 'Save Changes', 'create-block-theme' ) }
+			/>
 			<VStack>
 				<CheckboxControl
 					label="Save Fonts"

diff --git a/src/editor-sidebar/screen-header.js b/src/editor-sidebar/screen-header.js
@@ -0,0 +1,42 @@
+import {
+	// eslint-disable-next-line
+	__experimentalHStack as HStack,
+	// eslint-disable-next-line
+	__experimentalVStack as VStack,
+	// eslint-disable-next-line
+	__experimentalSpacer as Spacer,
+	// eslint-disable-next-line
+	__experimentalHeading as Heading,
+	// eslint-disable-next-line
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+const ScreenHeader = ( { title, onBack } ) => {
+	return (
+		<Spacer marginBottom={ 0 } paddingBottom={ 4 }>
+			<HStack spacing={ 2 }>
+				<NavigatorToParentButton
+					style={ { minWidth: 24, padding: 0 } }
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					size="small"
+					label={ __( 'Back', 'create-block-theme' ) }
+					onClick={ onBack }
+				/>
+				<Spacer>
+					<Heading
+						level={ 2 }
+						size={ 13 }
+						// Need to override the too specific bottom margin for complementary areas.
+						style={ { margin: 0 } }
+					>
+						{ title }
+					</Heading>
+				</Spacer>
+			</HStack>
+		</Spacer>
+	);
+};
+
+export default ScreenHeader;
diff --git a/src/plugin-sidebar.js b/src/plugin-sidebar.js
@@ -35,7 +35,6 @@ import {
 	edit,
 	code,
 	chevronRight,
-	chevronLeft,
 	addCard,
 	blockMeta,
 } from '@wordpress/icons';
@@ -45,6 +44,7 @@ import ThemeJsonEditorModal from './editor-sidebar/json-editor-modal';
 import { SaveThemePanel } from './editor-sidebar/save-panel';
 import { CreateVariationPanel } from './editor-sidebar/create-variation-panel';
 import { ThemeMetadataEditorModal } from './editor-sidebar/metadata-editor-modal';
+import ScreenHeader from './editor-sidebar/screen-header';
 import { downloadExportedTheme } from './resolvers';
 
 const CreateBlockThemePlugin = () => {
@@ -181,14 +181,12 @@ const CreateBlockThemePlugin = () => {
 
 					<NavigatorScreen path="/clone">
 						<PanelBody>
-							<Heading>
-								<NavigatorToParentButton icon={ chevronLeft }>
-									{ __(
-										'Create Block Theme',
-										'create-block-theme'
-									) }
-								</NavigatorToParentButton>
-							</Heading>
+							<ScreenHeader
+								title={ __(
+									'Create Block Theme',
+									'create-block-theme'
+								) }
+							/>
 							<VStack>
 								<Text>
 									{ __(