Add Letter-spacing and enable this for site title and site tagline (#…

…31118)

* Add Letter-spacing and enable this for site title and site tagline

lib/block-supports/typography.php

@@ -21,13 +21,15 @@ function gutenberg_register_typography_support( $block_type ) {
 	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
 	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
+	$has_letter_spacing_support  = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );
 
 	$has_typography_support = $has_font_size_support
 		|| $has_font_weight_support
 		|| $has_font_style_support
 		|| $has_line_height_support
 		|| $has_text_transform_support
-		|| $has_text_decoration_support;
+		|| $has_text_decoration_support
+		|| $has_letter_spacing_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -72,6 +74,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
 	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
+	$has_letter_spacing_support  = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false );
 
 	$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
 
@@ -151,6 +154,13 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		}
 	}
 
+	if ( $has_letter_spacing_support ) {
+		$letter_spacing_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' );
+		if ( $letter_spacing_style ) {
+			$styles[] = $letter_spacing_style;
+		}
+	}
+
 	if ( ! empty( $classes ) ) {
 		$attributes['class'] = implode( ' ', $classes );
 	}

lib/class-wp-theme-json-gutenberg.php

@@ -73,6 +73,7 @@ class WP_Theme_JSON_Gutenberg {
 			'fontSize'       => null,
 			'fontStyle'      => null,
 			'fontWeight'     => null,
+			'letterSpacing'  => null,
 			'lineHeight'     => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
@@ -105,6 +106,7 @@ class WP_Theme_JSON_Gutenberg {
 			'customFontSize'        => null,
 			'customFontStyle'       => null,
 			'customFontWeight'      => null,
+			'customLetterSpacing'   => null,
 			'customLineHeight'      => null,
 			'customTextDecorations' => null,
 			'customTextTransforms'  => null,
@@ -238,6 +240,9 @@ class WP_Theme_JSON_Gutenberg {
 		'font-weight'      => array(
 			'value' => array( 'typography', 'fontWeight' ),
 		),
+		'letter-spacing'   => array(
+			'value' => array( 'typography', 'letterSpacing' ),
+		),
 		'line-height'      => array(
 			'value' => array( 'typography', 'lineHeight' ),
 		),

lib/experimental-default-theme.json

@@ -204,6 +204,7 @@
 			"customFontWeight": true,
 			"customTextTransforms": true,
 			"customTextDecorations": true,
+			"customLetterSpacing": true,
 			"fontSizes": [
 				{
 					"name": "Small",

packages/block-editor/src/components/index.js

@@ -44,6 +44,7 @@ export { default as __experimentalGradientPickerControl } from './gradient-picke
 export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
 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 __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalImageSizeControl } from './image-size-control';

packages/block-editor/src/components/letter-spacing-control/index.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const isWeb = Platform.OS === 'web';
+
+const CSS_UNITS = [
+	{
+		value: 'px',
+		label: isWeb ? 'px' : __( 'Pixels (px)' ),
+		default: '2',
+	},
+	{
+		value: 'em',
+		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
+		default: '.2',
+	},
+	{
+		value: 'rem',
+		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
+		default: '.2',
+	},
+];
+
+/**
+ * Control for letter-spacing.
+ *
+ * @param  {Object}   props                 Component props.
+ * @param  {string}   props.value           Currently selected letter-spacing.
+ * @param  {Function} props.onChange        Handles change in letter-spacing selection.
+ * @return {WPElement}                      Letter-spacing control.
+ */
+export default function LetterSpacingControl( { value, onChange } ) {
+	return (
+		<UnitControl
+			label={ __( 'Letter-spacing' ) }
+			value={ value }
+			__unstableInputWidth="60px"
+			units={ CSS_UNITS }
+			onChange={ onChange }
+		/>
+	);
+}

packages/block-editor/src/hooks/letter-spacing.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import LetterSpacingControl from '../components/letter-spacing-control';
+import useSetting from '../components/use-setting';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Key within block settings' supports array indicating support for letter-spacing
+ * e.g. settings found in `block.json`.
+ */
+export const LETTER_SPACING_SUPPORT_KEY = '__experimentalLetterSpacing';
+
+/**
+ * Inspector control panel containing the letter-spacing options.
+ *
+ * @param  {Object} props Block properties.
+ * @return {WPElement}    Letter-spacing edit element.
+ */
+export function LetterSpacingEdit( props ) {
+	const {
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const isDisabled = useIsLetterSpacingDisabled( props );
+
+	if ( isDisabled ) {
+		return null;
+	}
+
+	function onChange( newSpacing ) {
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				typography: {
+					...style?.typography,
+					letterSpacing: newSpacing,
+				},
+			} ),
+		} );
+	}
+
+	return (
+		<LetterSpacingControl
+			value={ style?.typography?.letterSpacing }
+			onChange={ onChange }
+		/>
+	);
+}
+
+/**
+ * Checks if letter-spacing settings have been disabled.
+ *
+ * @param  {string} name Name of the block.
+ * @return {boolean}     Whether or not the setting is disabled.
+ */
+export function useIsLetterSpacingDisabled( { name: blockName } = {} ) {
+	const notSupported = ! hasBlockSupport(
+		blockName,
+		LETTER_SPACING_SUPPORT_KEY
+	);
+	const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' );
+
+	return notSupported || ! hasLetterSpacing;
+}

packages/block-editor/src/hooks/typography.js

@@ -47,6 +47,11 @@ import {
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	useIsTextTransformDisabled,
 } from './text-transform';
+import {
+	LETTER_SPACING_SUPPORT_KEY,
+	LetterSpacingEdit,
+	useIsLetterSpacingDisabled,
+} from './letter-spacing';
 
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -56,6 +61,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_FAMILY_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
+	LETTER_SPACING_SUPPORT_KEY,
 ];
 
 export function TypographyPanel( props ) {
@@ -75,6 +81,7 @@ export function TypographyPanel( props ) {
 					<FontAppearanceEdit { ...props } />
 					<LineHeightEdit { ...props } />
 					<TextDecorationAndTransformEdit { ...props } />
+					<LetterSpacingEdit { ...props } />
 				</ComponentSystemProvider>
 			</PanelBody>
 		</InspectorControls>
@@ -98,6 +105,7 @@ function useIsTypographyDisabled( props = {} ) {
 		useIsFontFamilyDisabled( props ),
 		useIsTextDecorationDisabled( props ),
 		useIsTextTransformDisabled( props ),
+		useIsLetterSpacingDisabled( props ),
 	];
 
 	return configs.filter( Boolean ).length === configs.length;

packages/block-library/src/site-tagline/block.json

@@ -23,6 +23,7 @@
 		"fontSize": true,
 		"lineHeight": true,
 		"__experimentalFontFamily": true,
-		"__experimentalTextTransform": true
+		"__experimentalTextTransform": true,
+		"__experimentalLetterSpacing": true
 	}
 }

