Allow adding new templates and template parts directly from the sidebar

packages/edit-site/src/components/add-new-template/index.js

@@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import NewTemplate from './new-template';
 import NewTemplatePart from './new-template-part';
 
-export default function AddNewTemplate( { templateType = 'wp_template' } ) {
+export default function AddNewTemplate( {
+	templateType = 'wp_template',
+	...props
+} ) {
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
@@ -21,9 +24,9 @@ export default function AddNewTemplate( { templateType = 'wp_template' } ) {
 	}
 
 	if ( templateType === 'wp_template' ) {
-		return <NewTemplate postType={ postType } />;
+		return <NewTemplate { ...props } postType={ postType } />;
 	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart postType={ postType } />;
+		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;

packages/edit-site/src/components/add-new-template/new-template-part.js

@@ -12,6 +12,7 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +21,11 @@ import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
-export default function NewTemplatePart( { postType } ) {
+export default function NewTemplatePart( {
+	postType,
+	showIcon = true,
+	toggleProps,
+} ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -83,12 +88,14 @@ export default function NewTemplatePart( { postType } ) {
 	return (
 		<>
 			<Button
-				variant="primary"
+				{ ...toggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
+				icon={ showIcon ? plus : null }
+				label={ postType.labels.add_new }
 			>
-				{ postType.labels.add_new }
+				{ showIcon ? null : postType.labels.add_new }
 			</Button>
 			{ isModalOpen && (
 				<CreateTemplatePartModal

packages/edit-site/src/components/add-new-template/new-template.js

@@ -21,6 +21,7 @@ import {
 	media,
 	notFound,
 	page,
+	plus,
 	post,
 	postAuthor,
 	postDate,
@@ -79,7 +80,11 @@ const TEMPLATE_ICONS = {
 	attachment: media,
 };
 
-export default function NewTemplate( { postType } ) {
+export default function NewTemplate( {
+	postType,
+	toggleProps,
+	showIcon = true,
+} ) {
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
 	const [
@@ -177,15 +182,13 @@ export default function NewTemplate( { postType } ) {
 		<>
 			<DropdownMenu
 				className="edit-site-new-template-dropdown"
-				icon={ null }
-				text={ postType.labels.add_new }
+				icon={ showIcon ? plus : null }
+				text={ showIcon ? null : postType.labels.add_new }
 				label={ postType.labels.add_new_item }
 				popoverProps={ {
 					noArrow: false,
 				} }
-				toggleProps={ {
-					variant: 'primary',
-				} }
+				toggleProps={ toggleProps }
 			>
 				{ () => (
 					<>

packages/edit-site/src/components/add-new-template/style.scss

@@ -1,8 +1,4 @@
 .edit-site-new-template-dropdown {
-	.components-dropdown-menu__toggle {
-		padding: 6px 12px;
-	}
-
 	.edit-site-new-template-dropdown__popover {
 		@include break-small() {
 			min-width: 300px;

packages/edit-site/src/components/layout/style.scss

@@ -39,7 +39,8 @@
 
 .edit-site-layout__edit-button {
 	background: $gray-800;
-	color: $white;
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
 }
 
 .edit-site-layout__sidebar {

packages/edit-site/src/components/list/header.js

@@ -36,7 +36,11 @@ export default function Header( { templateType } ) {
 
 			{ canCreate && (
 				<div className="edit-site-list-header__right">
-					<AddNewTemplate templateType={ templateType } />
+					<AddNewTemplate
+						templateType={ templateType }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
 				</div>
 			) }
 		</header>

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -32,7 +32,7 @@ export default function SidebarNavigationScreenMain() {
 		<SidebarNavigationScreen
 			path="/"
 			title={
-				<HStack style={ { minHeight: 36 } }>
+				<HStack justify="space-between" style={ { minHeight: 36 } }>
 					<div>{ __( 'Design' ) }</div>
 					{ ! isMobileViewport && isEditorPage && (
 						<Button

packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js

@@ -21,6 +21,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
+import AddNewTemplate from '../add-new-template';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -124,18 +125,31 @@ export default function SidebarNavigationScreenTemplates( {
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
 			title={
-				<HStack style={ { minHeight: 36 } }>
-					<div>{ config[ postType ].labels.title }</div>
-					{ ! isMobileViewport && isEditorPage && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-						>
-							{ __( 'Edit' ) }
-						</Button>
+				<HStack style={ { minHeight: 36 } } justify="space-between">
+					<div style={ { flexShrink: 0 } }>
+						{ config[ postType ].labels.title }
+					</div>
+					{ ! isMobileViewport && (
+						<HStack spacing={ 2 } justify="right">
+							<AddNewTemplate
+								templateType={ postType }
+								toggleProps={ {
+									className:
+										'edit-site-sidebar-navigation-screen-templates__add-button',
+								} }
+							/>
+							{ isEditorPage && (
+								<Button
+									className="edit-site-layout__edit-button"
+									label={ __( 'Open the editor' ) }
+									onClick={ () => {
+										__unstableSetCanvasMode( 'edit' );
+									} }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							) }
+						</HStack>
 					) }
 				</HStack>
 			}

packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss

@@ -2,3 +2,8 @@
 	/* Overrides the margin that comes from the Item component */
 	margin-top: $grid-unit-20 !important;
 }
+
+.edit-site-sidebar-navigation-screen-templates__add-button {
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
+}

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -6,7 +6,7 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $button-size;
+	margin: 0 $grid-unit-20 0 $button-size;
 	flex-grow: 1;
 	overflow-y: auto;
 }
@@ -19,11 +19,13 @@
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
+	padding-right: $grid-unit-20;
 }
 
 .edit-site-sidebar-navigation-screen__title {
 	font-size: calc(1.56 * 13px);
-	font-weight: 600;
+	font-weight: 500;
+	flex-grow: 1;
 }
 
 .edit-site-sidebar-navigation-screen__back {