Elements: Add UI for button elements (#41659)

* Add ui for button elements * enables multiple color stack in the color indicator * use zstack for multiple color display, cleanup the UI for multiple color selection * remove useless styling for section title * remove duplicate comment Co-authored-by: Andrei Draganescu <[email protected]>
WordPress · Jun 22, 2022 · 4ccf192 · 4ccf192
1 parent 307de23
commit 4ccf192
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -22,9 +22,12 @@ function ScreenButtonColor( { name } ) {
 
 	const colorsPerOrigin = useColorsPerOrigin( name );
 
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
 	const hasButtonColor =
 		supports.includes( 'buttonColor' ) &&
-		( solids.length > 0 || areCustomSolidsEnabled ); // TODO - use the right check
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useStyle(
 		'elements.button.color.text',

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -104,7 +104,7 @@ function LinkColorItem( { name, parentMenu } ) {
 
 function ButtonColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport = supports.includes( 'linkColor' ); // TODO - use a real support
+	const hasSupport = supports.includes( 'buttonColor' );
 	const [ color ] = useStyle( 'elements.button.color.text', name );
 	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
 

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -58,8 +58,7 @@
 }
 
 .edit-site-global-styles-section-title {
-	font-size: calc(1.95 * 8px);
-	color: rgb(30, 30, 30);
+	color: $gray-800;
 	font-weight: 600;
 	line-height: 1.2;
 	padding: $grid-unit-20;