packages/block-library/src/site-title/block.json

@@ -31,6 +31,7 @@
 		"__experimentalFontFamily": true,
 		"__experimentalTextTransform": true,
 		"__experimentalFontStyle": true,
-		"__experimentalFontWeight": true
+		"__experimentalFontWeight": true,
+		"__experimentalLetterSpacing": true
 	}
 }

packages/blocks/src/api/constants.js

@@ -88,6 +88,10 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'typography', 'textTransform' ],
 		support: [ '__experimentalTextTransform' ],
 	},
+	letterSpacing: {
+		value: [ 'typography', 'letterSpacing' ],
+		support: [ '__experimentalLetterSpacing' ],
+	},
 };
 
 export const __EXPERIMENTAL_ELEMENTS = {

packages/edit-site/src/components/sidebar/typography-panel.js

@@ -5,6 +5,7 @@ import {
 	LineHeightControl,
 	__experimentalFontFamilyControl as FontFamilyControl,
 	__experimentalFontAppearanceControl as FontAppearanceControl,
+	__experimentalLetterSpacingControl as LetterSpacingControl,
 } from '@wordpress/block-editor';
 import { PanelBody, FontSizePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -17,8 +18,12 @@ import { useSetting } from '../editor/utils';
 export function useHasTypographyPanel( { supports, name } ) {
 	const hasLineHeight = useHasLineHeightControl( { supports, name } );
 	const hasFontAppearance = useHasAppearanceControl( { supports, name } );
+	const hasLetterSpacing = useHasLetterSpacingControl( { supports, name } );
 	return (
-		hasLineHeight || hasFontAppearance || supports.includes( 'fontSize' )
+		hasLineHeight ||
+		hasFontAppearance ||
+		hasLetterSpacing ||
+		supports.includes( 'fontSize' )
 	);
 }
 
@@ -39,6 +44,13 @@ function useHasAppearanceControl( { supports, name } ) {
 	return hasFontStyles || hasFontWeights;
 }
 
+function useHasLetterSpacingControl( { supports, name } ) {
+	return (
+		useSetting( 'typography.customLetterSpacing', name ) &&
+		supports.includes( 'letterSpacing' )
+	);
+}
+
 export default function TypographyPanel( {
 	context: { supports, name },
 	getStyle,
@@ -58,6 +70,10 @@ export default function TypographyPanel( {
 		supports.includes( 'fontWeight' );
 	const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } );
 	const hasAppearanceControl = useHasAppearanceControl( { supports, name } );
+	const hasLetterSpacingControl = useHasLetterSpacingControl( {
+		supports,
+		name,
+	} );
 
 	return (
 		<PanelBody title={ __( 'Typography' ) } initialOpen={ true }>
@@ -102,6 +118,14 @@ export default function TypographyPanel( {
 					hasFontWeights={ hasFontWeights }
 				/>
 			) }
+			{ hasLetterSpacingControl && (
+				<LetterSpacingControl
+					value={ getStyle( name, 'letterSpacing' ) }
+					onChange={ ( value ) =>
+						setStyle( name, 'letterSpacing', value )
+					}
+				/>
+			) }
 		</PanelBody>
 	);
 }