@wordpress/edit-site 4.11.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-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;
 	}
 }
 
@@ -72,12 +78,6 @@
 	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;
 
@@ -107,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 );
+			} );
+		} );
+	} );
+} );

package/src/components/global-styles/test/use-global-styles-output.js

@@ -13,6 +13,7 @@ import {
 	getBlockSelectors,
 	toCustomProperties,
 	toStyles,
+	getStylesDeclarations,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -478,7 +479,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
-					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
 					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
@@ -582,7 +583,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flex { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(.is-layout-flex) { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -647,7 +648,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flex { gap: 2em; }'
+				':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
 			);
 		} );
 	} );
@@ -681,4 +682,66 @@ describe( 'global styles renderer', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getStylesDeclarations', () => {
+		const blockStyles = {
+			spacing: {
+				padding: {
+					top: '33px',
+					right: '33px',
+					bottom: '33px',
+					left: '33px',
+				},
+			},
+			color: {
+				background: 'var:preset|color|light-green-cyan',
+			},
+			typography: {
+				fontFamily: 'sans-serif',
+			},
+		};
+
+		it( 'Should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', true )
+			).toEqual( [
+				'font-family: sans-serif',
+				'--wp--style--root--padding-top: 33px',
+				'--wp--style--root--padding-right: 33px',
+				'--wp--style--root--padding-bottom: 33px',
+				'--wp--style--root--padding-left: 33px',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+			] );
+		} );
+
+		it( 'Should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', false )
+			).toEqual( [
+				'font-family: sans-serif',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+			] );
+		} );
+
+		it( 'Should not output padding variables if selector is not root', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-button__link',
+					true
+				)
+			).toEqual( [
+				'font-family: sans-serif',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+			] );
+		} );
+	} );
 } );

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

@@ -11,8 +11,11 @@ import {
 	PanelBody,
 	FontSizePicker,
 	__experimentalSpacer as Spacer,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -59,9 +62,14 @@ function useHasLetterSpacingControl( name ) {
 }
 
 export default function TypographyPanel( { name, element } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ selectedLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
@@ -78,6 +86,12 @@ export default function TypographyPanel( { name, element } ) {
 	const hasAppearanceControl = useHasAppearanceControl( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
 
+	/* Disable font size controls when the option to style all headings is selected. */
+	let hasFontSizeEnabled = supports.includes( 'fontSize' );
+	if ( element === 'heading' && selectedLevel === 'heading' ) {
+		hasFontSizeEnabled = false;
+	}
+
 	const [ fontFamily, setFontFamily ] = useStyle(
 		prefix + 'typography.fontFamily',
 		name
@@ -130,30 +144,79 @@ export default function TypographyPanel( { name, element } ) {
 			>
 				Aa
 			</div>
-
+			{ element === 'heading' && (
+				<div>
+					<h4>{ __( 'Select heading level' ) }</h4>
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision={ true }
+						value={ selectedLevel }
+						onChange={ setCurrentTab }
+						isBlock
+						size="__unstable-large"
+					>
+						<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>
+			) }
 			{ supports.includes( 'fontFamily' ) && (
 				<FontFamilyControl
 					fontFamilies={ fontFamilies }
 					value={ fontFamily }
 					onChange={ setFontFamily }
+					size="__unstable-large"
 				/>
 			) }
-			{ supports.includes( 'fontSize' ) && (
+			{ hasFontSizeEnabled && (
 				<FontSizePicker
 					value={ fontSize }
 					onChange={ setFontSize }
 					fontSizes={ fontSizes }
 					disableCustomFontSizes={ disableCustomFontSizes }
+					size="__unstable-large"
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<Spacer marginBottom={ 6 }>
-					<LineHeightControl
-						__nextHasNoMarginBottom={ true }
-						value={ lineHeight }
-						onChange={ setLineHeight }
-					/>
-				</Spacer>
+				<div className="edit-site-typography-panel__half-width-control">
+					<Spacer marginBottom={ 6 }>
+						<LineHeightControl
+							__nextHasNoMarginBottom={ true }
+							__unstableInputWidth="auto"
+							value={ lineHeight }
+							onChange={ setLineHeight }
+							size="__unstable-large"
+						/>
+					</Spacer>
+				</div>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl
@@ -170,13 +233,19 @@ export default function TypographyPanel( { name, element } ) {
 					} }
 					hasFontStyles={ hasFontStyles }
 					hasFontWeights={ hasFontWeights }
+					size="__unstable-large"
+					__nextUnconstrainedWidth
 				/>
 			) }
 			{ hasLetterSpacingControl && (
-				<LetterSpacingControl
-					value={ letterSpacing }
-					onChange={ setLetterSpacing }
-				/>
+				<div className="edit-site-typography-panel__half-width-control">
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</div>
 			) }
 		</PanelBody>
 	);