From 7f74df5438a164150281a0b2b2ab693019da51f8 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 10 Jun 2022 15:04:05 +0100
Subject: [PATCH 01/10] Add ui for button elements

---
 .../global-styles/screen-button-color.js      | 70 +++++++++++++++++++
 .../components/global-styles/screen-colors.js | 26 +++++++
 .../screen-typography-element.js              |  4 ++
 .../global-styles/screen-typography.js        |  6 ++
 .../src/components/global-styles/ui.js        | 11 +++
 5 files changed, 117 insertions(+)
 create mode 100644 packages/edit-site/src/components/global-styles/screen-button-color.js

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
new file mode 100644
index 0000000000000..d5c3c508b89d1
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+} from './hooks';
+
+function ScreenButtonColor( { name } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+
+	const [ isLinkEnabled ] = useSetting( 'color.link', name );
+
+	const hasButtonColor =
+		supports.includes( 'linkColor' ) &&
+		isLinkEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled ); // TODO - use the right check
+
+	const [ buttonColor, setButtonColor ] = useStyle(
+		'elements.button.color.text',
+		name
+	);
+	const [ userButtonColor ] = useStyle(
+		'elements.button.color.text',
+		name,
+		'user'
+	);
+
+	if ( ! hasButtonColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Buttons' ) }
+				description={ __(
+					'Set the default color used for buttons across the site.'
+				) }
+			/>
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonColor }
+				onColorChange={ setButtonColor }
+				clearable={ buttonColor === userButtonColor }
+			/>
+		</>
+	);
+}
+
+export default ScreenButtonColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 4e961dcf0e75b..25b360600c5fa 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -88,6 +88,28 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
+function ButtonColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'linkColor' ); // TODO - use a real support
+	const [ color ] = useStyle( 'elements.button.color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+			<HStack justify="flex-start">
+				<ColorIndicatorWrapper expanded={ false }>
+					<ColorIndicator colorValue={ color } />
+				</ColorIndicatorWrapper>
+				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
@@ -119,6 +141,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<ButtonColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 						</ItemGroup>
 					</VStack>
 				</VStack>
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 46b53a3a7b3d3..4f7abe955803e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -18,6 +18,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on the links.' ),
 		title: __( 'Links' ),
 	},
+	button: {
+		description: __( 'Manage the fonts and typography used on buttons.' ),
+		title: __( 'Buttons' ),
+	},
 };
 
 function ScreenTypographyElement( { name, element } ) {
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 32e93cd6af37e..08fda42065f0d 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -95,6 +95,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="button"
+								label={ __( 'Buttons' ) }
+							/>
 						</ItemGroup>
 					</VStack>
 				</div>
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 793b0939d9014..837a3fedb85bc 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 
@@ -58,6 +59,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="link" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/button' }
+			>
+				<ScreenTypographyElement name={ name } element="button" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
 			</GlobalStylesNavigationScreen>
@@ -82,6 +89,10 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/button' }>
+				<ScreenButtonColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>

From a714b0e310fe17fe635e0e1acaf9e956e960a0c6 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 16 Jun 2022 12:33:51 +0300
Subject: [PATCH 02/10] prettier fixes

---
 .../edit-site/src/components/global-styles/screen-colors.js   | 1 -
 packages/edit-site/src/components/global-styles/ui.js         | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 25b360600c5fa..9b33828013ffd 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -109,7 +109,6 @@ function ButtonColorItem( { name, parentMenu } ) {
 	);
 }
 
-
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 837a3fedb85bc..750985ad1f94f 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -89,7 +89,9 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/button' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/button' }
+			>
 				<ScreenButtonColor name={ name } />
 			</GlobalStylesNavigationScreen>
 

From a0afa3dc09ef10b424d44b1efdaa838d75746bcd Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 16 Jun 2022 18:07:07 +0300
Subject: [PATCH 03/10] attempt to bring background color for button styling

---
 packages/blocks/src/api/constants.js          |  8 ++++
 .../src/components/global-styles/hooks.js     |  1 +
 .../global-styles/screen-button-color.js      | 43 ++++++++++++++-----
 .../src/components/global-styles/utils.js     |  3 ++
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index df0f05fdf5fe9..fbc02bfdef2cc 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -114,6 +114,14 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'elements', 'link', 'color', 'text' ],
 		support: [ 'color', 'link' ],
 	},
