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..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,7 +91,12 @@ protected static function get_blocks_metadata() {
break;
}
- $element_selector[] = $selector . ' ' . $el_selector;
+ // 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;
+ }
}
static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
}
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 @@
+ 0 || areCustomSolidsEnabled ); // TODO - use the right check
+
+ const [ buttonTextColor, setButtonTextColor ] = useStyle(
+ 'elements.button.color.text',
+ name
+ );
+ const [ userButtonTextColor ] = useStyle(
+ 'elements.button.color.text',
+ name,
+ 'user'
+ );
+
+ const [ buttonBgColor, setButtonBgColor ] = useStyle(
+ 'elements.button.color.background',
+ name
+ );
+ const [ userButtonBgColor ] = useStyle(
+ 'elements.button.color.background',
+ name,
+ 'user'
+ );
+
+ if ( ! hasButtonColor ) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ { __( 'Text color' ) }
+
+
+
+
+
+ { __( 'Background color' ) }
+
+
+
+
+ );
+}
+
+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..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';
@@ -88,6 +89,33 @@ 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 );
+ const [ bgColor ] = useStyle( 'elements.button.color.background', name );
+
+ if ( ! hasSupport ) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ { __( 'Buttons' ) }
+
+
+ );
+}
+
function ScreenColors( { name } ) {
const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -119,6 +147,10 @@ function ScreenColors( { name } ) {
name={ name }
parentMenu={ parentMenu }
/>
+
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' ) }
/>
+