@wordpress/edit-site 5.12.8 → 5.12.9

package/build-style/style-rtl.css

@@ -1784,8 +1784,10 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid #2f2f2f;
+  background: none;
   margin: 60px 0 0;
+  border-radius: 0;
 }
 .edit-site-patterns .components-base-control {
   width: 100%;
@@ -1839,6 +1841,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   background: #757575;
   color: #f0f0f0;
 }
+.edit-site-patterns .edit-site-patterns__grid-pagination {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  color: #f0f0f0;
+  background-color: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  background-color: #757575;
+}
 
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
@@ -1849,6 +1868,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-template-columns: 1fr;
   gap: 32px;
   padding-top: 2px;
+  margin-top: 0;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
@@ -2658,6 +2678,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-layout__sidebar {
   z-index: 1;
   width: 100vw;
+  flex-shrink: 0;
 }
 @media (min-width: 782px) {
   .edit-site-layout__sidebar {
@@ -2967,12 +2988,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #e0e0e0;
   background: #2f2f2f;
 }
+.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current] .edit-site-sidebar-navigation-item__drilldown-indicator {
+  fill: #e0e0e0;
+}
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
-  fill: #757575;
+  fill: #949494;
 }
 .edit-site-sidebar-navigation-item.components-item:is(a) {
   text-decoration: none;
@@ -2983,6 +3007,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   box-shadow: none;
   outline: none;
 }
+.edit-site-sidebar-navigation-item.components-item:is(a):focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
 .edit-site-sidebar-navigation-item.components-item.with-suffix {
   padding-left: 16px;
 }
@@ -3332,6 +3360,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-site-hub .edit-site-site-hub__container {
   gap: 0;
 }
+.edit-site-site-hub .edit-site-site-hub__site-title,
+.edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  transition: opacity ease 0.1s;
+}
 .edit-site-site-hub .edit-site-site-hub__site-view-link {
   flex-grow: 0;
 }