+	buttonColor: {
+		value: [ 'elements', 'button', 'color', 'text' ],
+		support: [ 'color', 'button' ],
+	},
+	buttonBackground: {
+		value: [ 'elements', 'button', 'color', 'background' ],
+		support: [ 'color', 'button' ],
+	},
 	fontFamily: {
 		value: [ 'typography', 'fontFamily' ],
 		support: [ 'typography', '__experimentalFontFamily' ],
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 431a2471a3509..da7a9ccf6de23 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -159,6 +159,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
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
index d5c3c508b89d1..972e36ed9e5e6 100644
--- 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,23 +22,30 @@ function ScreenButtonColor( { name } ) {
 
 	const colorsPerOrigin = useColorsPerOrigin( name );
 
-	const [ isLinkEnabled ] = useSetting( 'color.link', name );
-
 	const hasButtonColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
+		supports.includes( 'buttonColor' ) &&
 		( solids.length > 0 || areCustomSolidsEnabled ); // TODO - use the right check
 
-	const [ buttonColor, setButtonColor ] = useStyle(
+	const [ buttonTextColor, setButtonTextColor ] = useStyle(
 		'elements.button.color.text',
 		name
 	);
-	const [ userButtonColor ] = useStyle(
+	const [ userButtonTextColor ] = useStyle(
 		'elements.button.color.text',
 		name,
 		'user'
 	);
 
+	const [ buttonBgColor, setButtonBgColor ] = useStyle(
+		'elements.button.backgound.color',
+		name
+	);
+	const [ userButtonBgColor ] = useStyle(
+		'elements.button.backgound.color',
+		name,
+		'user'
+	);
+
 	if ( ! hasButtonColor ) {
 		return null;
 	}
@@ -48,9 +55,25 @@ function ScreenButtonColor( { name } ) {
 			<ScreenHeader
 				title={ __( 'Buttons' ) }
 				description={ __(
-					'Set the default color used for buttons across the site.'
+					'Set the default colors used for buttons across the site.'
 				) }
 			/>
+
+			<h2>{ __( 'Set text color' ) }</h2>
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonTextColor }
+				onColorChange={ setButtonTextColor }
+				clearable={ buttonTextColor === userButtonTextColor }
+			/>
+
+			<h2>{ __( 'Set background color' ) }</h2>
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
@@ -59,9 +82,9 @@ function ScreenButtonColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
-				colorValue={ buttonColor }
-				onColorChange={ setButtonColor }
-				clearable={ buttonColor === userButtonColor }
+				colorValue={ buttonBgColor }
+				onColorChange={ setButtonBgColor }
+				clearable={ buttonBgColor === userButtonBgColor }
 			/>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 50c412fc06cd5..b6323f44f47bd 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -11,6 +11,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -75,6 +76,8 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'background',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',

From f1f08421f10f2141edbc23d40345ef3395b1eb17 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 17 Jun 2022 17:42:09 +0300
Subject: [PATCH 04/10] set background color for button element

---
 packages/blocks/src/api/constants.js                     | 2 +-
 .../src/components/global-styles/screen-button-color.js  | 9 +++++----
 packages/edit-site/src/components/global-styles/utils.js | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index fbc02bfdef2cc..5e1e556f96cf3 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -118,7 +118,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'elements', 'button', 'color', 'text' ],
 		support: [ 'color', 'button' ],
 	},
-	buttonBackground: {
+	buttonBackgroundColor: {
 		value: [ 'elements', 'button', 'color', 'background' ],
 		support: [ 'color', 'button' ],
 	},
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
index 972e36ed9e5e6..0af4c339b1dc2 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -8,6 +8,7 @@ import { __experimentalColorGradientControl as ColorGradientControl } from '@wor
  * Internal dependencies
  */
 import ScreenHeader from './header';
+import Subtitle from './subtitle';
 import {
 	getSupportedGlobalStylesPanels,
 	useSetting,
@@ -37,11 +38,11 @@ function ScreenButtonColor( { name } ) {
 	);
 
 	const [ buttonBgColor, setButtonBgColor ] = useStyle(
-		'elements.button.backgound.color',
+		'elements.button.color.background',
 		name
 	);
 	const [ userButtonBgColor ] = useStyle(
-		'elements.button.backgound.color',
+		'elements.button.color.background',
 		name,
 		'user'
 	);
@@ -59,7 +60,7 @@ function ScreenButtonColor( { name } ) {
 				) }
 			/>
 
-			<h2>{ __( 'Set text color' ) }</h2>
+			<Subtitle>{ __( 'Set text color' ) }</Subtitle>
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
@@ -73,7 +74,7 @@ function ScreenButtonColor( { name } ) {
 				clearable={ buttonTextColor === userButtonTextColor }
 			/>
 
-			<h2>{ __( 'Set background color' ) }</h2>
+			<Subtitle>{ __( 'Set background color' ) }</Subtitle>
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index b6323f44f47bd..833255b624b47 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -77,7 +77,7 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
-	'elements.button.color.background': 'background',
+	'elements.button.backgroundColor': 'background-color',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',

From 531f79ee9a839ef328ec44b13de30380e6db8b15 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Mon, 20 Jun 2022 14:36:50 +0300
Subject: [PATCH 05/10] enables multiple color stack in the color indicator

---
 .../src/components/global-styles/screen-colors.js   |  7 ++++++-
 .../src/components/global-styles/style.scss         | 13 +++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 9b33828013ffd..c779fb2b7d165 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -92,6 +92,7 @@ function ButtonColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' ); // TODO - use a real support
 	const [ color ] = useStyle( 'elements.button.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -100,8 +101,12 @@ function ButtonColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
+				<ColorIndicatorWrapper
+					expanded={ false }
+					className={ 'has-multiple-colors' }
+				>
 					<ColorIndicator colorValue={ color } />
+					<ColorIndicator colorValue={ bgColor } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
 			</HStack>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 122b753dffa17..62facddd21f72 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -102,3 +102,16 @@
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
 }
+
+.edit-site-global-styles__color-indicator-wrapper > .component-color-indicator:first-child {
+	// the point is to be on top of other colors
+	z-index: 3;
+	position: relative;
+	right: 0;
+}
+
+.edit-site-global-styles__color-indicator-wrapper > .component-color-indicator,
+.edit-site-global-styles__color-indicator-wrapper.has-multiple-colors + .components-flex-item {
+	position: relative;
+	right: 20px;
+}

From 451405e3a2801ac08deb8ea1d6d58ffc6590b2c0 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Mon, 20 Jun 2022 15:27:13 +0300
Subject: [PATCH 06/10] use zstack for multiple color display, cleanup the UI
 for multiple color selection

---
 .../global-styles/screen-button-color.js      | 11 ++++++---
 .../components/global-styles/screen-colors.js | 16 +++++++------
 .../src/components/global-styles/style.scss   | 24 +++++++++----------
 3 files changed, 28 insertions(+), 23 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
index 0af4c339b1dc2..4468855171db0 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -8,7 +8,6 @@ import { __experimentalColorGradientControl as ColorGradientControl } from '@wor
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import Subtitle from './subtitle';
 import {
 	getSupportedGlobalStylesPanels,
 	useSetting,
@@ -60,7 +59,10 @@ function ScreenButtonColor( { name } ) {
 				) }
 			/>
 
-			<Subtitle>{ __( 'Set text color' ) }</Subtitle>
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Text color' ) }
+			</h4>
+
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
@@ -74,7 +76,10 @@ function ScreenButtonColor( { name } ) {
 				clearable={ buttonTextColor === userButtonTextColor }
 			/>
 
-			<Subtitle>{ __( 'Set background color' ) }</Subtitle>
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Background color' ) }
+			</h4>
+
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index c779fb2b7d165..24d6f4260b252 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -6,6 +6,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalZStack as ZStack,
 	FlexItem,
 	ColorIndicator,
 } from '@wordpress/components';
@@ -101,13 +102,14 @@ function ButtonColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper
-					expanded={ false }
-					className={ 'has-multiple-colors' }
-				>
-					<ColorIndicator colorValue={ color } />
-					<ColorIndicator colorValue={ bgColor } />
-				</ColorIndicatorWrapper>
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
 				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 62facddd21f72..1b58a0ec05adb 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -57,6 +57,16 @@
 	font-size: 11px !important;
 }
 
+.edit-site-global-styles-section-title {
+	font-size: calc(1.95 * 8px);
+	color: rgb(30, 30, 30);
+	font-weight: 600;
+	line-height: 1.2;
+	padding: $grid-unit-20;
+	padding-bottom: 0;
+	margin: 0;
+}
+
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
 	margin-right: $grid-unit-20;
 	margin-left: $grid-unit-20;
@@ -68,6 +78,7 @@
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
+.edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
@@ -102,16 +113,3 @@
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
 }
-
-.edit-site-global-styles__color-indicator-wrapper > .component-color-indicator:first-child {
-	// the point is to be on top of other colors
-	z-index: 3;
-	position: relative;
-	right: 0;
-}
-
-.edit-site-global-styles__color-indicator-wrapper > .component-color-indicator,
-.edit-site-global-styles__color-indicator-wrapper.has-multiple-colors + .components-flex-item {
-	position: relative;
-	right: 20px;
-}

From dd008e3fb35db382316fcca03bb20a69fe7bb011 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 20 Jun 2022 17:53:33 +0100
Subject: [PATCH 07/10] Elements: Fix button element selectors

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php  |  5 ++++-
 .../class-wp-theme-json-resolver-gutenberg.php        |  4 ++--
 lib/load.php                                          |  1 +
 packages/block-library/src/button/block.json          |  8 --------
 packages/block-library/src/file/block.json            | 11 ++++++++++-
 packages/block-library/src/file/style.scss            |  4 ----
 packages/block-library/src/search/style.scss          |  2 --
 .../global-styles/use-global-styles-output.js         |  9 ++++++++-
 8 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 55716b3cf58fa..968b7c7d43e7b 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -91,7 +91,10 @@ protected static function get_blocks_metadata() {
 						break;
 					}
 
-					$element_selector[] = $selector . ' ' . $el_selector;
+					$el_selectors = explode( ',', $el_selector );
+					foreach( $el_selectors as $el_selector_item ) {
+						$element_selector[] = $selector . ' ' . $el_selector_item;
+					}
 				}
 				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
 			}
diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
index 6cb5ce994fce4..6c4e5b534a4f7 100644
--- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
@@ -15,7 +15,7 @@
  *
  * @access private
  */
-class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_0 {
+class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_1 {
 	/**
 	 * Returns the theme's data.
 	 *
@@ -115,7 +115,7 @@ public static function get_block_data() {
 
 		// Core here means it's the lower level part of the styles chain.
 		// It can be a core or a third-party block.
-		return new WP_Theme_JSON( $config, 'core' );
+		return new WP_Theme_JSON_Gutenberg( $config, 'core' );
 	}
 
 	/**
diff --git a/lib/load.php b/lib/load.php
index f7cad4597b692..d76ec3181b7cf 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -127,6 +127,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
+require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
 require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 20c20771b4b56..35887f057ca81 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -95,14 +95,6 @@
 				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
 				"radius": "9999px"
 			},
-			"color": {
-				"text": "#fff",
-				"background": "#32373c"
-			},
-			"typography": {
-				"fontSize": "1.125em",
-				"textDecoration": "none"
-			},
 			"spacing": {
 				"padding": {
 					"//": "The extra 2px are added to size solids the same as the outline versions.",
diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index 8e90825a64dfd..674027747f960 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -56,7 +56,16 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"elements": {
+				"button": {
+					"typography": {
+						"fontSize": "0.8em"
+					}
+				}
+			}
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index bba0f5e165ce7..2362f0529eb09 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -21,14 +21,10 @@
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 .wp-block-file__button {
-	background: #32373c;
 	border-radius: 2em;
-	color: $white;
-	font-size: 0.8em;
 	padding: 0.5em 1em;
 
 	&:is(a) {
-		text-decoration: none;
 
 		&:hover,
 		&:visited,
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index d6b54065e41d9..426e34662cde9 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -1,8 +1,6 @@
 .wp-block-search__button {
-	background: #f7f7f7;
 	border: 1px solid #ccc;
 	padding: 0.375em 0.625em;
-	color: #32373c;
 	margin-left: 0.625em;
 	word-break: normal;
 	font-size: inherit;
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index 0be47a7000b53..4f6265a56a920 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -283,7 +283,14 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: value,
 					selector: blockSelectors[ blockName ].selector
 						.split( ',' )
-						.map( ( sel ) => sel + ' ' + ELEMENTS[ elementName ] )
+						.map( ( sel ) => {
+							const elementSelectors =
+								ELEMENTS[ elementName ].split( ',' );
+							return elementSelectors.map(
+								( elementSelector ) =>
+									sel + ' ' + elementSelector
+							);
+						} )
 						.join( ',' ),
 				} );
 			}

From 04a5b42903b85173c1075eebebdc0684695d57ce Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 21 Jun 2022 12:32:49 +0100
Subject: [PATCH 08/10] add missing files

---
 .../class-wp-theme-json-resolver-6-1.php      |  35 +++
 lib/compat/wordpress-6.1/theme.json           | 257 ++++++++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
 create mode 100644 lib/compat/wordpress-6.1/theme.json

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
new file mode 100644
index 0000000000000..58abcc27c04ec
--- /dev/null
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver_6_1 class
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Class that abstracts the processing of the different data sources
+ * for site-level config and offers an API to work with them.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ *
+ * @access private
+ */
+class WP_Theme_JSON_Resolver_6_1 extends WP_Theme_JSON_Resolver_6_0 {
+	/**
+	 * Return core's origin config.
+	 *
+	 * @return WP_Theme_JSON_Gutenberg Entity that holds core data.
+	 */
+	public static function get_core_data() {
+		if ( null !== static::$core ) {
+			return static::$core;
+		}
+
+		$config       = static::read_json_file( __DIR__ . '/theme.json' );
+		$config       = static::translate( $config );
+		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+
+		return static::$core;
+	}
+}
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
new file mode 100644
index 0000000000000..00acba508d033
--- /dev/null
+++ b/lib/compat/wordpress-6.1/theme.json
@@ -0,0 +1,257 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": false,
+		"border": {
+			"color": false,
+			"radius": false,
+			"style": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"custom": true,
+			"customDuotone": true,
+			"customGradient": true,
+			"defaultDuotone": true,
+			"defaultGradients": true,
+			"defaultPalette": true,
+			"duotone": [
+				{
+					"name": "Dark grayscale",
+					"colors": [ "#000000", "#7f7f7f" ],
+					"slug": "dark-grayscale"
+				},
+				{
+					"name": "Grayscale",
+					"colors": [ "#000000", "#ffffff" ],
+					"slug": "grayscale"
+				},
+				{
+					"name": "Purple and yellow",
+					"colors": [ "#8c00b7", "#fcff41" ],
+					"slug": "purple-yellow"
+				},
+				{
+					"name": "Blue and red",
+					"colors": [ "#000097", "#ff4747" ],
+					"slug": "blue-red"
+				},
+				{
+					"name": "Midnight",
+					"colors": [ "#000000", "#00a5ff" ],
+					"slug": "midnight"
+				},
+				{
+					"name": "Magenta and yellow",
+					"colors": [ "#c7005a", "#fff278" ],
+					"slug": "magenta-yellow"
+				},
+				{
+					"name": "Purple and green",
+					"colors": [ "#a60072", "#67ff66" ],
+					"slug": "purple-green"
+				},
+				{
+					"name": "Blue and orange",
+					"colors": [ "#1900d8", "#ffa96b" ],
+					"slug": "blue-orange"
+				}
+			],
+			"gradients": [
+				{
+					"name": "Vivid cyan blue to vivid purple",
+					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+					"slug": "vivid-cyan-blue-to-vivid-purple"
+				},
+				{
+					"name": "Light green cyan to vivid green cyan",
+					"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+					"slug": "light-green-cyan-to-vivid-green-cyan"
+				},
+				{
+					"name": "Luminous vivid amber to luminous vivid orange",
+					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
+				},
+				{
+					"name": "Luminous vivid orange to vivid red",
+					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+					"slug": "luminous-vivid-orange-to-vivid-red"
+				},
+				{
+					"name": "Very light gray to cyan bluish gray",
+					"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+					"slug": "very-light-gray-to-cyan-bluish-gray"
+				},
+				{
+					"name": "Cool to warm spectrum",
+					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+					"slug": "cool-to-warm-spectrum"
+				},
+				{
+					"name": "Blush light purple",
+					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+					"slug": "blush-light-purple"
+				},
+				{
+					"name": "Blush bordeaux",
+					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+					"slug": "blush-bordeaux"
+				},
+				{
+					"name": "Luminous dusk",
+					"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+					"slug": "luminous-dusk"
+				},
+				{
+					"name": "Pale ocean",
+					"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+					"slug": "pale-ocean"
+				},
+				{
+					"name": "Electric grass",
+					"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+					"slug": "electric-grass"
+				},
+				{
+					"name": "Midnight",
+					"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+					"slug": "midnight"
+				}
+			],
+			"link": false,
+			"palette": [
+				{
+					"name": "Black",
+					"slug": "black",
+					"color": "#000000"
+				},
+				{
+					"name": "Cyan bluish gray",
+					"slug": "cyan-bluish-gray",
+					"color": "#abb8c3"
+				},
+				{
+					"name": "White",
+					"slug": "white",
+					"color": "#ffffff"
+				},
+				{
+					"name": "Pale pink",
+					"slug": "pale-pink",
+					"color": "#f78da7"
+				},
+				{
+					"name": "Vivid red",
+					"slug": "vivid-red",
+					"color": "#cf2e2e"
+				},
+				{
+					"name": "Luminous vivid orange",
+					"slug": "luminous-vivid-orange",
+					"color": "#ff6900"
+				},
+				{
+					"name": "Luminous vivid amber",
+					"slug": "luminous-vivid-amber",
+					"color": "#fcb900"
+				},
+				{
+					"name": "Light green cyan",
+					"slug": "light-green-cyan",
+					"color": "#7bdcb5"
+				},
+				{
+					"name": "Vivid green cyan",
+					"slug": "vivid-green-cyan",
+					"color": "#00d084"
+				},
+				{
+					"name": "Pale cyan blue",
+					"slug": "pale-cyan-blue",
+					"color": "#8ed1fc"
+				},
+				{
+					"name": "Vivid cyan blue",
+					"slug": "vivid-cyan-blue",
+					"color": "#0693e3"
+				},
+				{
+					"name": "Vivid purple",
+					"slug": "vivid-purple",
+					"color": "#9b51e0"
+				}
+			],
+			"text": true
+		},
+		"spacing": {
+			"blockGap": null,
+			"margin": false,
+			"padding": false,
+			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
+		},
+		"typography": {
+			"customFontSize": true,
+			"dropCap": true,
+			"fontSizes": [
+				{
+					"name": "Small",
+					"slug": "small",
+					"size": "13px"
+				},
+				{
+					"name": "Medium",
+					"slug": "medium",
+					"size": "20px"
+				},
+				{
+					"name": "Large",
+					"slug": "large",
+					"size": "36px"
+				},
+				{
+					"name": "Extra Large",
+					"slug": "x-large",
+					"size": "42px"
+				}
+			],
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"lineHeight": false,
+			"textDecoration": true,
+			"textTransform": true
+		},
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": true
+				}
+			},
+			"core/pullquote": {
+				"border": {
+					"color": true,
+					"radius": true,
+					"style": true,
+					"width": true
+				}
+			}
+		}
+	},
+	"styles": {
+		"elements": {
+			"button": {
+				"color": {
+					"text": "#fff",
+					"background": "#32373c"
+				},
+				"typography": {
+					"fontSize": "1.125em",
+					"textDecoration": "none"
+				}
+			}
+		},
+		"spacing": { "blockGap": "24px" }
+	}
+}

From af5b0aaba070abc4c2b9f48e7249f2bfcefd52e0 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 Jun 2022 11:51:09 +0100
Subject: [PATCH 09/10] lint fix

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 968b7c7d43e7b..2f9ff0aac2ebc 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -92,7 +92,7 @@ protected static function get_blocks_metadata() {
 					}
 
 					$el_selectors = explode( ',', $el_selector );
-					foreach( $el_selectors as $el_selector_item ) {
+					foreach ( $el_selectors as $el_selector_item ) {
 						$element_selector[] = $selector . ' ' . $el_selector_item;
 					}
 				}

From 2615d79432f4885101dd474660b8195f5a9bb8df Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 22 Jun 2022 12:03:34 +0100
Subject: [PATCH 10/10] add comment

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 2f9ff0aac2ebc..b02fffdbbbd0d 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -91,6 +91,8 @@ protected static function get_blocks_metadata() {
 						break;
 					}
 
+					// This converts selectors like '.wp-element-button, .wp-block-button__link'
+					// to an array, so that the block selector is added to both parts of the selector.
 					$el_selectors = explode( ',', $el_selector );
 					foreach ( $el_selectors as $el_selector_item ) {
 						$element_selector[] = $selector . ' ' . $el_selector_item;