[Site Editor]: Add create pattern button in patterns page

WordPress · Mar 29, 2024 · b8643fe · b8643fe
1 parent 0cea924
commit b8643fe
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DropdownMenu } from '@wordpress/components';
+import { DropdownMenu, Button } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
@@ -31,7 +31,7 @@ const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
 
-export default function AddNewPattern() {
+export default function AddNewPattern( { showTextButton } ) {
 	const history = useHistory();
 	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
@@ -103,10 +103,12 @@ export default function AddNewPattern() {
 			<DropdownMenu
 				controls={ controls }
 				toggleProps={ {
-					as: SidebarButton,
+					as: showTextButton ? Button : SidebarButton,
+					variant: showTextButton ? 'primary' : undefined,
 				} }
-				icon={ plus }
-				label={ __( 'Create pattern' ) }
+				icon={ showTextButton ? null : plus }
+				label={ showTextButton ? undefined : __( 'Create pattern' ) }
+				text={ showTextButton ? __( 'Create pattern' ) : undefined }
 			/>
 			{ showPatternModal && (
 				<CreatePatternModal

diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
@@ -17,6 +17,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import AddNewPattern from '../add-new-pattern';
 import RenameCategoryMenuItem from './rename-category-menu-item';
 import DeleteCategoryMenuItem from './delete-category-menu-item';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
@@ -53,39 +54,42 @@ export default function PatternsHeader( {
 	if ( ! title ) return null;
 
 	return (
-		<VStack className="edit-site-patterns__section-header">
+		<VStack className="edit-site-patterns__section-header" gap={ 3 }>
 			<HStack justify="space-between">
 				<Heading as="h2" level={ 4 } id={ titleId }>
 					{ title }
 				</Heading>
-				{ !! patternCategory?.id && (
-					<DropdownMenu
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						toggleProps={ {
-							className: 'edit-site-patterns__button',
-							describedBy: sprintf(
-								/* translators: %s: pattern category name */
-								__( 'Action menu for %s pattern category' ),
-								title
-							),
-							size: 'compact',
-						} }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								<RenameCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-								<DeleteCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				) }
+				<HStack expanded={ false }>
+					<AddNewPattern showTextButton />
+					{ !! patternCategory?.id && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							toggleProps={ {
+								className: 'edit-site-patterns__button',
+								describedBy: sprintf(
+									/* translators: %s: pattern category name */
+									__( 'Action menu for %s pattern category' ),
+									title
+								),
+								size: 'compact',
+							} }
+						>
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<RenameCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+									<DeleteCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
 			</HStack>
 			{ description ? (
 				<Text variant="muted" as="p" id={ descriptionId }>