@wordpress/edit-site 4.7.0 → 4.10.0

package/src/components/global-styles/screen-block-list.js

@@ -40,10 +40,10 @@ function useSortedBlockTypes() {
 		type.push( block );
 		return blocks;
 	};
-	const {
-		core: coreItems,
-		noncore: nonCoreItems,
-	} = blockItems.reduce( groupByType, { core: [], noncore: [] } );
+	const { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(
+		groupByType,
+		{ core: [], noncore: [] }
+	);
 	return [ ...coreItems, ...nonCoreItems ];
 }
 
@@ -60,8 +60,17 @@ function BlockMenuItem( { block } ) {
 		return null;
 	}
 
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+		__( '%s block styles' ),
+		block.title
+	);
+
 	return (
-		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem
+			path={ '/blocks/' + block.name }
+			aria-label={ navigationButtonLabel }
+		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>

package/src/components/global-styles/screen-button-color.js

@@ -0,0 +1,102 @@
+/**
+ * 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 [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const hasButtonColor =
+		supports.includes( 'buttonColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	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 (
+		<>
+			<ScreenHeader
+				title={ __( 'Buttons' ) }
+				description={ __(
+					'Set the default colors used for buttons across the site.'
+				) }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Text color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonTextColor }
+				onColorChange={ setButtonTextColor }
+				clearable={ buttonTextColor === userButtonTextColor }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Background color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonBgColor }
+				onColorChange={ setButtonBgColor }
+				clearable={ buttonBgColor === userButtonBgColor }
+			/>
+		</>
+	);
+}
+
+export default ScreenButtonColor;

package/src/components/global-styles/screen-color-palette.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { TabPanel } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -16,8 +12,6 @@ import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
-	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-
 	return (
 		<>
 			<ScreenHeader
@@ -26,27 +20,31 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<ToggleGroupControl
-				className="edit-site-screen-color-palette-toggle"
-				value={ currentTab }
-				onChange={ setCurrentTab }
-				label={ __( 'Select palette type' ) }
-				hideLabelFromVision
-				isBlock
+			<TabPanel
+				tabs={ [
+					{
+						name: 'solid',
+						title: 'Solid color',
+						value: 'solid',
+					},
+					{
+						name: 'gradient',
+						title: 'Gradient',
+						value: 'gradient',
+					},
+				] }
 			>
-				<ToggleGroupControlOption
-					value="solid"
-					label={ __( 'Solid' ) }
-				/>
-				<ToggleGroupControlOption
-					value="gradient"
-					label={ __( 'Gradient' ) }
-				/>
-			</ToggleGroupControl>
-			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
-			{ currentTab === 'gradient' && (
-				<GradientPalettePanel name={ name } />
-			) }
+				{ ( tab ) => (
+					<>
+						{ tab.value === 'solid' && (
+							<ColorPalettePanel name={ name } />
+						) }
+						{ tab.value === 'gradient' && (
+							<GradientPalettePanel name={ name } />
+						) }
+					</>
+				) }
+			</TabPanel>
 		</>
 	);
 }

package/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';
@@ -33,11 +34,15 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/background' }
+			aria-label={ __( 'Colors background styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
+						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
@@ -56,10 +61,16 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/text' }
+			aria-label={ __( 'Colors text styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
+					<ColorIndicator
+						colorValue={ color }
+						data-testid="text-color-indicator"
+					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
@@ -71,23 +82,59 @@ function LinkColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useStyle( 'elements.link.color.text', name );
+	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/link' }
+			aria-label={ __( 'Colors link styles' ) }
+		>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
-				</ColorIndicatorWrapper>
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ colorHover } />
+					</ColorIndicatorWrapper>
+				</ZStack>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
 }
 
+function ButtonColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'buttonColor' );
+	const [ color ] = useStyle( 'elements.button.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+			<HStack justify="flex-start">
+				<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>
+	);
+}
+
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
@@ -119,6 +166,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<ButtonColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 						</ItemGroup>
 					</VStack>
 				</VStack>

package/src/components/global-styles/screen-link-color.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
+import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -29,40 +29,82 @@ function ScreenLinkColor( { name } ) {
 		isLinkEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
-	const [ linkColor, setLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name
-	);
-	const [ userLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name,
-		'user'
-	);
+	const pseudoStates = {
+		default: {
+			label: __( 'Default' ),
+			value: useStyle( 'elements.link.color.text', name )[ 0 ],
+			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
+			userValue: useStyle(
+				'elements.link.color.text',
+				name,
+				'user'
+			)[ 0 ],
+		},
+		hover: {
+			label: __( 'Hover' ),
+			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
+			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
+			userValue: useStyle(
+				'elements.link.:hover.color.text',
+				name,
+				'user'
+			)[ 0 ],
+		},
+	};
 
 	if ( ! hasLinkColor ) {
 		return null;
 	}
 
+	const tabs = Object.entries( pseudoStates ).map(
+		( [ selector, config ] ) => {
+			return {
+				name: selector,
+				title: config.label,
+				className: `color-text-${ selector }`,
+			};
+		}
+	);
+
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Links' ) }
 				description={ __(
-					'Set the default color used for links across the site.'
+					'Set the colors used for links across the site.'
 				) }
 			/>
-			<ColorGradientControl
-				className="edit-site-screen-link-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ linkColor }
-				onColorChange={ setLinkColor }
-				clearable={ linkColor === userLinkColor }
-			/>
+
+			<TabPanel tabs={ tabs }>
+				{ ( tab ) => {
+					const pseudoSelectorConfig =
+						pseudoStates[ tab.name ] ?? null;
+
+					if ( ! pseudoSelectorConfig ) {
+						return null;
+					}
+
+					return (
+						<>
+							<ColorGradientControl
+								className="edit-site-screen-link-color__control"
+								colors={ colorsPerOrigin }
+								disableCustomColors={ ! areCustomSolidsEnabled }
+								__experimentalHasMultipleOrigins
+								showTitle={ false }
+								enableAlpha
+								__experimentalIsRenderedInSidebar
+								colorValue={ pseudoSelectorConfig.value }
+								onColorChange={ pseudoSelectorConfig.handler }
+								clearable={
+									pseudoSelectorConfig.value ===
+									pseudoSelectorConfig.userValue
+								}
+							/>
+						</>
+					);
+				} }
+			</TabPanel>
 		</>
 	);
 }

package/src/components/global-styles/screen-root.js

@@ -28,9 +28,10 @@ import StylesPreview from './preview';
 function ScreenRoot() {
 	const { variations } = useSelect( ( select ) => {
 		return {
-			variations: select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations(),
 		};
 	}, [] );
 
@@ -45,7 +46,10 @@ function ScreenRoot() {
 					</Card>
 					{ !! variations?.length && (
 						<ItemGroup>
-							<NavigationButtonAsItem path="/variations">
+							<NavigationButtonAsItem
+								path="/variations"
+								aria-label={ __( 'Browse styles' ) }
+							>
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Browse styles' ) }
@@ -81,7 +85,10 @@ function ScreenRoot() {
 					) }
 				</Spacer>
 				<ItemGroup>
-					<NavigationButtonAsItem path="/blocks">
+					<NavigationButtonAsItem
+						path="/blocks"
+						aria-label={ __( 'Blocks styles' ) }
+					>
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor

package/src/components/global-styles/screen-style-variations.js

@@ -79,6 +79,7 @@ function Variation( { variation } ) {
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
 				aria-label={ variation?.title }
+				aria-current={ isActive }
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
@@ -96,9 +97,10 @@ function Variation( { variation } ) {
 function ScreenStyleVariations() {
 	const { variations } = useSelect( ( select ) => {
 		return {
-			variations: select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations(),
 		};
 	}, [] );
 
@@ -109,7 +111,11 @@ function ScreenStyleVariations() {
 				settings: {},
 				styles: {},
 			},
-			...variations,
+			...variations.map( ( variation ) => ( {
+				...variation,
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			} ) ),
 		];
 	}, [ variations ] );
 

package/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 } ) {

package/src/components/global-styles/screen-typography.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
@@ -43,8 +43,17 @@ function Item( { name, parentMenu, element, label } ) {
 		return null;
 	}
 
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+		__( 'Typography %s styles' ),
+		label
+	);
+
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/typography/' + element }
+			aria-label={ navigationButtonLabel }
+		>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -95,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="button"
+								label={ __( 'Buttons' ) }
+							/>
 						</ItemGroup>
 					</VStack>
 				</div>

package/src/components/global-styles/style.scss

@@ -57,21 +57,27 @@
 	font-size: 11px !important;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-	margin-right: $grid-unit-20;
-	margin-left: $grid-unit-20;
-	width: unset;
-	.components-toggle-group-control {
-		min-height: $grid-unit-40;
-	}
+.edit-site-global-styles-section-title {
+	color: $gray-800;
+	font-weight: 600;
+	line-height: 1.2;
+	padding: $grid-unit-20;
+	padding-bottom: 0;
+	margin: 0;
 }
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
 	padding: $grid-unit-20;
 }
 
+.edit-site-screen-background-color__control {
+	.block-editor-color-gradient-control__tab-panel {
+		padding: $grid-unit-20;
+	}
+}
+
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;