@wordpress/edit-site 4.9.0 → 4.12.0

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

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+	useGradientsPerOrigin,
+} from './hooks';
+
+function ScreenHeadingColor( { name } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ gradients ] = useSetting( 'color.gradients', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useSetting(
+		'color.customGradient',
+		name
+	);
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const gradientsPerOrigin = useGradientsPerOrigin( name );
+
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const hasBackgroundColor =
+		supports.includes( 'backgroundColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		supports.includes( 'background' ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
+
+	const [ color, setColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name
+	);
+	const [ userColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name,
+		'user'
+	);
+
+	const [ backgroundColor, setBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name
+	);
+	const [ userBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name,
+		'user'
+	);
+
+	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
+	}
+
+	let backgroundSettings = {};
+	if ( hasBackgroundColor ) {
+		backgroundSettings = {
+			colorValue: backgroundColor,
+			onColorChange: setBackgroundColor,
+		};
+		if ( backgroundColor ) {
+			backgroundSettings.clearable =
+				backgroundColor === userBackgroundColor;
+		}
+	}
+
+	let gradientSettings = {};
+	if ( hasGradientColor ) {
+		gradientSettings = {
+			gradientValue: gradient,
+			onGradientChange: setGradient,
+		};
+		if ( gradient ) {
+			gradientSettings.clearable = gradient === userGradient;
+		}
+	}
+
+	const controlProps = {
+		...backgroundSettings,
+		...gradientSettings,
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Headings' ) }
+				description={ __(
+					'Set the default color used for headings across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-heading-color">
+				<h4>{ __( 'Select heading level' ) }</h4>
+
+				<ToggleGroupControl
+					label={ __( 'Select heading level' ) }
+					hideLabelFromVision={ true }
+					value={ selectedLevel }
+					onChange={ setCurrentTab }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="heading"
+						/* translators: 'All' refers to selecting all heading levels 
+						and applying the same style to h1-h6. */
+						label={ __( 'All' ) }
+					/>
+					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
+					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
+					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
+					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
+					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
+					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
+				</ToggleGroupControl>
+			</div>
+			{ hasTextColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Text color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Text color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-text-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ color }
+						onColorChange={ setColor }
+						clearable={ color === userColor }
+					/>
+				</div>
+			) }
+			{ hasBackgroundColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Background color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Background color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-background-color__control"
+						colors={ colorsPerOrigin }
+						gradients={ gradientsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						disableCustomGradients={ ! areCustomGradientsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						{ ...controlProps }
+					/>
+				</div>
+			) }
+		</>
+	);
+}
+
+export default ScreenHeadingColor;

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-typography-element.js

@@ -18,6 +18,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on the links.' ),
 		title: __( 'Links' ),
 	},
+	heading: {
+		description: __( 'Manage the fonts and typography used on headings.' ),
+		title: __( 'Headings' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),

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

@@ -104,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="heading"
+								label={ __( 'Headings' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }

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

@@ -21,6 +21,11 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-typography-panel__half-width-control {
+	width: calc((100% - #{$grid-unit-30}) / 2);
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
 }
@@ -41,6 +46,7 @@
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		flex-shrink: 0;
 	}
 }
 
@@ -66,19 +72,9 @@
 	margin: 0;
 }
 
-.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-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
 	padding: $grid-unit-20;
 }
 
@@ -111,4 +107,11 @@
 .edit-site-global-styles__color-indicator-wrapper {
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
+	flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

package/src/components/global-styles/test/typography-utils.js

@@ -0,0 +1,130 @@
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from '../typography-utils';
+
+describe( 'typography utils', () => {
+	describe( 'getTypographyFontSizeValue', () => {
+		it( 'should return the expected values', () => {
+			[
+				// Default return non-fluid value.
+				{
+					preset: {
+						size: '28px',
+					},
+					typographySettings: undefined,
+					expected: '28px',
+				},
+				// Should return non-fluid value when fluid is `false`.
+				{
+					preset: {
+						size: '28px',
+						fluid: false,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '28px',
+				},
+				// Should return fluid value.
+				{
+					preset: {
+						size: '1.75rem',
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
+				},
+				// Should return default fluid values with empty fluid array.
+				{
+					preset: {
+						size: '28px',
+						fluid: [],
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+
+				// Should return default fluid values with null values.
+				{
+					preset: {
+						size: '28px',
+						fluid: null,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+
+				// Should return size with invalid fluid units.
+				{
+					preset: {
+						size: '10em',
+						fluid: {
+							min: '20vw',
+							max: '50%',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '10em',
+				},
+				// Should return fluid clamp value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							min: '20px',
+							max: '50rem',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+				},
+				// Should return clamp value with default fluid max value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							min: '2.6rem',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+				},
+				// Should return clamp value with default fluid min value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							max: '80px',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
+				},
+			].forEach( ( { preset, typographySettings, expected } ) => {
+				expect(
+					getTypographyFontSizeValue( preset, typographySettings )
+				).toBe( expected );
+			} );
+		} );
+	} );
+} );