From 3ffbbcec2bb133a62c4ebec23e34f88cb381c376 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 29 Nov 2021 15:34:06 +1300
Subject: [PATCH 1/3] Move changes to the new palette edit component

---
 packages/components/src/palette-edit/index.js | 30 +++++++++----------
 .../components/src/palette-edit/style.scss    |  8 +++++
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index b4de9800c9ece..b5d5ab440d6ed 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -292,22 +292,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={
@@ -322,6 +308,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"
@@ -331,6 +328,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
index 748937b649f28..abc003efad634 100644
--- 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%;
+	}
 }

From fd180bfea69a486303c8b38e7a59014f0cae0f3a Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 29 Nov 2021 15:35:24 +1300
Subject: [PATCH 2/3] Remove redundant style

---
 packages/components/src/palette-edit/style.scss | 3 ---
 1 file changed, 3 deletions(-)

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

From a388d9e5c81666a0f439c2d96b725683a80a2ea1 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Mon, 13 Dec 2021 12:52:50 +1300
Subject: [PATCH 3/3] Change class name to match existing

---
 packages/components/src/palette-edit/index.js   | 4 ++--
 packages/components/src/palette-edit/style.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index b5d5ab440d6ed..0ed6b805cfb13 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -315,7 +315,7 @@ export default function PaletteEdit( {
 												setIsEditing( true );
 												onClose();
 											} }
-											className="edit-palette-menu-button"
+											className="components-palette-edit__menu-button"
 										>
 											{ __( 'Edit custom colors' ) }
 										</Button>
@@ -328,7 +328,7 @@ export default function PaletteEdit( {
 													onChange();
 													onClose();
 												} }
-												className="edit-palette-menu-button"
+												className="components-palette-edit__menu-button"
 											>
 												{ isGradient
 													? __(
diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss
index e78dfd30ebab4..ef78dd30fe925 100644
--- a/packages/components/src/palette-edit/style.scss
+++ b/packages/components/src/palette-edit/style.scss
@@ -18,7 +18,7 @@
 	}
 }
 .components-dropdown-menu__menu {
-	.components-button.edit-palette-menu-button {
+	.components-palette-edit__menu-button {
 		width: 100%;
 	}
 }