Move changes to the new palette edit component

WordPress · Nov 29, 2021 · 5b7c67b · 5b7c67b
1 parent df38b3d
commit 5b7c67b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
@@ -285,22 +285,8 @@ export default function PaletteEdit( {
 							} }
 						/>
 					) }
-					{ ! isEditing && (
-						<Button
-							disabled={ ! hasElements }
-							isSmall
-							icon={ moreVertical }
-							label={
-								isGradient
-									? __( 'Edit gradients' )
-									: __( 'Edit colors' )
-							}
-							onClick={ () => {
-								setIsEditing( true );
-							} }
-						/>
-					) }
-					{ isEditing && ( canReset || ! canOnlyChangeValues ) && (
+
+					{ hasElements && ( canReset || ! canOnlyChangeValues ) && (
 						<DropdownMenu
 							icon={ moreVertical }
 							label={
@@ -315,6 +301,17 @@ export default function PaletteEdit( {
 							{ ( { onClose } ) => (
 								<>
 									<NavigableMenu role="menu">
+										<Button
+											variant="tertiary"
+											disabled={ isEditing }
+											onClick={ () => {
+												setIsEditing( true );
+												onClose();
+											} }
+											className="edit-palette-menu-button"
+										>
+											{ __( 'Edit custom colors' ) }
+										</Button>
 										{ ! canOnlyChangeValues && (
 											<Button
 												variant="tertiary"
@@ -324,6 +321,7 @@ export default function PaletteEdit( {
 													onChange();
 													onClose();
 												} }
+												className="edit-palette-menu-button"
 											>
 												{ isGradient
 													? __(

diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss
@@ -16,4 +16,12 @@
 		width: 280px;
 		padding: 8px;
 	}
+	.components-button.edit-palette-menu-button {
+		width: 100%;
+	}
+}
+.components-dropdown-menu__menu {
+	.components-button.edit-palette-menu-button {
+		width: 100%;
+	}
 }