@@ -3531,6 +3563,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-resizable-frame__inner {
   position: relative;
 }
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__site-title,
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  opacity: 0 !important;
+}
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__view-mode-toggle-container {
+  background-color: transparent;
+}
+
 body:has(.edit-site-resizable-frame__inner.is-resizing) {
   cursor: col-resize;
   user-select: none;
@@ -3553,11 +3593,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
 .edit-site-resizable-frame__handle {
   align-items: center;
   background-color: rgba(117, 117, 117, 0.4);
+  border: 0;
   border-radius: 4px;
   cursor: col-resize;
   display: flex;
   height: 64px;
   justify-content: flex-end;
+  padding: 0;
   position: absolute;
   top: calc(50% - 32px);
   width: 4px;
@@ -3577,15 +3619,11 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   left: 100%;
   width: 32px;
 }
-.edit-site-resizable-frame__handle:hover, .is-resizing .edit-site-resizable-frame__handle {
-  background-color: var(--wp-admin-theme-color);
+.edit-site-resizable-frame__handle:focus-visible {
+  outline: 2px solid transparent;
 }
-.edit-site-resizable-frame__handle .edit-site-resizable-frame__handle-label {
-  background: var(--wp-admin-theme-color);
-  border-radius: 2px;
-  color: #fff;
-  margin-left: 8px;
-  padding: 4px 8px;
+.edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
+  background-color: var(--wp-admin-theme-color);
 }
 
 .edit-site-push-changes-to-global-styles-control .components-button {

package/build-style/style.css

@@ -1785,8 +1785,10 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.15);
+  border: 1px solid #2f2f2f;
+  background: none;
   margin: 60px 0 0;
+  border-radius: 0;
 }
 .edit-site-patterns .components-base-control {
   width: 100%;
@@ -1840,6 +1842,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   background: #757575;
   color: #f0f0f0;
 }
+.edit-site-patterns .edit-site-patterns__grid-pagination {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary {
+  width: 32px;
+  height: 32px;
+  color: #f0f0f0;
+  background-color: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.edit-site-patterns .edit-site-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  background-color: #757575;
+}
 
 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
   top: 0;
@@ -1850,6 +1869,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   grid-template-columns: 1fr;
   gap: 32px;
   padding-top: 2px;
+  margin-top: 0;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
@@ -2659,6 +2679,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-layout__sidebar {
   z-index: 1;
   width: 100vw;
+  flex-shrink: 0;
 }
 @media (min-width: 782px) {
   .edit-site-layout__sidebar {
@@ -2968,12 +2989,15 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #e0e0e0;
   background: #2f2f2f;
 }
+.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current] .edit-site-sidebar-navigation-item__drilldown-indicator {
+  fill: #e0e0e0;
+}
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
-  fill: #757575;
+  fill: #949494;
 }
 .edit-site-sidebar-navigation-item.components-item:is(a) {
   text-decoration: none;
@@ -2984,6 +3008,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   box-shadow: none;
   outline: none;
 }
+.edit-site-sidebar-navigation-item.components-item:is(a):focus-visible {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
 .edit-site-sidebar-navigation-item.components-item.with-suffix {
   padding-right: 16px;
 }
@@ -3333,6 +3361,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-site-hub .edit-site-site-hub__container {
   gap: 0;
 }
+.edit-site-site-hub .edit-site-site-hub__site-title,
+.edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  transition: opacity ease 0.1s;
+}
 .edit-site-site-hub .edit-site-site-hub__site-view-link {
   flex-grow: 0;
 }
@@ -3532,6 +3564,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-resizable-frame__inner {
   position: relative;
 }
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__site-title,
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub_toggle-command-center {
+  opacity: 0 !important;
+}
+body:has(.edit-site-resizable-frame__inner.edit-site-layout__resizable-frame-oversized) .edit-site-site-hub .edit-site-site-hub__view-mode-toggle-container {
+  background-color: transparent;
+}
+
 body:has(.edit-site-resizable-frame__inner.is-resizing) {
   cursor: col-resize;
   user-select: none;
@@ -3554,11 +3594,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
 .edit-site-resizable-frame__handle {
   align-items: center;
   background-color: rgba(117, 117, 117, 0.4);
+  border: 0;
   border-radius: 4px;
   cursor: col-resize;
   display: flex;
   height: 64px;
   justify-content: flex-end;
+  padding: 0;
   position: absolute;
   top: calc(50% - 32px);
   width: 4px;
@@ -3578,15 +3620,11 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   right: 100%;
   width: 32px;
 }
-.edit-site-resizable-frame__handle:hover, .is-resizing .edit-site-resizable-frame__handle {
-  background-color: var(--wp-admin-theme-color);
+.edit-site-resizable-frame__handle:focus-visible {
+  outline: 2px solid transparent;
 }
-.edit-site-resizable-frame__handle .edit-site-resizable-frame__handle-label {
-  background: var(--wp-admin-theme-color);
-  border-radius: 2px;
-  color: #fff;
-  margin-right: 8px;
-  padding: 4px 8px;
+.edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
+  background-color: var(--wp-admin-theme-color);
 }
 
 .edit-site-push-changes-to-global-styles-control .components-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.8",
+	"version": "5.12.9",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,40 +29,40 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.6",
-		"@wordpress/block-library": "^8.12.8",
+		"@wordpress/block-editor": "^12.3.7",
+		"@wordpress/block-library": "^8.12.9",
 		"@wordpress/blocks": "^12.12.3",
-		"@wordpress/commands": "^0.6.6",
-		"@wordpress/components": "^25.1.6",
+		"@wordpress/commands": "^0.6.7",
+		"@wordpress/components": "^25.1.7",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/core-commands": "^0.4.6",
-		"@wordpress/core-data": "^6.12.6",
+		"@wordpress/core-commands": "^0.4.7",
+		"@wordpress/core-data": "^6.12.7",
 		"@wordpress/data": "^9.5.3",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.6",
+		"@wordpress/editor": "^13.12.7",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
-		"@wordpress/interface": "^5.12.6",
+		"@wordpress/interface": "^5.12.7",
 		"@wordpress/keyboard-shortcuts": "^4.12.3",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/media-utils": "^4.26.1",
 		"@wordpress/notices": "^4.3.3",
-		"@wordpress/plugins": "^6.3.6",
-		"@wordpress/preferences": "^3.12.6",
+		"@wordpress/plugins": "^6.3.7",
+		"@wordpress/preferences": "^3.12.7",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/reusable-blocks": "^4.12.6",
+		"@wordpress/reusable-blocks": "^4.12.7",
 		"@wordpress/router": "^0.4.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
 		"@wordpress/viewport": "^5.12.3",
-		"@wordpress/widgets": "^3.12.6",
+		"@wordpress/widgets": "^3.12.7",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86ecd96b3bcada6b4cc35bb2455b3029cebb0ff3"
+	"gitHead": "5a52ea1ed29bbf8f3ead96f83b17d2c1cf84c880"
 }

package/src/components/block-editor/index.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

package/src/components/block-editor/use-site-editor-settings.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 /**
@@ -11,16 +11,21 @@ import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import inserterMediaCategories from './inserter-media-categories';
 
-export default function useSiteEditorSettings( templateType ) {
-	const { storedSettings, canvasMode } = useSelect( ( select ) => {
-		const { getSettings, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		return {
-			storedSettings: getSettings(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+export default function useSiteEditorSettings() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
+	const { storedSettings, canvasMode, templateType } = useSelect(
+		( select ) => {
+			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
+				select( editSiteStore )
+			);
+			return {
+				storedSettings: getSettings( setIsInserterOpened ),
+				canvasMode: getCanvasMode(),
+				templateType: getEditedPostType(),
+			};
+		},
+		[ setIsInserterOpened ]
+	);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0

package/src/components/layout/style.scss

@@ -61,6 +61,7 @@
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
+	flex-shrink: 0;
 
 	@include break-medium {
 		width: $nav-sidebar-width;

package/src/components/page-patterns/grid.js

@@ -1,26 +1,115 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { useRef, useState, useMemo } from '@wordpress/element';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import GridItem from './grid-item';
 
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 20;
+
+function Pagination( { currentPage, numPages, changePage, totalItems } ) {
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			className="edit-site-patterns__grid-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'First page' ) }
+				>
+					«
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage - 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'Previous page' ) }
+				>
+					‹
+				</Button>
+			</HStack>
+			<Text variant="muted">
+				{ sprintf(
+					// translators: %1$s: Current page number, %2$s: Total number of pages.
+					_x( '%1$s of %2$s', 'paging' ),
+					currentPage,
+					numPages
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage + 1 ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Next page' ) }
+				>
+					›
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( numPages ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Last page' ) }
+				>
+					»
+				</Button>
+			</HStack>
+		</HStack>
+	);
+}
 
 export default function Grid( { categoryId, items, ...props } ) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
 	const gridRef = useRef();
+	const totalItems = items.length;
+	const pageIndex = currentPage - 1;
 
-	if ( ! items?.length ) {
+	const list = useMemo(
+		() =>
+			items.slice(
+				pageIndex * PAGE_SIZE,
+				pageIndex * PAGE_SIZE + PAGE_SIZE
+			),
+		[ pageIndex, items ]
+	);
+
+	const asyncList = useAsyncList( list, { step: 10 } );
+
+	if ( ! list?.length ) {
 		return null;
 	}
 
-	const list = items.slice( 0, PAGE_SIZE );
-	const restLength = items.length - PAGE_SIZE;
+	const numPages = Math.ceil( items.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = document.querySelector( '.edit-site-patterns' );
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
 
 	return (
 		<>
@@ -30,7 +119,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 				{ ...props }
 				ref={ gridRef }
 			>
-				{ list.map( ( item ) => (
+				{ asyncList.map( ( item ) => (
 					<GridItem
 						key={ item.name }
 						item={ item }
@@ -38,14 +127,10 @@ export default function Grid( { categoryId, items, ...props } ) {
 					/>
 				) ) }
 			</ul>
-			{ restLength > 0 && (
-				<Text variant="muted" as="p" align="center">
-					{ sprintf(
-						/* translators: %d: number of patterns */
-						__( '+ %d more patterns discoverable by searching' ),
-						restLength
-					) }
-				</Text>
+			{ numPages > 1 && (
+				<Pagination
+					{ ...{ currentPage, numPages, changePage, totalItems } }
+				/>
 			) }
 		</>
 	);

