Global Styles: Move the 'Edit colors' button to a standard menu item (#…

…36842) * Move changes to the new palette edit component * Remove redundant style * Change class name to match existing Co-authored-by: Glen Davies <glen.davies@a8c.com>
WordPress · Dec 13, 2021 · dab0864 · dab0864
1 parent 5ce42ff
commit dab0864
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git 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="components-palette-edit__menu-button"
+										>
+											{ __( 'Edit custom colors' ) }
+										</Button>
 										{ ! canOnlyChangeValues && (
 											<Button
 												variant="tertiary"
@@ -331,6 +328,7 @@ export default function PaletteEdit( {
 													onChange();
 													onClose();
 												} }
+												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
@@ -17,3 +17,8 @@
 		padding: 8px;
 	}
 }
+.components-dropdown-menu__menu {
+	.components-palette-edit__menu-button {
+		width: 100%;
+	}
+}