Add ui for button elements

WordPress · Jun 16, 2022 · 7f74df5 · 7f74df5
1 parent 9f37df4
commit 7f74df5
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 0 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>