package/src/components/page-patterns/patterns-list.js

@@ -15,7 +15,7 @@ import {
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useViewportMatch, useAsyncList } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -70,7 +70,6 @@ export default function PatternsList( { categoryId, type } ) {
 	const hasPatterns = patterns.length;
 	const title = SYNC_FILTERS[ syncFilter ];
 	const description = SYNC_DESCRIPTIONS[ syncFilter ];
-	const shownPatterns = useAsyncList( patterns );
 
 	return (
 		<VStack spacing={ 6 }>
@@ -132,7 +131,7 @@ export default function PatternsList( { categoryId, type } ) {
 			</Flex>
 			{ syncFilter !== 'all' && (
 				<VStack className="edit-site-patterns__section-header">
-					<Heading as="h3" level={ 4 } id={ titleId }>
+					<Heading as="h3" level={ 5 } id={ titleId }>
 						{ title }
 					</Heading>
 					{ description ? (
@@ -145,7 +144,7 @@ export default function PatternsList( { categoryId, type } ) {
 			{ hasPatterns && (
 				<Grid
 					categoryId={ categoryId }
-					items={ shownPatterns }
+					items={ patterns }
 					aria-labelledby={ titleId }
 					aria-describedby={ descriptionId }
 				/>

package/src/components/page-patterns/style.scss

@@ -1,6 +1,8 @@
 .edit-site-patterns {
-	background: rgba(0, 0, 0, 0.15);
+	border: 1px solid $gray-800;
+	background: none;
 	margin: $header-height 0 0;
+	border-radius: 0;
 	.components-base-control {
 		width: 100%;
 		@include break-medium {
@@ -59,6 +61,23 @@
 		background: $gray-700;
 		color: $gray-100;
 	}
+
+	.edit-site-patterns__grid-pagination {
+		width: fit-content;
+		.components-button.is-tertiary {
+			width: $button-size-compact;
+			height: $button-size-compact;
+			color: $gray-100;
+			background-color: $gray-800;
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
+			&:hover:not(:disabled) {
+				background-color: $gray-700;
+			}
+		}
+	}
 }
 
 .edit-site-patterns__section-header {
@@ -74,6 +93,7 @@
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.
 	padding-top: $border-width-focus-fallback;
+	margin-top: 0;
 	margin-bottom: $grid-unit-40;
 	@include break-large {
 		grid-template-columns: 1fr 1fr;

package/src/components/page-template-parts/add-new-template-part.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewTemplatePart() {
+	const { canCreate, postType } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+		};
+	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	if ( ! canCreate || ! postType ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => setIsModalOpen( false ) }
+					blocks={ [] }
+					onCreate={ ( templatePart ) => {
+						setIsModalOpen( false );
+						history.push( {
+							postId: templatePart.id,
+							postType: 'wp_template_part',
+							canvas: 'edit',
+						} );
+					} }
+					onError={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}