Update typography global styles to use new panel

WordPress · Jul 29, 2021 · 86f2bef · 86f2bef
1 parent 4e83289
commit 86f2bef
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 64 deletions.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -45,6 +45,8 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
+export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalImageSizeControl } from './image-size-control';

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -60,6 +60,7 @@ function FontSizePicker(
 		onChange,
 		value,
 		withSlider = false,
+		allowReset = true,
 	},
 	ref
 ) {
@@ -132,17 +133,19 @@ function FontSizePicker(
 						units={ units }
 					/>
 				) }
-				<Button
-					className="components-color-palette__clear"
-					disabled={ value === undefined }
-					onClick={ () => {
-						onChange( undefined );
-					} }
-					isSmall
-					variant="secondary"
-				>
-					{ __( 'Reset' ) }
-				</Button>
+				{ allowReset && (
+					<Button
+						className="components-color-palette__clear"
+						disabled={ value === undefined }
+						onClick={ () => {
+							onChange( undefined );
+						} }
+						isSmall
+						variant="secondary"
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				) }
 			</div>
 			{ withSlider && (
 				<RangeControl

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -38,3 +38,19 @@
 		margin-bottom: 0;
 	}
 }
+
+.edit-site {
+	.components-font-size-picker__controls {
+		.components-font-size-picker__select {
+			flex: 1;
+
+			> button {
+				width: 100%;
+			}
+		}
+
+		.components-unit-control-wrapper {
+			margin-right: 0;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js
@@ -6,8 +6,14 @@ import {
 	__experimentalFontFamilyControl as FontFamilyControl,
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
+	__experimentalTextDecorationControl as TextDecorationControl,
+	__experimentalTextTransformControl as TextTransformControl,
 } from '@wordpress/block-editor';
-import { PanelBody, FontSizePicker } from '@wordpress/components';
+import {
+	__experimentalProgressiveDisclosurePanel as ProgressiveDisclosurePanel,
+	__experimentalProgressiveDisclosurePanelItem as ProgressiveDisclosurePanelItem,
+	FontSizePicker,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,11 +25,17 @@ export function useHasTypographyPanel( { supports, name } ) {
 	const hasLineHeight = useHasLineHeightControl( { supports, name } );
 	const hasFontAppearance = useHasAppearanceControl( { supports, name } );
 	const hasLetterSpacing = useHasLetterSpacingControl( { supports, name } );
+	const hasTextDecoration = useHasTextDecorationControl( { supports, name } );
+	const hasTextTransform = useHasTextTransformControl( { supports, name } );
+
 	return (
 		hasLineHeight ||
 		hasFontAppearance ||
 		hasLetterSpacing ||
-		supports.includes( 'fontSize' )
+		hasTextDecoration ||
+		hasTextTransform ||
+		supports.includes( 'fontSize' ) ||
+		supports.includes( 'fontFamily' )
 	);
 }
 
@@ -33,7 +45,6 @@ function useHasLineHeightControl( { supports, name } ) {
 		supports.includes( 'lineHeight' )
 	);
 }
-
 function useHasAppearanceControl( { supports, name } ) {
 	const hasFontStyles =
 		useSetting( 'typography.customFontStyle', name ) &&
@@ -44,6 +55,20 @@ function useHasAppearanceControl( { supports, name } ) {
 	return hasFontStyles || hasFontWeights;
 }
 
+function useHasTextDecorationControl( { supports, name } ) {
+	return (
+		useSetting( 'typography.customTextDecoration', name ) &&
+		supports.includes( 'textDecoration' )
+	);
+}
+
+function useHasTextTransformControl( { supports, name } ) {
+	return (
+		useSetting( 'typography.customTextTransform', name ) &&
+		supports.includes( 'textTransform' )
+	);
+}
+
 function useHasLetterSpacingControl( { supports, name } ) {
 	return (
 		useSetting( 'typography.customLetterSpacing', name ) &&
@@ -56,76 +81,188 @@ export default function TypographyPanel( {
 	getStyle,
 	setStyle,
 } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const createHasValueCallback = ( feature ) => () =>
+		!! getStyle( name, feature, 'user' );
+
+	const createResetCallback = ( feature ) => () =>
+		setStyle( name, feature, undefined );
+
+	const handleOnChange = ( feature ) => ( value ) => {
+		setStyle( name, feature, value );
+	};
+
+	// Font Family.
+	const fontFamilies = useSetting( 'typography.fontFamilies', name );
+	const showFontFamilyControl = supports.includes( 'fontFamily' );
+
+	// Font Size.
 	const fontSizes = useSetting( 'typography.fontSizes', name );
+	const showFontSizeControl = supports.includes( 'fontSize' );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
 		name
 	);
-	const fontFamilies = useSetting( 'typography.fontFamilies', name );
+
+	// Font Appearance.
+	const showAppearanceControl = useHasAppearanceControl( { supports, name } );
+	const fontStyle = getStyle( name, 'fontStyle' );
+	const fontWeight = getStyle( name, 'fontWeight' );
+	const hasFontAppearanceValue = () => !! fontStyle || !! fontWeight;
+	const resetFontAppearance = () => {
+		setStyle( name, 'fontStyle', undefined );
+		setStyle( name, 'fontWeight', undefined );
+	};
+
 	const hasFontStyles =
 		useSetting( 'typography.customFontStyle', name ) &&
 		supports.includes( 'fontStyle' );
+
 	const hasFontWeights =
 		useSetting( 'typography.customFontWeight', name ) &&
 		supports.includes( 'fontWeight' );
-	const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } );
-	const hasAppearanceControl = useHasAppearanceControl( { supports, name } );
-	const hasLetterSpacingControl = useHasLetterSpacingControl( {
+
+	// Line Height.
+	const showLineHeightControl = useHasLineHeightControl( { supports, name } );
+
+	// Text Decoration.
+	const showTextDecoration = useHasTextDecorationControl( {
 		supports,
 		name,
 	} );
 
+	// Text Transform.
+	const showTextTransform = useHasTextTransformControl( { supports, name } );
+
+	// Letter Spacing.
+	const showLetterSpacingControl = useHasLetterSpacingControl( {
+		supports,
+		name,
+	} );
+
+	// Reset all the typography related global styles.
+	const resetAll = () => {
+		setStyle( name, 'fontFamily', undefined );
+		setStyle( name, 'fontSize', undefined );
+		setStyle( name, 'fontStyle', undefined );
+		setStyle( name, 'fontWeight', undefined );
+		setStyle( name, 'lineHeight', undefined );
+		setStyle( name, 'textDecoration', undefined );
+		setStyle( name, 'textTransform', undefined );
+		setStyle( name, 'letterSpacing', undefined );
+	};
+
 	return (
-		<PanelBody title={ __( 'Typography' ) } initialOpen={ true }>
-			{ supports.includes( 'fontFamily' ) && (
-				<FontFamilyControl
-					fontFamilies={ fontFamilies }
-					value={ getStyle( name, 'fontFamily' ) }
-					onChange={ ( value ) =>
-						setStyle( name, 'fontFamily', value )
-					}
-				/>
+		<ProgressiveDisclosurePanel
+			label={ __( 'Typography options' ) }
+			title={ __( 'Typography' ) }
+			resetAll={ resetAll }
+			className="typography-controls"
+		>
+			{ showFontFamilyControl && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'fontFamily' ) }
+					label={ __( 'Font family' ) }
+					onDeselect={ createResetCallback( 'fontFamily' ) }
+					isShownByDefault={ true }
+				>
+					<FontFamilyControl
+						fontFamilies={ fontFamilies }
+						value={ getStyle( name, 'fontFamily' ) }
+						onChange={ handleOnChange( 'fontFamily' ) }
+					/>
+				</ProgressiveDisclosurePanelItem>
+			) }
+			{ showFontSizeControl && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'fontSize' ) }
+					label={ __( 'Font size' ) }
+					onDeselect={ createResetCallback( 'fontSize' ) }
+					isShownByDefault={ true }
+				>
+					<FontSizePicker
+						value={ getStyle( name, 'fontSize' ) }
+						onChange={ handleOnChange( 'fontSize' ) }
+						fontSizes={ fontSizes }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						allowReset={ false }
+					/>
+				</ProgressiveDisclosurePanelItem>
+			) }
+			{ showAppearanceControl && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ hasFontAppearanceValue }
+					label={ __( 'Appearance' ) }
+					onDeselect={ resetFontAppearance }
+					isShownByDefault={ true }
+				>
+					<FontAppearanceControl
+						value={ { fontStyle, fontWeight } }
+						onChange={ ( {
+							fontStyle: newFontStyle,
+							fontWeight: newFontWeight,
+						} ) => {
+							setStyle( name, 'fontStyle', newFontStyle );
+							setStyle( name, 'fontWeight', newFontWeight );
+						} }
+						hasFontStyles={ hasFontStyles }
+						hasFontWeights={ hasFontWeights }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ supports.includes( 'fontSize' ) && (
-				<FontSizePicker
-					value={ getStyle( name, 'fontSize' ) }
-					onChange={ ( value ) =>
-						setStyle( name, 'fontSize', value )
-					}
-					fontSizes={ fontSizes }
-					disableCustomFontSizes={ disableCustomFontSizes }
-				/>
+			{ showLineHeightControl && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'lineHeight' ) }
+					label={ __( 'Line height' ) }
+					onDeselect={ createResetCallback( 'lineHeight' ) }
+					isShownByDefault={ true }
+				>
+					<LineHeightControl
+						value={ getStyle( name, 'lineHeight' ) }
+						onChange={ handleOnChange( 'lineHeight' ) }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ hasLineHeightEnabled && (
-				<LineHeightControl
-					value={ getStyle( name, 'lineHeight' ) }
-					onChange={ ( value ) =>
-						setStyle( name, 'lineHeight', value )
-					}
-				/>
+			{ showTextDecoration && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'textDecoration' ) }
+					label={ __( 'Decoration' ) }
+					onDeselect={ createResetCallback( 'textDecoration' ) }
+					isShownByDefault={ true }
+				>
+					<TextDecorationControl
+						value={ getStyle( name, 'textDecoration' ) }
+						onChange={ handleOnChange( 'textDecoration' ) }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ hasAppearanceControl && (
-				<FontAppearanceControl
-					value={ {
-						fontStyle: getStyle( name, 'fontStyle' ),
-						fontWeight: getStyle( name, 'fontWeight' ),
-					} }
-					onChange={ ( { fontStyle, fontWeight } ) => {
-						setStyle( name, 'fontStyle', fontStyle );
-						setStyle( name, 'fontWeight', fontWeight );
-					} }
-					hasFontStyles={ hasFontStyles }
-					hasFontWeights={ hasFontWeights }
-				/>
+			{ showTextTransform && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'textTransform' ) }
+					label={ __( 'Letter case' ) }
+					onDeselect={ createResetCallback( 'textTransform' ) }
+					isShownByDefault={ true }
+				>
+					<TextTransformControl
+						value={ getStyle( name, 'textTransform' ) }
+						onChange={ handleOnChange( 'textTransform' ) }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-			{ hasLetterSpacingControl && (
-				<LetterSpacingControl
-					value={ getStyle( name, 'letterSpacing' ) }
-					onChange={ ( value ) =>
-						setStyle( name, 'letterSpacing', value )
-					}
-				/>
+			{ showLetterSpacingControl && (
+				<ProgressiveDisclosurePanelItem
+					hasValue={ createHasValueCallback( 'letterSpacing' ) }
+					label={ __( 'Letter-spacing' ) }
+					onDeselect={ createResetCallback( 'letterSpacing' ) }
+					isShownByDefault={ true }
+				>
+					<LetterSpacingControl
+						value={ getStyle( name, 'letterSpacing' ) }
+						onChange={ handleOnChange( 'letterSpacing' ) }
+					/>
+				</ProgressiveDisclosurePanelItem>
 			) }
-		</PanelBody>
+		</ProgressiveDisclosurePanel>
 	);
 }